Цвета HEX, RGB и HSL: в чём разница
Один и тот же цвет можно записать тремя способами. Объясняем, что значат цифры, как переводить вручную и какой формат удобнее для какой задачи.
RGB: смесь трёх лучей
Экран смешивает красный, зелёный и синий свет. В записи rgb(109, 63, 216) каждое число от 0 до 255 показывает яркость своего луча: 0 значит выключен, 255 значит на полную. rgb(0, 0, 0) чёрный, rgb(255, 255, 255) белый.
HEX: те же числа, короче
#6d3fd8 это те же три числа в шестнадцатеричной записи, по две цифры на канал: 6d, 3f, d8. Чтобы перевести пару в обычное число, умножьте первую цифру на 16 и прибавьте вторую (буквы a–f значат 10–15): 6d = 6×16 + 13 = 109, 3f = 3×16 + 15 = 63, d8 = 13×16 + 8 = 216. Короткая запись #fc0 значит #ffcc00.
HSL: как думает человек
hsl(258, 66%, 55%) описывает цвет понятнее:
- H, тон: угол на цветовом круге от 0 до 360 (0 красный, 120 зелёный, 240 синий).
- S, насыщенность: 0% серый, 100% самый яркий.
- L, светлота: 0% чёрный, 50% чистый цвет, 100% белый.
HSL удобен, когда нужен светлый фон или тёмный текст того же оттенка: меняете только последнее число.
Прозрачность
Четвёртое значение задаёт непрозрачность: rgb(109 63 216 / 0.5), hsl(258 66% 55% / 50%) или восьмизначный HEX #6d3fd880 (80 в шестнадцатеричной записи это 128, половина от 255).
Что выбрать
- HEX: обмениваться цветами, вставлять в графические редакторы и конструкторы сайтов.
- HSL: строить оттенки одного цвета и тёмную тему в CSS.
- RGB: когда нужна прозрачность или цвет считается программой.
Все три записи для каждого цвета показывают страницы палитр, например «Деловой синий». Нажмите на цвет, и код скопируется.
Частые вопросы
Как перевести HEX в RGB?
Разбейте код на три пары и переведите каждую из шестнадцатеричной системы: первая цифра умножается на 16, вторая прибавляется. #6d3fd8 это rgb(109, 63, 216).
Что означает HSL?
Тон (угол на цветовом круге от 0 до 360), насыщенность и светлота в процентах. В HSL удобно делать светлые и тёмные варианты одного цвета.
Как задать прозрачность цвета?
Четвёртым значением: rgb(109 63 216 / 0.5), hsl(258 66% 55% / 50%) или восьмизначным HEX, например #6d3fd880.
