Конвертер цветов (HEX/RGB/HSL)
Конвертируйте цвета между форматами HEX, RGB и HSL. Включает визуальный выбор цвета и предпросмотр.
Как использовать
- Введите значение цвета в любом формате (HEX, RGB или HSL)
- Мгновенно просматривайте преобразованные значения во всех других форматах
- Используйте палитру цветов для визуального выбора цвета
- Копируйте любой формат кнопкой «Копировать»
Часто задаваемые вопросы
-
В чём разница между HEX, RGB и HSL?
HEX использует шестнадцатеричную нотацию (#FF5733). RGB определяет цвета по значениям Красного, Зелёного и Синего (0-255). HSL определяет цвета по Оттенку (0-360), Насыщенности (0-100%) и Светлоте (0-100%).
-
Какой формат цвета использовать в CSS?
Все три формата допустимы в CSS. HEX наиболее компактен, RGB интуитивен для смешивания цветов, а HSL лучше всего подходит для создания вариаций цвета путём изменения светлоты или насыщенности.
-
Поддерживается ли альфа/прозрачность?
Текущая версия конвертирует непрозрачные цвета. Поддержка альфа-каналов (RGBA, HSLA, 8-значный HEX) запланирована в будущем обновлении.
-
Можно ли использовать палитру цветов на мобильном устройстве?
Да, поле выбора цвета использует нативную палитру на всех устройствах, включая мобильные браузеры.
Цветовые модели в веб-разработке
Цвет в вебе можно описать несколькими математическими моделями. Каждая из них подходит для разных задач, и умение переключаться между ними — важный навык дизайнера и фронтенд-разработчика.
Формат HEX
HEX-запись (#RRGGBB) — это шестнадцатеричное представление трёх цветовых каналов: красного (R), зелёного (G) и синего (B). Каждый канал кодируется двумя шестнадцатеричными цифрами от 00 до FF, что соответствует десятичному диапазону 0–255.
Примеры:
#FF0000— чистый красный#00FF00— чистый зелёный#FFFFFF— белый#000000— чёрный
Сокращённая запись #RGB (например, #F0A) эквивалентна #FF00AA — каждая цифра удваивается.
HEX — наиболее распространённый формат в CSS и дизайн-инструментах (Figma, Sketch, Adobe XD). Он компактен и легко копируется из любого редактора.
Формат RGB
RGB (Red, Green, Blue) задаёт цвет тремя числами от 0 до 255. В CSS: rgb(255, 87, 51). Формат RGBA добавляет четвёртый параметр — прозрачность (альфа-канал) от 0.0 до 1.0: rgba(255, 87, 51, 0.5).
RGB хорошо подходит для:
- программного смешивания цветов (линейная интерполяция)
- анимации перехода между двумя цветами
- работы с пиксельными данными Canvas или WebGL
Однако для подбора «светлее/темнее» или «насыщеннее» RGB неудобен — изменение одного канала сложно предсказать визуально.
Формат HSL
HSL (Hue, Saturation, Lightness) — цилиндрическая модель, более близкая к тому, как человек воспринимает цвет:
- Оттенок (Hue): угол от 0° до 360° на цветовом колесе. 0° и 360° — красный, 120° — зелёный, 240° — синий.
- Насыщенность (Saturation): 0% — серый, 100% — чистый цвет.
- Светлота (Lightness): 0% — чёрный, 50% — нормальный цвет, 100% — белый.
В CSS: hsl(9, 100%, 60%).
Когда HSL особенно удобен
HSL незаменим при создании цветовых схем и вариаций:
- Чтобы получить более светлый вариант цвета, просто увеличьте Lightness
- Для пастельных оттенков уменьшите Saturation
- Для аналогичных цветов сдвиньте Hue на ±30°
Дизайнеры, использующие CSS-переменные, часто хранят цвета именно в HSL для удобного создания тем оформления.
Сравнение форматов
| Формат | Запись | Лучше всего подходит для |
|---|---|---|
| HEX | #FF5733 |
Копирование из дизайна в код |
| RGB | rgb(255, 87, 51) |
Программная работа с цветами |
| HSL | hsl(9, 100%, 60%) |
Дизайн-системы, темы, вариации |
Цветовой охват и ограничения
Все три формата — HEX, RGB и HSL — описывают одно и то же пространство sRGB: 16 777 216 цветов. Современные дисплеи широкого цветового охвата (Display P3, Rec. 2020) выходят за эти рамки, и CSS Color Level 4 вводит новые функции (color(), oklch(), lab()) для работы с расширенными цветовыми пространствами. Тем не менее sRGB остаётся стандартом для подавляющего большинства веб-проектов.
Доступность и контрастность
При выборе цветов важно учитывать контрастность текста и фона. Стандарт WCAG 2.1 требует минимального соотношения контрастности 4.5:1 для обычного текста и 3:1 для крупного. HSL-формат удобен для проверки контраста: оценить светлоту цвета можно визуально по параметру Lightness.