Онлайн генератор цвета — получи HEX, RGB, HSL, CMYK коды | Бесплатный конвертер

HEX
#000000
RGB
rgb(0, 0, 0)
HSL
hsl(0, 0%, 0%)
CMYK
cmyk(0%, 0%, 0%, 100%)

Онлайн генератор цвета, выбери один цвет на круге и получи в результате разные кодировки цвета

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

Это устраняет необходимость в ручных расчетах. Гарантирует точность значений для веб-дизайна, полиграфии и разработки ПО.

Как использовать генератор цветов

Инструмент интуитивно понятен. Работа с ним состоит из одного действия:

  • Выберите цвет. Кликните на поле выбора цвета (цветовой круг) в левой части интерфейса.
  • Получите результат. Все коды (HEX, RGB, HSL, CMYK) обновятся автоматически в реальном времени.
  • Скопируйте нужный код. Нажмите кнопку «Копировать» рядом с любым значением, чтобы использовать его в вашем проекте.

Для инженеров и разработчиков критически важна точность и понимание принципов преобразования.

Содержание

Математика преобразования цветовых моделей

Основой для всех расчетов служит значение HEX (шестнадцатеричный код цвета). От него происходят преобразования в другие модели.

Преобразование HEX → RGB

Код HEX вида #RRGGBB разделяется на три компонента. Они конвертируются из шестнадцатеричной системы в десятичную.

Формула: R = parseInt(RR, 16), G = parseInt(GG, 16), B = parseInt(BB, 16)

Где RR, GG, BB — пары символов в диапазоне от 00 до FF (0 до 255 в десятичной системе).

Преобразование RGB → HSL

Это наиболее сложное преобразование. Основано на нормализации компонентов R, G, B к диапазону [0, 1].

R' = R / 255, G' = G / 255, B' = B / 255
Cmax = max(R', G', B'), Cmin = min(R', G', B')
Δ = Cmax - Cmin

Расчет тона (Hue, H):

Если Δ = 0, то H = 0.
Иначе:
    Если Cmax = R': H = 60 * (((G' - B') / Δ) mod 6)
    Если Cmax = G': H = 60 * (((B' - R') / Δ) + 2)
    Если Cmax = B': H = 60 * (((R' - G') / Δ) + 4)

Значение H приводится к диапазону 0–360 градусов.

Расчет насыщенности (Saturation, S):

Если Cmax = 0, то S = 0.
Иначе: S = (Δ / Cmax) * 100%

Расчет светлоты (Lightness, L):

L = ((Cmax + Cmin) / 2) * 100%

Преобразование RGB → CMYK

Модель CMYK используется в полиграфии. Расчет требует нормализованных значений RGB.

R' = R / 255, G' = G / 255, B' = B / 255
K = 1 - max(R', G', B')

Если K = 1 (черный цвет): C = 0, M = 0, Y = 0

Иначе:

C = (1 - R' - K) / (1 - K)
M = (1 - G' - K) / (1 - K)
Y = (1 - B' - K) / (1 - K)

Итоговые значения C, M, Y, K выражаются в процентах.

Практические примеры (Case Studies)

Пример 1: Корпоративный синий цвет для веб-сайта

Задача: Получить все коды фирменного синего цвета для передачи разработчику (веб) и дизайнеру (печать).

Действие: В палитре выбирается цвет, близкий к #1E88E5.

Результат генератора:

  • HEX: #1E88E5
  • RGB: rgb(30, 136, 229)
  • HSL: hsl(209, 79%, 51%)
  • CMYK: cmyk(87%, 41%, 0%, 10%)

Применение: Значение HEX/RGB используется в CSS-стилях. Значение HSL позволяет программно генерировать более светлые/темные оттенки. Значение CMYK отправляется в типографию.

Пример 2: Проверка доступности (Accessibility) текста

Задача: Убедиться, что серый цвет текста (#71717A) имеет достаточный контраст на белом фоне.

Действие: В палитре выбирается цвет #71717A.

Результат генератора:

  • HEX: #71717A
  • RGB: rgb(113, 113, 122)
  • HSL: hsl(240, 4%, 46%)
  • CMYK: cmyk(7%, 7%, 0%, 52%)

Применение: Значение L=46% из модели HSL подставляется в формулу коэффициента контрастности. Это позволяет объективно оценить читаемость.

Сравнение цветовых моделей (Таблица)

Модель (Кодировка) Компоненты Диапазон значений Основное применение Ключевая особенность
HEX Красный, Зеленый, Синий 00 до FF (16-ричн.) Веб-разработка, CSS Компактная запись для RGB, стандарт де-факто в вебе.
RGB Красный (Red), Зеленый (Green), Синий (Blue) 0 до 255 (10-ичн.) Веб, дисплеи, графические редакторы Аддитивная модель, основанная на излучении света.
HSL Тон (Hue), Насыщенность (Saturation), Светлота (Lightness) H: 0°-360°, S/L: 0%-100% Веб-дизайн, UI/UX, программная обработка Интуитивна для человека, легко создавать палитры.
CMYK Голубой, Пурпурный, Желтый, Черный (Key) 0% до 100% Полиграфия, профессиональная печать Субтрактивная модель, основанная на поглощении света.

Часто задаваемые вопросы (FAQ)

Почему значения CMYK могут отличаться в разных графических редакторах?

Калькулятор выполняет прямое математическое преобразование из RGB. Профессиональные графические пакеты используют сложные цветовые профили (ICC-профили). Они учитывают характеристики конкретного печатного оборудования. Это может скорректировать итоговые проценты. Наши значения являются точной математической базой.

Какой формат лучше использовать для веб-разработки?

HEX — стандарт для статических цветов в CSS. RGB и RGBA необходимы, когда требуется прозрачность (альфа-канал). HSL набирает популярность благодаря удобству создания производных цветов.

В чем практическая польза значения HSL?

Модель HSL идеальна для программируемого изменения цвета. Например, для создания hover-эффекта можно оставить тон (H) и насыщенность (S) неизменными. При этом изменяется только светлота (L). Это гарантирует визуальную согласованность интерфейса.

Можно ли сгенерировать Pantone по этому коду?

Нет. Pantone (PMS) — это стандартизированная библиотека смесевых цветов. Она не выводится математически из HEX/RGB. Для подбора ближайшего Pantone необходимы физические вееры или специализированное ПО.

Значения RGB обновляются в реальном времени. Это точно?

Да. Калькулятор выполняет все вычисления локально в вашем браузере по приведенным алгоритмам. Это обеспечивает мгновенный результат. Не требует отправки данных на сервер, что гарантирует конфиденциальность и скорость работы.

➤