Как это работает
RGB — как цвет хранит экран: доли красного (R), зелёного (G) и синего (B), каждая от 0 до 255. Удобно компьютеру, но неудобно человеку: по числам 30, 111, 217 трудно понять, что это за цвет и как сделать его «чуть светлее».
HSV (в Photoshop — HSB) описывает цвет так, как мы о нём думаем: H (hue, тон) — угол на цветовом круге 0–360° (0° красный, 120° зелёный, 240° синий); S (saturation, насыщенность) — от серого 0% до чистого цвета 100%; V (value, яркость) — от чёрного 0% до максимальной яркости 100%.
HSL похож на HSV, но вместо яркости — L (lightness, светлота): 0% — чёрный, 50% — чистый цвет, 100% — белый. Его понимает CSS: hsl(214, 76%, 48%).
HEX — те же три числа RGB в шестнадцатеричном виде: #1e6fd9 = 0x1e, 0x6f, 0xd9. Короткая запись #rgb удваивает каждую цифру: #f80 = #ff8800.
Меняйте любое поле — остальные пересчитываются сразу. Значения H/S/V/L хранятся с точностью 0,1, поэтому RGB → HSV → RGB возвращает исходный цвет без потерь.
Формула RGB → HSV (R, G, B делим на 255):
max = max(R, G, B), min = min(R, G, B), d = max − min
V = max
S = max = 0 ? 0 : d / max
H = 60° × ((G − B) / d mod 6), если max = R
H = 60° × ((B − R) / d + 2), если max = G
H = 60° × ((R − G) / d + 4), если max = B
(при d = 0 тон не определён, H = 0)
Где применяется
- Подбор палитры — оттенки одного тона получаются сменой S и V/L; соседние и контрастные цвета — поворотом H на 30°, 120°, 180°.
- Состояния интерфейса — цвет при наведении (hover) чуть темнее, неактивный (disabled) — менее насыщенный: в HSL это одно число, а не три.
- Палитры Photoshop, Figma, GIMP — квадрат с ползунком тона это и есть HSV/HSB; конвертер помогает перенести значения в код.
- Компьютерное зрение — в OpenCV цветовую сегментацию (найти все красные/зелёные объекты) делают в HSV, потому что тон мало зависит от освещения. Внимание: в OpenCV H = 0–179 (градусы делённые на 2), S и V = 0–255 — значения показаны под формой.
- LED-ленты и RGB-подсветка — эффекты «радуги» и плавной смены цвета проще крутить по H, а на контроллер отдавать RGB.
- Игры и шейдеры — сдвиг тона, тонирование, цветокоррекция делаются через HSV.
- CSS —
hsl()удобен для тем и переменных: меняете только светлоту и получаете светлую и тёмную версии.