Конвертер цветов

Введите hex-код цвета, чтобы увидеть его эквиваленты в RGB и HSL со значениями каналов красного, зеленого и синего.

Введите 6-значный hex-код без символа # (например, FF6B35).

Цвет

#FF6B35

RGBrgb(255, 107, 53)
HSLhsl(16, 100%, 60%)
Красный канал255
Зеленый канал107
Синий канал53
Формула Формула Допущения 2 Пример Пример Последнее обновление 11 мар. 2026 г.
Введенные данные остаются в браузере, если только будущие функции явно не сообщат об обратном. Используйте это как оценку и подтверждайте важные решения у квалифицированного специалиста.

Как использовать этот конвертер цветов

  1. Введите HEX-код цвета

    Введите 6-значный HEX-код в поле (например, FF6B35 или 00FF88). Символ # указывать не нужно.

  2. Проверьте значения RGB

    Результаты для каналов Red (красный), Green (зеленый) и Blue (синий) показывают значения от 0 до 255 для каждого компонента.

  3. Посмотрите результат в HSL

    Ознакомьтесь с результатом HSL: тон (0–360°), насыщенность и яркость — это удобно для корректировки цвета.

Методология

Как работает этот конвертер цветов

Этот инструмент преобразует шестнадцатеричный код цвета в форматы RGB (красный, зеленый, синий) и HSL (тон, насыщенность, светлота). Каждая пара hex-символов соответствует 8-битному значению канала (0–255), а преобразование в HSL использует стандартные математические формулы цветового пространства.

Формула
R = hex[0:2] → десятичное; G = hex[2:4] → десятичное; B = hex[4:6] → десятичное
HEX 6-символьная строка шестнадцатеричных цифр, представляющая RGB
HSL Тон (0–360°), Насыщенность (0–100%), Светлота (0–100%)
Пример

Hex #FF6B35 → RGB(255, 107, 53) → HSL(16, 100%, 60%).

Hex 000000 → RGB(0, 0, 0) → HSL(0, 0%, 0%) — чистый черный.

Hex FFFFFF → RGB(255, 255, 255) → HSL(0, 0%, 100%) — чистый белый. Hex 808080 → RGB(128, 128, 128) → HSL(0, 0%, 50%) — средне-серый.

Допущения
  • ✓ Введенное значение является корректным 6-значным hex-кодом цвета.
  • ✓ Альфа-канал не поддерживается в этой версии.
Примечания
  • Преобразование в CMYK требует цветового профиля и не включено в этот инструмент.

Понимание цветовых моделей

HEX, RGB и HSL — это разные способы описания одного и того же цвета. HEX кодирует RGB в виде 6-значной шестнадцатеричной строки: каждая пара символов соответствует одному 8-битному каналу (0–255). RGB выражает те же значения тремя числами — аддитивными основными цветами, которые излучают экраны. HSL (Hue, Saturation, Lightness) — это цилиндрическая модель: тон (hue) — это угол на цветовом круге (0° — красный, 120° — зеленый, 240° — синий), насыщенность (saturation) — интенсивность цвета, а яркость (lightness) — его светлота. Дизайнеры часто предпочитают HSL при программной настройке цветов: изменение только яркости позволяет затемнить или осветлить цвет без изменения тона, а регулировка насыщенности меняет его сочность.

Сценарии использования конвертации цветов для разработчиков

Разработчики конвертируют цвета при создании дизайн-систем, реализации тем, генерации цветовых палитр и отладке CSS. Дизайн-токены часто хранят цвета в формате HEX; преобразование в RGB или HSL позволяет выполнять вычисления в реальном времени, такие как наложение прозрачности или проверка контрастности для доступности. Переключателям тем может потребоваться создание более светлых или темных вариантов базового цвета с помощью HSL. Автоматизированные инструменты доступности конвертируют цвета для расчета яркости и коэффициентов контрастности. При отладке макета или ошибок в темах просмотр HEX-значения в формате RGB или HSL помогает определить, какой канал настроен неверно. Конвертация цветов также используется в визуализации данных, библиотеках графиков и динамическом оформлении интерфейсов.

Часто задаваемые вопросы

Можно ли ввести 3-значный hex-код?

В данный момент инструмент ожидает 6-значный код. Для 3-значных сокращений, таких как F60, сначала разверните их до FF6600.

Что такое HSL?

HSL означает Hue (тон), Saturation (насыщенность), Lightness (светлота). Это альтернативный способ описания цветов, который некоторые дизайнеры считают более интуитивным, чем RGB.

Автор Ян Крженек Основатель и ведущий разработчик
Проверено Обзор методологии DigitSum Проверка формул и контроль качества
Последнее обновление 11 мар. 2026 г.

Используйте это как оценку и подтверждайте важные решения у квалифицированного специалиста.

Введенные данные остаются в браузере, если только будущие функции явно не сообщат об обратном.