Как пользоваться
- Введите цвет — #0f766e, rgb(15 118 110), hsl(175 77% 26%), oklch(…) — или выберите его в палитре.
- Скопируйте нужный формат из списка.
- Задайте цвет фона, чтобы проверить коэффициент контраста и соответствие WCAG AA/AAA.
- Нажмите на оттенок в шкале, чтобы использовать его.
Описание параметров
- HEX / RGB
- Экранные цвета в виде красного, зелёного и синего каналов от 0 до 255. #rrggbbaa и rgb(… / 50%) добавляют прозрачность.
- HSL / HSV
- Тон, насыщенность и светлота (или яркость). Удобно, чтобы вручную сделать цвет светлее или темнее.
- OKLCH
- Перцептивное цветовое пространство из CSS Color 4. При изменении светлоты тон и воспринимаемая насыщенность остаются стабильными, поэтому оно идеально подходит для палитр и тёмных тем.
- CMYK
- Простое преобразование только для справки. Реальные цвета при печати зависят от цветового профиля принтера, поэтому точные значения уточняйте в типографии.
- Коэффициент контраста
- WCAG 2.2 требует 4,5:1 для обычного текста и 3:1 для крупного (18pt или 14pt полужирным) на уровне AA; 7:1 и 4,5:1 — на уровне AAA.
Пример
#0f766e — это rgb(15 118 110), hsl(175 77% 26%) и oklch(51.1% 0.086 186.4). На белом фоне его коэффициент контрастности около 5,5:1, что соответствует уровню WCAG AA для текста любого размера.
Популярные цвета во всех форматах
Именованные цвета CSS и их значения. CMYK здесь — простое математическое преобразование; для профессиональной печати используйте значения CMYK из цветового профиля вашей типографии.
| Название в CSS | HEX | RGB | HSL | CMYK |
|---|---|---|---|---|
| red | #ff0000 | rgb(255 0 0) | hsl(0 100% 50%) | 0%, 100%, 100%, 0% |
| orange | #ffa500 | rgb(255 165 0) | hsl(39 100% 50%) | 0%, 35%, 100%, 0% |
| gold | #ffd700 | rgb(255 215 0) | hsl(51 100% 50%) | 0%, 16%, 100%, 0% |
| green | #008000 | rgb(0 128 0) | hsl(120 100% 25%) | 100%, 0%, 100%, 50% |
| teal | #008080 | rgb(0 128 128) | hsl(180 100% 25%) | 100%, 0%, 0%, 50% |
| blue | #0000ff | rgb(0 0 255) | hsl(240 100% 50%) | 100%, 100%, 0%, 0% |
| navy | #000080 | rgb(0 0 128) | hsl(240 100% 25%) | 100%, 100%, 0%, 50% |
| purple | #800080 | rgb(128 0 128) | hsl(300 100% 25%) | 0%, 100%, 0%, 50% |
| hotpink | #ff69b4 | rgb(255 105 180) | hsl(330 100% 71%) | 0%, 59%, 29%, 0% |
| brown | #a52a2a | rgb(165 42 42) | hsl(0 59% 41%) | 0%, 75%, 75%, 35% |
| gray | #808080 | rgb(128 128 128) | hsl(0 0% 50%) | 0%, 0%, 0%, 50% |
Какой формат выбрать
HEX — самый короткий способ записать цвет в CSS и дизайнерских программах: по две шестнадцатеричные цифры на красный, зелёный и синий.
RGB — та же информация в десятичной записи, а rgb(255 0 0 / 50%) добавляет прозрачность.
HSL описывает тон, насыщенность и светлоту, поэтому светлые и тёмные оттенки того же цвета легко получить, изменив только последнее число.
OKLCH — более новый формат CSS, в котором равные шаги по светлоте выглядят для глаза одинаково различными; он полезен для доступных цветовых палитр.
Часто задаваемые вопросы
Какой коэффициент контраста нужен для текста?
Не менее 4,5:1 для основного текста (WCAG AA). Чисто чёрный на белом — 21:1; распространённый серый #767676 на белом — 4,54:1, едва проходит.
Почему значение CMYK отличается от Photoshop?
Photoshop конвертирует через цветовой профиль ICC для конкретной печатной машины и бумаги. Этот инструмент использует простую математическую формулу — она годится для оценки, но не для цветопроб.
Чем HSL отличается от OKLCH?
HSL — простая перестановка RGB, поэтому жёлтый и синий с одинаковой светлотой выглядят совсем по-разному по яркости. OKLCH устроен так, чтобы одинаковая светлота воспринималась глазом как одинаковая яркость.
Можно ли уже сейчас использовать OKLCH в CSS?
Да. oklch() работает во всех актуальных версиях основных браузеров.
Конфиденциальность
Этот инструмент работает полностью в браузере. Ваши файлы и текст обрабатываются на вашем устройстве и никогда не загружаются на наши серверы.