# Форматы цвета: HEX, RGB, HSL, OKLCH и остальные

Один и тот же цвет можно записать десятком способов. Здесь коротко о том, что значит каждый формат, когда его использовать и как один цвет выглядит во всех них.

Источник: https://pickshade.com/ru/color-formats
Обновлено: 2026-09-28

## Один цвет во всех форматах

Все значения ниже описывают один и тот же цвет и считаются прямо на странице. Свой цвет можно проверить в конвертере.

| Формат | Значение |
| --- | --- |
| HEX | #ff5733 |
| RGB | rgb(255 87 51) |
| HSL | hsl(10.59 100% 60%) |
| HWB | hwb(10.59 20% 0%) |
| Lab | lab(61.03 63.55 55.96) |
| LCH | lch(61.03 84.67 41.37) |
| OKLab | oklab(68.036% 0.17474 0.1165) |
| OKLCH | oklch(68.036% 0.21001 33.692) |
| Display P3 | color(display-p3 0.92577 0.38907 0.25797) |
| CMYK | cmyk(0% 66% 80% 0%) |

## 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 | Color(red: 1, green: 0.341, blue: 0.2) |
| UIKit | UIColor(red: 1, green: 0.341, blue: 0.2, alpha: 1) |
| Flutter / Compose | Color(0xFFFF5733) |
| Android XML | #FF5733 |

## Вопросы и ответы

### Какой формат цвета использовать в CSS?

HEX или rgb(), когда нужна максимальная совместимость, и OKLCH для дизайн-токенов, шкал оттенков и цветов широкого охвата. Все актуальные браузеры поддерживают OKLCH.

### Чем HEX отличается от RGB?

По смыслу ничем. HEX записывает каждый канал в шестнадцатеричной системе, rgb() в десятичной. #ff5733 и rgb(255 87 51) это один и тот же цвет.

### Почему в Android другой порядок в коде цвета?

Android и Flutter используют ARGB, поэтому прозрачность идёт первой: 0xFFFF5733 это полностью непрозрачный #ff5733. В восьмизначном HEX в CSS прозрачность стоит последней.

## Инструменты

- [Конвертер цвета во все форматы](https://pickshade.com/ru/convert)
- [Пикер цвета](https://pickshade.com/ru)
- [Именованные цвета по семействам](https://pickshade.com/ru/colors)

## Похожие статьи

- [HEX-коды цветов: как устроен #RRGGBB](https://pickshade.com/ru/hex-color-codes)
- [OKLCH простыми словами: формат цвета, который совпадает с глазом](https://pickshade.com/ru/oklch)
- [CSS color-mix() и относительные цвета: оттенки, hover и прозрачность](https://pickshade.com/ru/css-color-mix)