Как пользоваться
- Введите код или CSS-название цвета и нажмите «Применить».
- Выберите цвет фона в поле «Сравнить с», чтобы проверить контраст с ним.
- Введите часть названия или HEX в поле «Фильтр по названию или HEX…», чтобы найти цвет в таблице.
- Нажмите «Копировать ссылку», чтобы поделиться выбранным цветом.
Примеры
Цвет из брендбука для CSS
#2451E8
HEX: #2451E8 RGB: rgb(36, 81, 232) HSL: hsl(226, 81%, 53%) HSV: hsv(226, 84%, 91%) CMYK: cmyk(84%, 65%, 0%, 9%) Название: ≈ MediumSlateBlue с белым: 6.14:1 — ✓ AA, ✓ AA Large, ✕ AAA, ✓ AAA Large с чёрным: 3.41:1 — ✕ AA, ✓ AA Large, ✕ AAA, ✕ AAA Large
Оттенок из макета в формате HSB
hsb(32, 100%, 100%)
HEX: #FF8800 RGB: rgb(255, 136, 0) HSL: hsl(32, 100%, 50%) HSV: hsv(32, 100%, 100%) CMYK: cmyk(0%, 47%, 100%, 0%) Название: ≈ DarkOrange с белым: 2.39:1 — ✕ AA, ✕ AA Large, ✕ AAA, ✕ AAA Large с чёрным: 8.77:1 — ✓ AA, ✓ AA Large, ✓ AAA, ✓ AAA Large
Коды тёмно-оранжевого по названию
Dark Orange
HEX: #FF8C00 RGB: rgb(255, 140, 0) HSL: hsl(33, 100%, 50%) HSV: hsv(33, 100%, 100%) CMYK: cmyk(0%, 45%, 100%, 0%) Название: DarkOrange с белым: 2.33:1 — ✕ AA, ✕ AA Large, ✕ AAA, ✕ AAA Large с чёрным: 9.00:1 — ✓ AA, ✓ AA Large, ✓ AAA, ✓ AAA Large
Названия цветов HTML (148)
Все 148 названий цветов CSS, которые поддерживают современные браузеры, сгруппированные по семействам. Нажмите на строку, чтобы загрузить цвет, или на значение HEX или RGB, чтобы скопировать его.
| Цвет | Название | HEX | RGB |
|---|
Частые вопросы
Как определить код цвета по фото или с экрана?
Откройте фото на экране и нажмите «Пипетка», затем выберите нужный пиксель. Кнопка доступна только в браузерах с поддержкой EyeDropper; загрузки изображений в этом инструменте нет.
Поддерживаются ли цвета с прозрачностью?
При вводе rgba() или HEX с альфа-каналом прозрачность игнорируется, и появляется уведомление. Результат всегда представляет непрозрачный цвет sRGB.
Можно ли использовать полученный CMYK для печати?
Значения CMYK приблизительные: расчёт не учитывает цветовой профиль. Для печати используйте профиль вашего принтера или типографии.
Что означает знак ≈ перед названием цвета?
Это ближайшее название из 148 CSS-цветов, найденное по расстоянию в пространстве CIE Lab. Оно не означает точного совпадения с выбранным цветом.
Какой контраст текста нужен по WCAG?
Для уровня AA нужен контраст не ниже 4,5:1 для обычного текста и 3:1 для крупного. Для AAA пороги составляют 7:1 и 4,5:1 соответственно; инструмент проверяет их по WCAG 2.x.