Как пользоваться палитрой цветов
- Нажмите на большой образец, чтобы открыть системную палитру, или введите hex-код, например
#1E90FF, либо название цвета, напримерtomato. - Скопируйте нужный формат: HEX, RGB, HSL, HSV или CMYK. Нажмите на любой образец оттенка или гармонии, чтобы скопировать его hex-код.
- Посмотрите на блоки контраста: они покажут, соответствует ли белый или чёрный текст на вашем цвете уровню WCAG AA или AAA.
Как устроены hex-коды цветов
Hex-код цвета, например #FF6347, состоит из трёх байтов: красный (FF = 255), зелёный (63 = 99) и синий (47 = 71). Каждый канал принимает значения от 00 до FF, что даёт 256 × 256 × 256 = 16 777 216 возможных цветов. Одинаковые значения дают оттенки серого — #000000 это чёрный, #808080 — средне-серый, #FFFFFF — белый, — а чем больше значения, тем светлее цвет.
Светлые и тёмные оттенки, цветовые гармонии
Светлый оттенок (tint) — это ваш цвет, смешанный с белым, а тёмный оттенок (shade) — смешанный с чёрным. Палитра показывает и те и другие с шагом 10 %: это удобно для состояний при наведении, рамок и фонов в тон фирменному цвету.
Гармонии поворачивают тон по цветовому кругу, сохраняя насыщенность и светлоту:
- Комплементарная (180°) — противоположный цвет для сильного контраста и кнопок призыва к действию.
- Аналоговая (±30°) — соседние цвета на круге для спокойных и цельных палитр.
- Триада (±120°) — три равноудалённых цвета для ярких, но сбалансированных дизайнов.
Контрастность цветов и WCAG
Руководство по доступности веб-контента (WCAG) требует коэффициента контрастности не менее 4.5:1 для обычного текста (уровень AA) и 7:1 для уровня AAA. Крупному тексту — от 18 pt или от 14 pt полужирным — для уровня AA достаточно 3:1. Коэффициент сравнивает относительную яркость цветов текста и фона и меняется от 1:1 (одинаковые цвета) до 21:1 (чёрный на белом).
Часто задаваемые вопросы
Что такое hex-коды цветов?
Hex-код цвета описывает цвет шестью шестнадцатеричными цифрами: две для красного, две для зелёного и две для синего, например #FF6347 (tomato). Их понимают CSS, HTML, программы для дизайна и графические редакторы.
Сколько цветов можно задать hex-кодом?
256 × 256 × 256 = 16 777 216 цветов. С дополнительной парой цифр для альфа-канала (#RRGGBBAA) у каждого из них может быть ещё и 256 уровней прозрачности.
Какие названия цветов CSS поддерживаются?
Все 148 именованных цветов из спецификации CSS Color Module — от aliceblue до yellowgreen, включая rebeccapurple. Введите название в поле hex-кода или отфильтруйте список под инструментом и нажмите на цвет, чтобы выбрать его.