Если вы когда-либо пытались разработать веб-сайт, создать логотип или распечатать визитную карточку, вы сразу же столкнулись с запутанным алфавитным набором цветовых кодов: HEX, RGB, HSL и CMYK. Почему существует так много способов описать простой оттенок синего?
Правда в том, что компьютеры и принтеры «видят» свет принципиально по-разному. Более того, то, как компьютеры обрабатывают свет, не обязательно соответствует тому, как человеческий мозг интерпретирует цвет. Понимание этих форматов — это не просто теория: оно избавит вас от необходимости развертывать веб-сайты с недоступными коэффициентами контрастности или платить тысячи долларов за рекламные листовки, которые на распечатке выглядят мутными и темными.
Аддитивный против субтрактивного света
Прежде чем углубиться в код, мы должны установить физическую разницу между экранами и бумагой.
- Экраны излучают свет (аддитивный). Если отключить все пиксели, экран станет черным. Чтобы сделать белый цвет, экран излучает красный, зеленый и синий свет с максимальной интенсивностью.
- Бумага отражает свет (субтрактивный). Чистый лист бумаги уже белый (он отражает весь свет). Чтобы получить черный цвет, принтер накладывает друг на друга голубые, пурпурные и желтые чернила, чтобы поглотить весь свет.
1. RGB (красный, зеленый, синий)
RGB — это родной язык монитора вашего компьютера. Он определяет цвет, точно сообщая экрану, сколько красного, зеленого и синего света нужно излучать. Каждый канал представлен целым числом от 0 (выключено) до 255 (максимальная интенсивность).
Например, чистый красный — это rgb(255, 0, 0). Чистый белый — это rgb(255, 255, 255).
Подходит для: редактирования изображений (Photoshop) и цифровой фотографии. Он напрямую манипулирует аппаратными пикселями.
2. HEX (шестнадцатеричный)
HEX-коды, такие как #FF5733, — это то же самое, что и RGB. Единственная разница — это математика. Вместо использования чисел с основанием 10 (0–255) используются шестнадцатеричные числа с основанием 16 (от 00 до FF). Первые две буквы обозначают красный цвет, две средние — зеленый, а последние две — синий.
Почему веб-разработчики используют HEX? Потому что он короче. Написание #FFF для разработчика CSS выполняется намного быстрее, чем написание rgb(255, 255, 255).
Подходит для: жесткого кодирования фирменных цветов в CSS. Он лаконичен и легко копируется между инструментами дизайна, такими как Figma, и редакторами кода.
Мгновенно конвертируйте цветовые коды
Не тратьте время на шестнадцатеричные математические вычисления в уме. Используйте наш автономный инструмент для мгновенного перевода между HEX, RGB, HSL и CMYK с визуальным предварительным просмотром.
Открыть конвертер цветов3. HSL (оттенок, насыщенность, яркость)
RGB и HEX ужасны для человека. Если я покажу вам код #4A90E2, вы не сможете легко угадать, какого он цвета. Если я попрошу вас «сделать этот синий цвет на 20% темнее», выполнить математические вычисления в HEX будет практически невозможно.
HSL был разработан для человеческого мозга. Он определяет цвет с помощью цветового круга на 360 градусов.
- Оттенок (0–360): фактический цвет. 0 — красный, 120 — зеленый, 240 — синий.
- Насыщенность (0–100%): насколько интенсивен цвет. 0% — серый, 100% — яркий.
- Яркость (0–100%): насколько темно или ярко. 0% — черный, 100% — белый.
Если ваш фирменный синий цвет — hsl(210, 100%, 50%) и вам нужен более темный оттенок для эффекта наведения кнопки, просто измените последнее число: hsl(210, 100%, 40%). Это волшебство для архитектуры CSS.
4. CMYK (голубой, пурпурный, желтый, ключевой/черный)
CMYK предназначен исключительно для физического мира. Он определяет, как принтер смешивает физические чернила. Поскольку чернила поглощают свет, цветовое пространство физически меньше, чем RGB. Экран может излучать яркие неоновые зеленые оттенки (в RGB), которые принтер физически не может напечатать (в CMYK).
Золотое правило: никогда не отправляйте файл RGB в коммерческий принтер. Принтер принудительно преобразует его в CMYK, в результате чего яркие цвета будут выглядеть мутными и размытыми. Всегда конвертируйте свои проекты в CMYK, прежде чем отправлять их в типографию.
Матрица сравнения
| Format | Environment | Readability | Primary Use Case |
|---|---|---|---|
| HEX | Digital | Low | Standard web design, copying from Figma |
| RGB | Digital | Medium | Manipulating alpha transparency (rgba) |
| HSL | Digital | High | Dynamic CSS theming, Dark Modes |
| CMYK | Physical Print | N/A | Business cards, flyers, packaging |
Часто задаваемые вопросы (FAQ)
Какой формат мне следует использовать для темного режима CSS?
Всегда используйте HSL для динамического оформления тем. Сохраняя постоянные параметры «Цветовой тон» и «Насыщенность», вы можете просто инвертировать значение «Яркость», чтобы идеально преобразовать цвет светлого режима в цвет темного режима.
Могу ли я использовать CMYK на веб-сайте?
Нет. Веб-браузеры понимают только форматы световых цветов (RGB, HEX, HSL). Если вы загрузите файл CMYK JPEG на веб-сайт, некоторые браузеры попытаются его отобразить, но цвета будут выглядеть прерывистыми или инвертированными.
Что такое Альфа-канал?
Буква «А» в RGBA или HSLA означает «Альфа», которая контролирует прозрачность. Альфа 1,0 — полностью сплошная, а 0,5 — 50 % прозрачности. Современный CSS теперь обеспечивает прозрачность непосредственно в HEX-кодах, добавляя две дополнительные цифры (например, #FFFFFF80).