Форматы цвета: HEX, RGB, HSL, OKLCH и остальные
Один и тот же цвет можно записать десятком способов. Здесь коротко о том, что значит каждый формат, когда его использовать и как один цвет выглядит во всех них.
Один цвет во всех форматах
Все значения ниже описывают один и тот же цвет и считаются прямо на странице. Свой цвет можно проверить в конвертере.
| Формат | Значение |
|---|---|
| HEX | |
| RGB | |
| HSL | |
| HWB | |
| Lab | |
| LCH | |
| OKLab | |
| OKLCH | |
| Display P3 | |
| CMYK |
HEX и RGB
HEX записывает красный, зелёный и синий двумя шестнадцатеричными цифрами каждый, от 00 до ff. Трёхзначный HEX это сокращение, где каждая цифра удваивается, а восемь цифр добавляют прозрачность. rgb() записывает те же каналы числами от 0 до 255. Оба формата описывают sRGB и подходят, когда важна максимальная совместимость.
HSL и HWB
HSL описывает тон, насыщенность и светлоту, HWB описывает тон, долю белого и долю чёрного. Их легко читать, но светлота в них не совпадает с восприятием, поэтому одинаковые числа у разных тонов выглядят по-разному.
LAB, LCH, OKLAB и OKLCH
Эти форматы построены вокруг человеческого зрения. LAB и LCH происходят из CIELAB. OKLAB и OKLCH это современная доработка с более стабильным тоном, особенно у синих. Используйте OKLCH для дизайн-систем, шкал оттенков и везде, где светлота должна быть ровной.
CMYK
CMYK описывает голубую, пурпурную, жёлтую и чёрную краску. Здесь показан простой перевод без привязки к устройству. Реальный результат печати зависит от бумаги, красок и профиля принтера, поэтому считайте его отправной точкой и запросите профиль у типографии.
Swift, Flutter и Android
У мобильных платформ свой синтаксис. SwiftUI и UIKit принимают красный, зелёный и синий числами от 0 до 1. Flutter и Android принимают 32-битное число ARGB, где первые две шестнадцатеричные цифры это прозрачность.
| Формат | Значение |
|---|---|
| SwiftUI | |
| UIKit | |
| Flutter / Compose | |
| Android XML |
Вопросы и ответы
Какой формат цвета использовать в CSS?
HEX или rgb(), когда нужна максимальная совместимость, и OKLCH для дизайн-токенов, шкал оттенков и цветов широкого охвата. Все актуальные браузеры поддерживают OKLCH.
Чем HEX отличается от RGB?
По смыслу ничем. HEX записывает каждый канал в шестнадцатеричной системе, rgb() в десятичной. #ff5733 и rgb(255 87 51) это один и тот же цвет.
Почему в Android другой порядок в коде цвета?
Android и Flutter используют ARGB, поэтому прозрачность идёт первой: 0xFFFF5733 это полностью непрозрачный #ff5733. В восьмизначном HEX в CSS прозрачность стоит последней.