Генератор и Конвертер Кода Цвета

Выберите цвет или введите HEX-код — мгновенно получите HEX, RGB, HSL, CSS-название и дополнительный цвет.

Мгновенный результат Работает в браузере
HEX-код
#3D7EF7
Значение RGB
rgb(61, 126, 247)
Значение HSL
hsl(218, 91%, 60%)
Название CSS
—
Дополнительный цвет
#F7823D

Цветовые модели

HEX  → #RRGGBB
RGB  → 0–255 per ch.
HSL  → 0–360° / 0–100%
WCAG → min 4.5:1

HEX: веб-стандарт. RGB: экранная модель. HSL: тон-насыщенность-яркость, интуитивно для дизайнеров.

Как использовать?

  1. 1
    Выбрать цветНажать на палитру или ввести HEX-код напрямую (например, #FF5733).
  2. 2
    Посмотреть значенияHEX, RGB и HSL вычисляются мгновенно; CSS-название и дополнительный цвет отображаются автоматически.
  3. 3
    СкопироватьСкопировать нужный код цвета в буфер обмена одним кликом.

Частые вопросы

Что такое HEX-код цвета?
Шестизначное шестнадцатеричное значение в формате #RRGGBB. Каждая пара обозначает интенсивность канала (Красный, Зелёный, Синий) от 00 до FF (0–255), что позволяет представить 16 777 216 цветов.
RGB или HSL — что использовать?
RGB соответствует аппаратному обеспечению экрана и широко используется в CSS. HSL интуитивнее для дизайнеров: изменить яркость без потери тона. Оба формата полностью поддерживаются в современном CSS.
Для чего нужен дополнительный цвет?
Дополнительный цвет находится напротив на цветовом круге (180°) и создаёт максимальный контраст — идеален для кнопок призыва к действию и визуализации данных.

Коды цветов в вебе: HEX, RGB и HSL

В веб-разработке цвета определяются преимущественно тремя форматами: HEX, RGB и HSL. Этот инструмент мгновенно конвертирует любой цвет во все три формата, а также показывает CSS-название и дополнительный цвет.

HEX-коды цветов

HEX — наиболее распространённый формат цвета в вебе. Записывается как #RRGGBB, где каждая пара указывает интенсивность канала (Красный, Зелёный, Синий) от 00 до FF (0–255). При 256 значениях на канал HEX поддерживает 16 777 216 цветов. Сокращённая запись #RGB также допустима: #F06 → #FF0066.

Цветовая модель RGB

RGB отражает физическую структуру экранов. Каждый канал принимает значения от 0 до 255. В CSS: rgb(255, 87, 51) или с прозрачностью rgba(255, 87, 51, 0.8).

Цветовая модель HSL

HSL (Тон-Насыщенность-Яркость) интуитивнее для дизайнеров. Тон: 0–360° на цветовом круге. Насыщенность: 0%=серый, 100%=яркий цвет. Яркость: 0%=чёрный, 50%=нормальный, 100%=белый. Создавать светлые и тёмные варианты цвета просто: сохранять тон и насыщенность, менять яркость.

Дополнительные цвета

Дополнительные цвета находятся на 180° друг от друга на цветовом круге: Красный ↔ Голубой, Зелёный ↔ Пурпурный, Синий ↔ Жёлтый. Они создают максимальный контраст для кнопок CTA и визуализации данных.

Веб-доступность (WCAG)

Около 8% мужчин страдают цветовой слепотой. WCAG 2.1 AA требует коэффициент контрастности не менее 4,5:1 для обычного текста. Никогда не передавайте информацию только через цвет.

Именованные цвета CSS

CSS определяет 148 именованных цветов (red, navy, coral, teal и др.). Инструмент распознаёт их автоматически и показывает название.

Конфиденциальность

Все вычисления выполняются локально в браузере. Никакие данные не передаются на серверы.

Комментарии