Как преобразовать цвета между HEX, RGB, HSL и другими форматами
Преобразуйте цвет между HEX, RGB, HSL, CMYK и другими форматами, узнайте, какие преобразования точны, и выберите подходящий формат.
2 мин чтения
Чтобы преобразовать цвет, вставьте его в конвертер цветов. Выберите нужный формат в поле «Целевой формат» и скопируйте результат. Инструмент сам определит формат исходного значения: подойдут #ff6600, rgb(255, 102, 0), orangered и даже 255, 102, 0. Результат появится по мере ввода. Образец цвета под результатом поможет убедиться, что инструмент распознал нужный цвет.
Один цвет в четырёх форматах
HEX, RGB, HSL и CMYK — это разные способы записать один и тот же цвет. Вот пример оранжевого цвета во всех четырёх форматах:
| Формат | Значение | Что означают числа |
|---|---|---|
| HEX | #ff6600 |
Красный, зелёный и синий — по две шестнадцатеричные цифры |
| RGB | rgb(255, 102, 0) |
Красный, зелёный и синий в диапазоне от 0 до 255 |
| HSL | hsl(24, 100%, 50%) |
Тон на цветовом круге, насыщенность и светлота |
| CMYK | cmyk(0%, 60%, 100%, 0%) |
Голубая, пурпурная, жёлтая и чёрная краски |
В HEX и RGB используются одни и те же три числа, только записаны они по-разному. Преобразование между этими форматами точное. HSL удобнее корректировать вручную: увеличьте значение светлоты, и цвет станет светлее.
Чем отличается CMYK
CMYK используют для печати, а точные значения зависят от принтера, бумаги и краски. Конвертер применяет стандартную формулу без профиля принтера, поэтому типография может выдать немного другие значения для того же цвета. Используйте результат CMYK для макетов, а перед основной печатью попросите типографию сделать пробный оттиск.
Какой формат выбрать
- CSS и HTML: используйте HEX. Он короткий, и его понимает любой браузер.
- Цветовая тема: используйте HSL. Чтобы получить более светлый или тёмный оттенок, достаточно изменить одно число.
- Прозрачность в коде: используйте RGB со значением альфа-канала или HEX из восьми цифр.
rgba(37, 99, 235, 0.5)преобразуется в#2563eb80, где последние две цифры обозначают непрозрачность. - Макеты для печати: используйте CMYK и учитывайте примечание выше.
Названия цветов не всегда точны
Конвертер поддерживает 17 форматов, включая OKLCH, LAB, HSV, названия цветов CSS и терминальные коды ANSI. В результате отображается ближайшее название цвета CSS, а не точное совпадение. Для #ff6600 результатом будет orangered, но настоящий цвет orangered — это #ff4500. Используйте названия для быстрых пометок, а для фирменных цветов — точные значения.
Вставьте цвет, проверьте образец и скопируйте результат. Вот и весь процесс.
Готовы попробовать сами?
Конвертер цвета
Конвертируйте цвета между HEX, RGB, HSL, HSV, HWB, CMYK, LAB, LCH, OKLab, OKLCH, XYZ, названиями цветов CSS, кодами ANSI для терминала и другими форматами, с автоопределением формата и предпросмотром.