HEX, RGB, HSL, CMYK и проверка контраста текста

Код цвета — это один и тот же цвет, записанный в другой системе обозначений. HEX, RGB и HSL описывают один и тот же свет на экране, поэтому они точно переводятся друг в друга с точностью до округления. CMYK описывает краску на бумаге, поэтому пересчёт из экранных значений даёт только приблизительный результат. Коэффициент контрастности по WCAG — отдельное число, которое сравнивает светлоту двух цветов и показывает, читается ли текст. Вставьте цвет в конвертер цветов, чтобы сразу увидеть все форматы.

Конвертер цветовНужен цвет в другом форматеСделать бесплатно

Если нужный цвет находится внутри фотографии, логотипа или скриншота, сначала считайте его с пикселя с помощью пипетки для цвета на изображении, а затем вставьте HEX сюда. Как выбрать точный цвет с изображения — здесь описаны все шаги.

HEX и RGB — одни и те же числа

HEX-код состоит из трёх пар шестнадцатеричных цифр. #34D6A0 содержит значения красного, зелёного и синего. Каждая пара — это число от 00 до FF, то есть от 0 до 255 в десятичной записи. Значит, 34 — это 52, D6 — 214, а A0 — 160, и в виде RGB получается rgb(52, 214, 160).

Запись числа в шестнадцатеричной системе меняет только его вид. Сокращённая запись #abc означает #aabbcc: каждая цифра повторяется дважды. Восьмизначный код добавляет в конце пару для прозрачности: от 00 (полностью прозрачный) до FF (полностью непрозрачный), поэтому #34D6A080 примерно наполовину прозрачен. RGBA записывает ту же прозрачность числом от 0 до 1.

CSS также принимает названия цветов. rebeccapurple — это #663399. Конвертер считывает названия через сам браузер, поэтому работает любое название, которое знает браузер.

HSL описывает цвет так, как его описывают люди

HSL — это тон (hue), насыщенность (saturation) и светлота (lightness). Тон — это угол на цветовом круге: красный — 0 градусов, зелёный — 120, синий — 240. Насыщенность показывает, насколько цвет далёк от серого, а светлота — насколько он далёк от чёрного или белого.

Тот же #34D6A0 — это hsl(160, 66%, 52%). Его тон лежит между зелёным и синим, насыщенность высокая, а светлота чуть выше середины. HSL проще всего редактировать вручную: можно сохранить тон и менять только светлоту, чтобы получить более светлый или более тёмный оттенок.

HSV близок к HSL, но вместо светлоты использует яркость (value) — яркость самого сильного канала. Некоторые пипетки работают именно с ним, так что вы можете встретить его в других инструментах. Конвертер показывает HSV рядом с HSL, чтобы их можно было сравнить.

CMYK — для краски, поэтому это оценка

Экраны добавляют свет: красный, зелёный и синий вместе дают белый. Принтеры убирают свет краской: голубой, пурпурный, жёлтый и чёрный на белой бумаге. Эти две системы не могут совпасть точно, поэтому значение CMYK всегда является переводом.

Конвертер использует простую формулу. Чёрный (K) — это единица минус наибольшее из значений красного, зелёного и синего в шкале от 0 до 1. Голубой (C), пурпурный (M) и жёлтый (Y) затем вычисляются из того, что остаётся после K. Формула не учитывает краску, бумагу и цветовой профиль, которые использует типография. Поэтому напечатанный результат будет отличаться, а очень яркие цвета могут вообще оказаться вне возможностей CMYK-красок. Используйте значение CMYK, чтобы начать разговор с типографией, и попросите пробный отпечаток перед большим тиражом.

Контраст — это про яркость, а не про оттенок

Коэффициент контрастности WCAG сравнивает два цвета по относительной яркости (luminance). Яркость вычисляется из значений красного, зелёного и синего после гамма-коррекции, и зелёный вносит наибольший вклад, потому что глаз человека на него реагирует сильнее всего. Сначала каждый канал переводится из шкалы 0–255, а затем яркость равна 0,2126 × красный + 0,7152 × зелёный + 0,0722 × синий.

Коэффициент — это (большая яркость + 0,05), делённое на (меньшая яркость + 0,05). Чёрный на белом даёт 21 к 1 — максимально возможное значение. Два цвета могут заметно различаться по тону и всё же иметь низкий коэффициент, если их светлота одинакова, и именно такой случай призвана выявлять эта проверка. Тот же низкий контраст — причина, по которой QR-коды не сканируются.

Пороговые значения

WCAG 2.x задаёт два уровня, а требуемый коэффициент зависит от размера текста.

• Уровень AA: 4,5 к 1 для обычного текста и 3 к 1 для крупного.
• Уровень AAA: 7 к 1 для обычного текста и 4,5 к 1 для крупного.

Крупный текст — это 24 пикселя и больше или 18,66 пикселя и жирный шрифт. Всё, что меньше, считается обычным. Частая ошибка — серый текст на белом. Средне-серый цвет вроде #777777 на белом даёт примерно 4,48 к 1. Для обычного текста он не проходит AA с небольшим запасом, зато проходит AA для крупных заголовков.

Конвертер показывает коэффициент, округлённый до двух знаков, но каждая проверка (пройдено или нет) использует точное значение. Поэтому значение, которое выглядит как 4,50, всё же может не пройти, если оно немного меньше. Проверка измеряет только одно. Она не учитывает толщину шрифта, межстрочный интервал и то, как люди с нарушениями цветовосприятия видят дизайн, поэтому проверьте и реальную страницу в реальных размерах.

Светлые и тёмные оттенки

Полоска под конвертером показывает девять ступеней вокруг цвета: четыре светлых оттенка, смешанных с белым, сам цвет и четыре тёмных, смешанных с чёрным. Щелчок по одной из них копирует её HEX-код. Это удобно, когда нужен набор связанных цветов, например светлый фон, цвет при наведении и тёмный цвет текста, все взятые из одного фирменного значения. Перед использованием проверяйте каждую выбранную пару в разделе контраста.

Как пользоваться fixmint

1. Вставьте цвет в поле Цвет в формате HEX, RGB, HSL или в виде названия CSS, например rebeccapurple.
2. Посмотрите строки HEX, RGB, HSL, HSV и CMYK. Нажмите Копировать рядом с нужной. Значение CMYK помечено как приблизительное.
3. Введите цвет фона в поле Фон или выберите его по образцу, затем посмотрите коэффициент под На белом, На чёрном и На вашем фоне.
4. Проверьте четыре отметки под каждым коэффициентом: AA и AAA, каждая для обычного и крупного текста.
5. В разделе Светлые и тёмные оттенки нажмите на образец, чтобы скопировать его.

Короткие ответы

Значение CMYK точное?

Нет. Это простой арифметический пересчёт, который не учитывает типографию, бумагу и цветовой профиль. Считайте его отправной точкой и попросите пробный отпечаток.

Означает ли проходящий коэффициент контраста, что дизайн доступен?

Это значит, что цвета текста соответствуют одному измеримому порогу. Доступность зависит также от размера, интервалов, анимации и того, как устроена страница, поэтому коэффициент — это ориентир, а не полная проверка.

В каком формате хранить цвета в таблице стилей?

В том, который вам удобнее читать и редактировать. HEX компактен и распространён. HSL проще подстраивать вручную: вы меняете светлоту, не трогая тон.