Три способа записать один цвет
| HEX | #2563D9 |
| RGB | rgb(37, 99, 217) |
| HSL | hsl(219, 71%, 50%) |
Все три — один и тот же синий. Экраны смешивают любой цвет из красного, зелёного и синего света, и каждый формат — свой способ записать эти количества.
RGB и HEX
RGB задаёт красный, зелёный и синий от 0 до 255. HEX записывает те же три числа в шестнадцатеричной системе, по две цифры: 25 — это 37, 63 — 99, а D9 — 217. Короткий код вроде #FFF удваивает каждую цифру (#FFFFFF, белый), а четвёртая пара добавляет прозрачность (#2563D980 — примерно наполовину прозрачный).
HSL
HSL описывает цвет так, как о нём думают люди: тон — положение на цветовом круге в градусах (0 красный, 120 зелёный, 240 синий), насыщенность — его сила, а светлота идёт от чёрного при 0% до белого при 100%. Поэтому легко получить более светлый или тёмный оттенок: оставьте тон и насыщенность и измените светлоту.
CMYK — для печати
Принтеры смешивают не свет, а голубую, пурпурную, жёлтую и чёрную краску. Перевод между RGB и CMYK приблизителен, потому что экраны и краски не могут показать в точности один и тот же диапазон цветов.
Контраст для текста
Рекомендации по доступности WCAG требуют на уровне AA контраста не меньше 4,5:1 для обычного текста и 3:1 для крупного. Конвертер цветов переводит между всеми этими форматами и проверяет контраст с белым и чёрным текстом. Чтобы узнать код цвета на фото или скриншоте, используйте Пипетка цвета с изображения.
Палитра на основе HSL
Сохраните тон и меняйте светлоту — получится набор оттенков, которые сочетаются друг с другом. От hsl(219, 71%, 50%), среднего синего:
| Назначение | HSL | HEX |
|---|---|---|
| Фон при наведении | hsl(219, 71%, 95%) | #E9F0FB |
| Рамка | hsl(219, 71%, 80%) | #A8C1F0 |
| Кнопка | hsl(219, 71%, 50%) | #2564DA |
| Нажатая кнопка | hsl(219, 71%, 40%) | #1E50AE |
| Текст заголовка | hsl(219, 71%, 25%) | #12326D |
Сделать то же в HEX — значит угадывать три числа сразу, поэтому инструменты дизайна работают в HSL.
Проверка контраста
Этот синий на белом даёт коэффициент контраста 5,37:1, что проходит порог 4,5:1 для обычного текста. На чёрном — лишь 3,91:1, так что текст на кнопке белый, а не чёрный. Контраст гораздо сильнее зависит от светлоты, чем от тона, поэтому цвет средней светлоты часто не проходит ни с тем, ни с другим.
Частые ошибки
- Ждать, что одинаковая светлота выглядит одинаково ярко. hsl(60, 100%, 50%) — яркий жёлтый, hsl(240, 100%, 50%) — тёмный синий. Наши глаза гораздо чувствительнее к зелёному, чем к синему. Проверяйте контраст, а не верьте числу светлоты.
- Путать HSL и HSB. HSB в Photoshop, он же HSV, — это не HSL. При 100% яркости и 100% насыщенности HSB даёт чистый тон, а HSL при 100% светлоты всегда белый.
- Писать HEX с прозрачностью там, где она не поддерживается. Восьмизначный HEX работает в браузерах, но многие приложения и старые инструменты принимают только шесть цифр.
- Судить о цветах по снимку экрана. Снимок, сжатый в JPG, сдвигает значения пикселей, так что взятый пипеткой цвет может отличаться на несколько шагов. Берите цвет из PNG.