Инструмент Выбора Цвета - Преобразование RGB, Hex, CMYK и HSV Цветовых Кодов

Что такое палитра цветов?

Палитра цветов — это инструмент для выбора цвета и просмотра его значения в разных цветовых форматах. Этот инструмент одновременно показывает цвет в форматах RGB (красный, зелёный, синий), HEX, CMYK (голубой, пурпурный, жёлтый, чёрный) и HSV (тон, насыщенность, значение). Изменение любого формата мгновенно обновляет остальные.

Как пользоваться палитрой цветов

Выбрать цвет можно тремя способами.

Щёлкните в любом месте спектрального поля, чтобы выбрать тон и насыщенность. Горизонтальное положение задаёт тон (семейство цветов, например красный или синий). Вертикальное положение задаёт насыщенность (насколько ярким или разбеленным выглядит цвет). Расположенный под спектром ползунок регулирует яркость: от чёрного слева до полной яркости справа.

Можно также ввести точные значения. Поле HEX принимает коды, например #2ECC71, с # или без него. Каждое поле RGB принимает целое число от 0 до 255. Каждое поле CMYK принимает целое число от 0 до 100. Значение, превышающее допустимый диапазон, ограничивается максимальным.

Рядом с каждым цветовым форматом находится кнопка копирования. При нажатии значение копируется в буфер обмена и отображается короткое сообщение «Скопировано!».

Объяснение цветовых моделей

RGB

RGB описывает цвет как сочетание красного, зелёного и синего света — тех же трёх цветов, которые экран использует для создания каждого пикселя. Значение каждого канала находится в диапазоне от 0 до 255. RGB(255, 0, 0) — чистый красный цвет, а RGB(0, 0, 0) — чёрный. Браузеры, приложения и программы для работы с видео используют RGB, поскольку эта модель соответствует принципу работы экранов.

HEX

HEX-код записывает цвет RGB в системе счисления с основанием 16, а не 10. В #2ECC71 есть три пары символов: 2E для красного, CC для зелёного и 71 для синего. Каждая пара находится в диапазоне от 00 до FF. HEX-коды распространены в веб-дизайне, поскольку CSS принимает их напрямую, а вводить их короче, чем rgb(). Существует и сокращённая запись из трёх символов: #0F0 означает то же, что и #00FF00.

CMYK

CMYK используется в печати. Принтер формирует цвет, нанося на белую бумагу слои голубых, пурпурных, жёлтых и чёрных чернил, поэтому эта модель работает за счёт вычитания света, а не его сложения. Значение каждого канала задаётся в процентах от 0 до 100. CMYK(0, 0, 0, 0) означает полное отсутствие чернил, поэтому видна белая бумага. CMYK не может воспроизвести все цвета, отображаемые экраном: некоторые яркие цвета, особенно отдельные оттенки синего и зелёного, после печати выглядят более тусклыми.

HSV

HSV отдельно описывает тон, насыщенность и значение. Тон — это семейство цветов, задаваемое в градусах от 0° до 360°, где 0° соответствует красному, 120° — зелёному, а 240° — синему. Насыщенность показывает, насколько цвет яркий: от 0 % (серый) до 100 % (полностью насыщенный цвет). Значение показывает яркость: от 0 % (чёрный) до 100 % (полная яркость). HSV близка к тому, как люди обычно описывают цвет, поэтому спектр и ползунок яркости в этом инструменте основаны на ней.

Формула преобразования RGB в HEX

Каждый канал RGB, то есть число от 0 до 255, преобразуется в двузначное шестнадцатеричное число, после чего три пары объединяются с символом # в начале.

