HEX, RGB, HSL: чем отличаются форматы цветов

Форматы цветов в вебе

В веб-разработке и дизайне цвета задаются несколькими способами. Каждый формат имеет свои плюсы.

HEX (#RRGGBB)

Шестнадцатеричная запись — самый распространённый формат в вебе.

color: #4f46e5;  /* Indigo */
color: #09090b;  /* Almost black */
color: #fff;     /* Сокращённая форма #ffffff */

Плюсы: Краткость, понятность для дизайнеров, поддерживается везде.

RGB (Red, Green, Blue)

Задаёт цвет через интенсивность трёх каналов от 0 до 255.

color: rgb(79, 70, 229);    /* Indigo */
color: rgba(79, 70, 229, 0.5); /* С прозрачностью */

Плюсы: Интуитивно, удобно для программного манипулирования цветом.

HSL (Hue, Saturation, Lightness)

Самый "человеческий" формат: оттенок (°), насыщенность (%), светлота (%).

color: hsl(243, 75%, 59%);        /* Indigo */
color: hsl(243, 75%, 45%);        /* Темнее */
color: hsl(243, 75%, 75%);        /* Светлее */

Плюсы: Легко создавать тональные палитры, изменяя только светлоту.

CMYK (Cyan, Magenta, Yellow, Key/Black)

Используется в полиграфии.

cmyk(66%, 69%, 0%, 10%)  = Indigo

Плюсы: Точное соответствие цветам при печати.

Когда что использовать?

Конвертируйте цвета онлайн с нашим инструментом — HEX, RGB, HSL, CMYK и WCAG-проверка контрастности.