Палитра цветов

Все цвета на этой странице заданы в sRGB — цветовом пространстве, которое используется в вебе по умолчанию с тех пор, как браузеры приняли его в конце 1990-х. Экран смешивает красный, зелёный и синий свет, и у каждого канала 256 уровней (0–255), что даёт 16 777 216 возможных цветов. RGB записывает эти три числа напрямую; HEX записывает те же три числа в шестнадцатеричной системе, по две цифры на канал, поэтому #FF6600 — это красный 255, зелёный 102, синий 0. В трёхзначной краткой записи каждая цифра удваивается: #F60 — это #FF6600.

HSL и HSB (также HSV) описывают те же цвета так, чтобы их было удобнее подбирать вручную. Оттенок — это угол на цветовом круге: 0° — красный, 120° — зелёный, 240° — синий. Разница в последнем числе. В HSL светлота 100% всегда даёт белый, а 50% — самый чистый вариант оттенка; в HSB яркость 100% даёт чистый оттенок, а для белого нужна насыщенность 0%. Дизайнерские программы, такие как Photoshop и Figma, используют HSB в своих палитрах, а CSS напрямую понимает hsl(), поэтому выше указаны оба варианта.

Экраны добавляют свет, а принтеры вычитают его с помощью голубой, пурпурной, жёлтой и чёрной красок. Эти две системы охватывают разные диапазоны цветов, которые называются цветовыми охватами. Очень насыщенные экранные цвета, например яркий зелёный RGB, электрический синий или неоновый оранжевый, лежат за пределами того, что способны передать триадные краски, поэтому при печати они выглядят тусклее, чем на мониторе.

Значения CMYK здесь получены простым математическим пересчётом без ICC-профиля: для черновой прикидки этого достаточно, для типографии — нет. Типография выполняет преобразование с профилем под свою бумагу и печатную машину, например FOGRA39 в Европе или GRACoL в США, и один и тот же цвет RGB при разных профилях даст разные проценты красок. Для печатных работ передавайте значение RGB или HEX вместе с профилем, который запрашивает типография.

WCAG 2.1 сравнивает относительную яркость двух цветов: яркость более светлого плюс 0,05, делённая на яркость более тёмного плюс 0,05. Результат лежит в диапазоне от 1:1 (одинаковые цвета) до 21:1 (чёрный на белом). Уровень AA требует не менее 4,5:1 для обычного текста и 3:1 для крупного, то есть 18 пунктов или 14 пунктов полужирным; уровень AAA повышает эти значения до 7:1 и 4,5:1. Элементы интерфейса, такие как границы полей ввода и значки, по критерию успешности 1.4.11 должны иметь контраст 3:1 с окружением.

Зелёный вносит в яркость гораздо больший вклад, чем синий, потому что глаз к нему наиболее чувствителен. Поэтому жёлтый текст на белом не проходит проверку с большим запасом, а тёмно-синий на белом проходит легко, хотя оба цвета выглядят полностью насыщенными. Логотипы и чисто декоративный текст из этого правила исключены.

Палитра изображения читает ваш файл через canvas браузера, уменьшает его до 200 пикселей по длинной стороне и группирует похожие пиксели методом медианного сечения, описанным Полом Хекбертом в 1982 году: цветовой диапазон снова и снова делится по самому широкому каналу, пока не останется шесть групп, а среднее значение каждой группы становится образцом цвета. Прозрачные пиксели игнорируются, поэтому для логотипа на прозрачном фоне вы получите цвета самого логотипа.

Когда цвета известны, плоский логотип часто лучше использовать как вектор. Конвертер изображения в SVG преобразует его в контуры, сохраняя эти точные цвета, а если вы оформляете шапку канала, изменение размера баннера YouTube подгоняет изображение под 2560 × 1440 с учётом безопасной зоны.