0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0
Настройка
Преобразуйте цвета между всеми форматами: HEX, RGB, HSL, HWB, HSV, LAB, LCH, OKLab, OKLCh, XYZ D50/D65, Display P3, A98, ProPhoto, Rec. 2020 и CMYK. Включает интерактивный визуальный селектор.
#3b82f6
HEX, rgb(), hsl(), oklch(), color(), etc.
Результаты
Основное
#RRGGBB
#RRGGBBAA
rgb(r g b)
CSS уровень 3
hsl(h s% l%)
CSS уровень 4
hwb(h w% b%)
lab(l a b)
lch(l c h)
oklab(l a b)
oklch(l c h)
color(xyz-d50 x y z)
color(xyz-d65 x y z)
color()
color(display-p3 r g b)
color(a98-rgb r g b)
color(prophoto-rgb r g b)
color(rec2020 r g b)
Другое
hsv(h s% v%)
Печать
cmyk(c% m% y% k%)

Как это работает

Один и тот же цвет можно записать по-разному. HEX (#RRGGBB) и RGB описывают смесь красного, зелёного и синего; HSL и HSV описывают его через тон, насыщенность и светлоту, что удобнее для выбора вариантов; а CMYK предназначен для печати.

Этот инструмент берёт цвет в HEX, RGB или HSL и мгновенно переводит его во все форматы, включая современные пространства CSS Level 4, такие как HWB, LAB, LCH, OKLab, OKLCh, и функции color() (Display P3, Rec. 2020, ProPhoto).

Визуальный выбор и числовые регуляторы позволяют настраивать цвет и видеть, как все значения меняются одновременно. Всё вычисляется в вашем браузере.

Примеры

#ff0000rgb(255 0 0) · hsl(0 100% 50%) · cmyk(0% 100% 100% 0%)Чистый красный: максимум в красном канале, ноль в зелёном и синем.
#3b82f6rgb(59 130 246)Каждая пара шестнадцатеричных цифр (3b, 82, f6) — это значение 0-255 канала: 59, 130 и 246.
#ffffffrgb(255 255 255) · hsl(0 0% 100%)Белый имеет все три канала на максимуме; в HSL светлота 100 %.

Сценарии использования

  • Преобразовать HEX-цвет из дизайн-гайда в формат RGB или HSL, который требуется вашему CSS или фреймворку.
  • Получить CMYK-эквивалент экранного цвета для подготовки печатного материала.
  • Изучать современные цветовые пространства (OKLCh, Display P3) при настройке палитры с широким охватом.

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

Что такое альфа-канал и как он записывается в HEX?

Альфа — это непрозрачность, от 0 (прозрачный) до 100 %. В HEX она добавляется парой цифр в конце: #RRGGBBAA. Например, #ff000080 — это красный с непрозрачностью 50 %.

В чём разница между HSL и HSV?

Оба используют тон и насыщенность, но третья ось различается: HSL использует светлоту (где 100% — белый), а HSV — значение или яркость (где 100% — самый насыщенный цвет). HSL обычно удобнее для создания оттенков и теней.

Зачем существуют OKLab и OKLCh?

Это перцептивно однородные пространства: одинаковые расстояния между значениями соответствуют похожим визуальным различиям. Они дают более естественные градиенты и настройки светлоты, чем HSL, и CSS поддерживает их начиная с Level 4.

Точен ли отображаемый CMYK для печати?

Это приблизительное справочное преобразование. Реальный результат печати зависит от цветового профиля, чернил и бумаги, поэтому для профессиональной работы лучше использовать ICC-профиль типографии.

См. также