Синтаксисы записи цвета
| Синтаксис | Пример | Примечания |
|---|---|---|
| Hex | #1F4FE0, #1F4FE080 | Две hex-цифры на канал; 8 цифр добавляют альфа-канал. #RGB — сокращение для #RRGGBB. |
| rgb() | rgb(31 79 224 / 50%) | 0–255 на канал. Современный синтаксис использует пробелы и косую черту для альфа-канала; форма с запятыми по-прежнему работает. |
| hsl() | hsl(225 76% 50%) | Тон в градусах, насыщенность и светлота в процентах. Легко подправить вручную, но одинаковые значения светлоты не выглядят одинаково светлыми. |
| hwb() | hwb(225 12% 12%) | Тон, белизна, чернота: так смешивает краски художник. |
| oklch() | oklch(0.51 0.22 266) | Перцептивная светлота 0–1, хрома, тон. Изменение L на одну и ту же величину выглядит одинаковым для любого тона, что делает это пространство правильным для построения палитр. |
| oklab() | oklab(0.51 0.01 -0.22) | Декартова форма OKLCH. |
| Именованный | rebeccapurple | 148 имён из CSS Color Level 4. |
Контраст
WCAG 2 определяет контраст как (L₁ + 0.05) / (L₂ + 0.05) по относительной яркости, от 1:1 (одинаковые цвета) до 21:1 (чёрный на белом). Основному тексту нужно 4.5:1 для AA и 7:1 для AAA; крупному тексту (18 pt, или 14 pt полужирным) и элементам интерфейса, таким как рамки и иконки, нужно 3:1. Проверка показывает все четыре вердикта и меняет цвета местами, чтобы показать, что коэффициент симметричен.
Почему OKLCH
В HSL жёлтый и синий с одинаковой «светлотой» сильно различаются по воспринимаемой яркости, поэтому палитры, построенные в HSL, имеют неровные шаги. OKLCH спроектирован так, чтобы равные числовые различия выглядели равными. Он поддерживается всеми современными браузерами, а color-mix() и синтаксис относительных цветов работают с ним. Конвертер помечает цвета OKLCH, выходящие за пределы гаммы sRGB, поскольку инструмент их ограничивает.
Вопросы
Как перевести hex в RGB вручную?
Разбейте шесть цифр на пары и переведите каждую из hex: #1F4FE0 → 1F = 31, 4F = 79, E0 = 224 → rgb(31, 79, 224). Трёхзначный hex удваивает каждую цифру (#F80 = #FF8800).
Какой коэффициент контраста мне нужен?
4.5:1 для обычного текста и 3:1 для крупного текста или элементов интерфейса, чтобы соответствовать WCAG AA; 7:1 и 4.5:1 для AAA. Текст-заполнитель и отключённые элементы управления исключены из требований, но проверить их всё равно стоит.
Почему одна и та же светлота hsl() выглядит по-разному для разных тонов?
HSL — это геометрическое преобразование RGB без перцептивной модели; чистый жёлтый (hsl 60 100% 50%) намного ярче чистого синего (hsl 240 100% 50%) при той же L. Используйте OKLCH, когда нужны визуально равномерные шаги.
Что такое альфа-канал?
Непрозрачность, от 0 (прозрачный) до 1 (непрозрачный), записывается после косой черты в современном синтаксисе или как четвёртое значение в rgba(). Контраст здесь вычисляется для непрозрачного цвета; для полупрозрачного текста на фоне нужен результат смешивания.