$\text{Hex} = \text{\#} + \text{toHex}(R) + \text{toHex}(G) + \text{toHex}(B)$

Формула преобразования RGB в CMYK

Сначала каждый канал RGB преобразуется в дробь от 0 до 1. Чёрный канал (K) определяется по наибольшему значению канала. Затем голубой, пурпурный и жёлтый каналы вычисляются на основе остальных каналов и K.

$R' = R/255,\quad G' = G/255,\quad B' = B/255$ $K = 1 - \max(R', G', B')$ $C = \frac{1-R'-K}{1-K}\times 100\%,\quad M = \frac{1-G'-K}{1-K}\times 100\%,\quad Y = \frac{1-B'-K}{1-K}\times 100\%$

Если K равно 1 (цвет чисто чёрный), значения C, M и Y устанавливаются равными 0, чтобы избежать деления на ноль.

Формула преобразования RGB в HSV

Сначала RGB преобразуется в дроби от 0 до 1. Пусть $C_{max}$ — наибольшее из трёх значений, $C_{min}$ — наименьшее, а $\Delta$ — их разность.

$V = C_{max}\times 100\%$ $S = 0 \text{ if } C_{max}=0,\text{ иначе } \frac{\Delta}{C_{max}}\times 100\%$

Тон зависит от того, какой канал имеет наибольшее значение:

0° & \Delta = 0 \\ 60°\times\left(\dfrac{G'-B'}{\Delta}\bmod 6\right) & C_{max}=R' \\ 60°\times\left(\dfrac{B'-R'}{\Delta}+2\right) & C_{max}=G' \\ 60°\times\left(\dfrac{R'-G'}{\Delta}+4\right) & C_{max}=B' \end{cases}$$ ## Пример расчёта Рассмотрим RGB(46, 204, 113) — оттенок зелёного. **HEX:** 46 в шестнадцатеричной системе — это `2E`, 204 — `CC`, а 113 — `71`, что даёт `#2ECC71`. **CMYK:** После масштабирования R′ = 0,180, G′ = 0,800, B′ = 0,443. Наибольшее значение имеет G′, поэтому K = 1 − 0,800 = 0,20, то есть 20 % чёрного. Затем C = (1 − 0,180 − 0,20) / 0,800 × 100 ≈ 77 %, M = (1 − 0,800 − 0,20) / 0,800 × 100 = 0 %, а Y = (1 − 0,443 − 0,20) / 0,800 × 100 ≈ 45 %. Результат: CMYK(77, 0, 45, 20). **HSV:** $C_{max}$ = 0,800 (зелёный), $C_{min}$ = 0,180, поэтому Δ = 0,620. Значение = 80 %. Насыщенность = 0,620 / 0,800 × 100 ≈ 77 %. Поскольку наибольшим является зелёный канал, H = 60 × ((B′ − R′) / Δ + 2) = 60 × ((0,443 − 0,180) / 0,620 + 2) ≈ 145°. Результат: HSV(145°, 77 %, 80 %). ## Доступный выбор цветов Примерно 1 из (2,5 см) 12 мужчин и около 1 из (2,5 см) 200 женщин имеют ту или иную форму нарушения цветового зрения; чаще всего это сниженная способность различать красный и зелёный. Дизайн, в котором смысл передаётся только цветом, например красное сообщение об ошибке без значка или подписи, не будет работать для таких пользователей. Добавление текстовой подписи, значка или узора рядом с цветом решает эту проблему. Текст также должен иметь достаточный контраст с фоном. Руководство по обеспечению доступности веб-контента (WCAG) рекомендует коэффициент контрастности не менее 4,5:1 для обычного текста и 3:1 для крупного текста. Для измерения этого показателя нужен отдельный инструмент проверки контрастности, поскольку данный инструмент сам коэффициенты контрастности не вычисляет. ## Часто задаваемые вопросы **В чём разница между RGB и CMYK?** RGB предназначена для экранов и формирует цвет сложением красного, зелёного и синего света. CMYK предназначена для печати и формирует цвет нанесением слоёв чернил на бумагу, за счёт чего свет, наоборот, вычитается. RGB может создавать более яркие цвета, чем CMYK, поскольку чернила не способны воспроизвести весь диапазон цветов, излучаемых экраном. **Почему цвета на печати отличаются от цветов на экране?** Экран непосредственно излучает свет, а отпечатанная страница только отражает падающий на неё свет. Чернила CMYK также охватывают меньший диапазон цветов, чем свет RGB, поэтому некоторые яркие цвета экрана невозможно в точности воспроизвести на бумаге. **Что означает символ # в HEX-коде?** Он указывает, что следующие символы являются шестнадцатеричным кодом цвета. Это соглашение появилось ещё в ранних версиях HTML и CSS. Без него браузер не распознает значение как цвет. **Почему некоторые HEX-коды состоят только из трёх символов?** Трёхсимвольный код — это сокращённая запись шестисимвольного кода, в которой каждая пара состоит из двух одинаковых цифр. `#0F0` разворачивается в `#00FF00`. **Точны ли преобразования между форматами?** Преобразование RGB в HEX является точным, поскольку это те же числа, записанные в другой системе счисления. Преобразование RGB в CMYK является приближённым, поскольку оно переводит значения света в значения чернил, а это разные физические процессы с различными диапазонами цветов. **Может ли этот инструмент выбрать цвет непосредственно из изображения или веб-страницы?** Нет. Расширение браузера или встроенная в операционную систему палитра цветов, например Digital Color Meter в macOS, может считать цвет с экрана; полученное значение затем можно ввести в этот инструмент для преобразования.