Как конвертировать цвета между HEX, RGB, HSL, HSV и CMYK. Таблицы соответствия, формулы перевода, онлайн-конвертер цвета. Работа с палитрой для веб-дизайна и вёрстки.
Введение
Цвет в веб-дизайне — это не только эстетика, но и точные числовые значения. Один и тот же оттенок синего может быть записан как #2563EB в HEX, как rgb(37, 99, 235) в RGB или как hsl(221, 83%, 53%) в HSL. Разные инструменты и контексты требуют разных форматов. Графический редактор выдаёт цвет в RGB, CSS-фреймворк ожидает HEX, а дизайнер мыслит в HSL, подбирая насыщенность и светлоту. Конвертер цветов — это мостик между этими представлениями, позволяющий мгновенно перевести цвет из одной модели в другую. В этой статье разберём основные цветовые модели, их применение и принципы конвертации между ними.
Что такое цветовая модель и зачем их несколько
Цветовая модель — это способ описания цвета с помощью набора чисел. Человеческий глаз воспринимает свет с разной длиной волны, но компьютеры и печатные машины воспроизводят цвет путём смешивания базовых компонентов. Разные модели оптимизированы под разные задачи. RGB аддитивен: смешивая красный, зелёный и синий свет, мы получаем итоговый цвет. Это естественная модель для экранов, где каждый пиксель состоит из трёх субпикселей. CMYK субтрактивен: голубой, пурпурный, жёлтый и чёрный наносятся на бумагу, и каждый слой поглощает часть спектра. Это модель для полиграфии. HEX — это просто RGB, записанный в шестнадцатеричном виде. HSL описывает цвет через тон, насыщенность и светлоту — параметры, интуитивно понятные человеку. HSV похожа на HSL, но использует параметр value вместо lightness. Каждая модель удобна в своём контексте, и умение переводить между ними — базовый навык для верстальщика и дизайнера.
RGB: аддитивная модель для экранов
RGB расшифровывается как Red, Green, Blue — красный, зелёный, синий. Каждый цвет описывается тремя числами в диапазоне от 0 до 255, которые обозначают интенсивность соответствующего канала. Нулевые значения всех трёх каналов дают чёрный цвет, максимальные — белый, равные значения — оттенок серого, преобладание одного канала — насыщенный оттенок этого цвета. Комбинируя 256 градаций на трёх каналах, модель RGB охватывает 16.7 миллионов цветов. В CSS цвет в RGB записывается как rgb(37, 99, 235) или в современном синтаксисе rgb(37 99 235). Четвёртый параметр, альфа-канал, добавляет прозрачность: rgba(37, 99, 235, 0.5) даёт полупрозрачный синий. Модель RGB аппаратно-зависима: один и тот же набор чисел может выглядеть по-разному на разных мониторах в зависимости от калибровки и цветового профиля. Для веба это решается использованием цветовых пространств вроде sRGB, который стандартизирует отображение.
HEX: RGB для веба
HEX — это не самостоятельная цветовая модель, а способ записи RGB в шестнадцатеричной системе счисления. Каждый канал кодируется двумя символами от 00 до FF. #2563EB раскладывается так: 25 — красный (37 в десятичной), 63 — зелёный (99), EB — синий (235). Перед значением ставится решётка. Если в каждом канале обе цифры одинаковы, запись можно сократить: #FFCC00 превращается в #FC0. Формат HEX — исторически первый способ задания цвета в HTML и до сих пор самый распространённый. Он компактен, легко копируется и вставляется, поддерживается везде без исключений. Минус — непрозрачность для человека: глядя на #7B61FF, трудно сказать, что это светло-фиолетовый. Для быстрой оценки цвета нужен конвертер или визуальный пипеточный инструмент. Палитра цветов онлайн, доступная среди инструментов Vibes, позволяет выбрать цвет визуально и сразу получить его HEX-код.
HSL: цвет, понятный человеку
HSL — Hue, Saturation, Lightness, или тон, насыщенность, светлота. Эта модель описывает цвет так, как его воспринимает человек. Hue — это угол на цветовом круге от 0 до 360 градусов: 0 — красный, 120 — зелёный, 240 — синий. Saturation — насыщенность в процентах: 0 процентов даёт серый оттенок, 100 процентов — максимально чистый цвет. Lightness — светлота: 0 процентов — чёрный, 50 процентов — чистый цвет, 100 процентов — белый. Главное преимущество HSL — лёгкость модификации. Хотите сделать цвет темнее — уменьшаете lightness. Хотите менее насыщенный — снижаете saturation. Хотите комплементарный цвет — добавляете 180 градусов к тону. Эти операции в RGB потребовали бы пересчёта всех трёх каналов. В CSS HSL записывается как hsl(221, 83%, 53%) или hsla(221, 83%, 53%, 0.8) с прозрачностью. Современный синтаксис допускает hsl(221 83% 53% / 0.8). Конвертер цвета HEX в HSL позволяет взять фирменный цвет из брендбука, перевести его в HSL и дальше строить цветовую схему, меняя только lightness и saturation, — это намного быстрее, чем подбирать каждый оттенок в HEX.
HSV: тон, насыщенность, значение
HSV — Hue, Saturation, Value — похожа на HSL, но параметр Value работает иначе. Lightness в HSL смешивает чистый цвет с белым и чёрным, а Value в HSV — только с чёрным. При максимальной value и любой saturation цвет всегда яркий, без примеси белого. Это делает HSV удобнее для задач, где важна яркость: видеообработка, компьютерное зрение, инструменты выбора цвета в графических редакторах. Многие палитры цветов по умолчанию используют HSV-представление. Конвертация между HSL и HSV не сводится к простой замене параметров и требует математических формул, но онлайн-конвертеры делают это мгновенно.
CMYK: цвет для печати
CMYK — Cyan, Magenta, Yellow, Key — субтрактивная модель, используемая в полиграфии. В отличие от RGB, где цвета создаются излучением, в CMYK они создаются наложением красок на бумагу. Каждый канал задаётся в процентах от 0 до 100. Теоретически смесь голубого, пурпурного и жёлтого должна давать чёрный, но на практике получается грязно-коричневый, поэтому добавлен четвёртый канал Key — чёрная краска. Конвертация из RGB в CMYK — сложный процесс, зависящий от цветового профиля устройства, типа бумаги и печатной машины. Простой математический перевод даёт лишь приблизительный результат. Для точной полиграфии используют ICC-профили и специализированное ПО, а онлайн-конвертер даёт бытовую точность, достаточную для прикидки, как цвет будет выглядеть на бумаге.
Как работает конвертер цветов
Конвертер цветов принимает значение в одной модели, вычисляет соответствующие значения в других и отображает результат. Для перевода HEX в RGB алгоритм прост: разрезаем шестизначную строку на три пары и переводим каждую из шестнадцатеричной системы в десятичную. Обратный перевод RGB в HEX: переводим каждое десятичное число в двузначный HEX и объединяем. Перевод RGB в HSL сложнее: сначала нормализуем значения RGB к диапазону 0-1, находим максимум и минимум, вычисляем lightness как среднее, saturation через размах, а hue через соотношение каналов. Перевод HSL обратно в RGB — обратная процедура с вычислением промежуточных значений. Конвертация в CMYK ещё сложнее, но все эти вычисления для пользователя скрыты за простым интерфейсом. Среди 126 инструментов Vibes есть конвертер цвета, который переводит между HEX, RGB и HSL и отображает выбранный цвет визуально. Этого набора достаточно для повседневных задач веб-разработки.
Палитра цветов онлайн: визуальный подбор
Конвертер решает задачу перевода, но откуда взять исходный цвет? Для этого существует палитра цветов, или color picker — визуальный инструмент, где вы двигаете ползунки или кликаете по цветовому полю и видите результат в реальном времени. Палитра обычно использует HSV-представление для выбора: hue задаёт оттенок на цветовой шкале, saturation и value — положение на цветовом квадрате. Результат отображается во всех популярных форматах — HEX, RGB, HSL. Это основной инструмент для подбора цвета, когда нет готового брендбука или макета. Палитра цветов среди утилит Vibes позволяет выбрать цвет и сразу скопировать его код в нужном формате.
Часто задаваемые вопросы
Почему один и тот же цвет выглядит по-разному на разных экранах? Это связано с различиями в цветовых профилях мониторов и их калибровке. Производители по-разному настраивают цветопередачу, и один и тот же RGB-код даёт немного разный оттенок на разных устройствах. Для профессиональной работы с цветом мониторы калибруют с помощью специальных устройств, а в вебе ориентируются на стандартное цветовое пространство sRGB.
Как преобразовать цвет из макета Figma в HEX для кода? Figma по умолчанию показывает цвет в HEX в панели свойств, если выбран заливка или обводка. Можно кликнуть по образцу цвета и скопировать HEX-код из открывшегося окна. Если макет использует RGB, скопируйте значения и вставьте в конвертер цвета — он мгновенно выдаст HEX.
Что означает альфа-канал в цвете? Альфа-канал задаёт прозрачность. Значение 1 — полностью непрозрачный, 0 — полностью прозрачный. В CSS альфа-канал добавляется четвёртым параметром: rgba(37, 99, 235, 0.5) или #2563EB80, где последние две цифры HEX — значение альфа-канала в шестнадцатеричной системе.
В каком формате лучше указывать цвета в CSS? Современная практика — HSL для манипуляций с цветом и HEX для статичных значений. HSL удобен, когда нужно программно менять оттенок или прозрачность через CSS-переменные. HEX — для константных брендовых цветов, которые не меняются. RGB тоже допустим, но менее компактен.
Можно ли перевести цвет из HEX в HSL без потери точности? Да, это обратимое преобразование. HEX — это упакованный RGB, а RGB и HSL математически эквивалентны. При конвертации туда и обратно вы получите те же значения с точностью до округления. Проблемы возникают только при конвертации в CMYK, который имеет другой цветовой охват.
Как подобрать цветовую схему на основе одного цвета? Самый простой метод — перевести базовый цвет в HSL и варьировать lightness для светлых и тёмных вариантов, saturation для приглушённых акцентов и hue для дополнительных цветов. Комплементарный цвет получается добавлением 180 градусов к тону. Триадная схема — три цвета с шагом 120 градусов. Аналоговая — несколько соседних тонов с шагом 15-30 градусов. Имея конвертер цвета, вы быстро получаете коды для всех вариантов.
