Конвертер цветов (HEX, RGB, HSL)
Частые вопросы
Есть ли у цветов общепринятые названия?
В спецификации CSS определено около 140 стандартных имён (например, crimson, teal, coral, rebeccapurple, transparent). Вы можете ввести любое из них, и инструмент автоматически переведёт его в точные значения HEX, RGB и HSL.
Как проверить контрастность текста и фона для сайта?
Контрастность текста и фона критична для читаемости и доступности (WCAG): элементы с близкой яркостью плохо различимы на экранах с ярким освещением. При выборе пары «текст и фон» оценивайте разницу по яркости — третий параметр (Lightness) в формате HSL.
Поддерживает ли инструмент прозрачность (альфа-канал)?
Да. При вводе цвета с прозрачностью (например, 8-значный HEX #8f5aff80, rgba(143, 90, 255, 0.5) или hsla(260, 100%, 68%, 0.5)) инструмент рассчитывает форматы HEXA, RGBA и HSLA с сохранением альфа-канала. Базовые поля HEX, RGB и HSL отображают исходный оттенок без прозрачности.
Что значат буквы в HSL?
H — это цветовой тон (Hue) на круге от 0 до 360 градусов. S — насыщенность (Saturation) в процентах. L — светлота (Lightness) в процентах: 0% даёт чёрный, 100% — белый.
Поддерживаются ли форматы CMYK, RAL или Pantone?
Нет. Инструмент сфокусирован на экранном веб-дизайне и CSS-стилях и рассчитывает форматы HEX, RGB и HSL. Полиграфические системы (CMYK) и физические каталоги красок (RAL, Pantone) не поддерживаются.
Один и тот же HEX-код даёт одинаковый цвет на разных устройствах?
Числовой код одинаков, но видимый оттенок зависит от матрицы, калибровки и профиля дисплея — на разных мониторах один и тот же HEX может восприниматься чуть теплее или холоднее.
Инструмент создаёт готовую палитру автоматически?
Форма принимает один цвет и пересчитывает его между форматами для стилей CSS. Чтобы определить цвет прямо с загруженного изображения, используйте пипетку цвета.
Конвертируйте цвета между форматами HEX, RGB, HSL и именованными цветами CSS. Инструмент поддерживает прозрачность (HEXA, RGBA, HSLA) и позволяет мгновенно скопировать готовый код для стилей CSS. Введите значение в поле «Цвет» и нажмите «Конвертировать».
Форматы записи цвета
| Формат | Пример | Где используется |
|---|---|---|
| HEX | #3A7BD5 | CSS, вёрстка сайтов |
| RGB | rgb(58, 123, 213) | CSS, программирование, работа с прозрачностью (RGBA) |
| HSL | hsl(214, 64%, 53%) | Подбор оттенков одного тона по яркости и насыщенности (HSLA) |
Форматы HEX, RGB и HSL описывают экранную цветопередачу и взаимно преобразуются с сохранением исходных оттенков. Для цветов с альфа-каналом (прозрачностью) инструмент рассчитывает точные значения HEXA, RGBA и HSLA. Поля HEX, RGB и HSL отображают базовый цвет без учёта прозрачности.
Как подобрать сочетание цветов
Введённый цвет – это отправная точка, а не готовая палитра. Классический подход к сочетаниям строится на цветовом круге:
- Монохромное сочетание – один тон, разная яркость и насыщенность. В формате HSL для этого достаточно менять только второе и третье значение, оставляя первое (оттенок) неизменным.
- Контрастное сочетание – цвета с противоположных сторон круга, для акцентов и высокой заметности.
- Аналоговое сочетание – соседние на круге цвета, для спокойной и однородной палитры.
Смежный инструмент
Если исходный цвет нужно не ввести вручную, а определить с готового изображения или скриншота, используйте пипетку цвета – она выдаёт HEX, RGB и HSL сразу по клику на пиксель.