Онлайн конвертер цветов RGB, HEX и HSL

Мгновенно конвертируйте цвета между RGB, HEX и HSL. Генерируйте комплементарные цветовые гармонии и анализируйте контрастность по WCAG. 100% на стороне клиента и приватно.

Красный 255
Зеленый 255
Синий 255
#6366F1 Контрастность: 4.6
Компл.
Аналог. 1
Аналог. 2
Триада 1
Триада 2
Студия утилит

Хотите эту утилиту на своём сайте?

Настройте цвета и тёмную тему для WordPress, Notion или вашего сайта.

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

Как работает конвертер цветов RGB в HEX и HSL?

Инструмент принимает значения красного, зеленого и синего (RGB) и использует математические алгоритмы для их преобразования в шестнадцатеричный эквивалент (HEX) или значения тона, насыщенности и светлоты (HSL). Он также работает в обратном порядке.

Почему в своих проектах мне стоит использовать HSL вместо HEX?

Формат HSL гораздо более интуитивно понятен. Он позволяет настраивать насыщенность или светлоту без изменения самого цветового тона, что значительно упрощает создание гармоничных палитр или состояний кнопок (при наведении, отключено).

Что такое значение относительной контрастности?

Это показатель, который указывает на читаемость текста на фоне на основе его яркости. Высокая контрастность гарантирует, что люди с нарушениями зрения смогут прочитать контент в соответствии с рекомендациями по доступности WCAG.

Безопасно ли использовать этот онлайн-конвертер цветов?

Безусловно. Поскольку он на 100% работает на стороне клиента, ваши данные о цвете никогда не покидают ваш компьютер. Вся обработка происходит прямо в вашем браузере, что гарантирует конфиденциальность и мгновенную работу.

# Конвертер цветов RGB в HEX и HSL для разработчиков

В мире frontend-разработки и UI/UX дизайна управление цветом — это постоянная задача. Наш онлайн-конвертер цветов позволяет мгновенно и с математической точностью преобразовывать значения между HEX, RGB и HSL.

# Форматы цветов: HEX, RGB и HSL

  • HEX (шестнадцатеричный): стандарт де-факто для CSS. Компактный и удобный для обмена в коде.
  • RGB (Красный, Зеленый, Синий): на основе аддитивной системы света. Идеально подходит для прямого манипулирования каналами или применения прозрачности с помощью RGBA.
  • HSL (Цветовой тон, Насыщенность, Светлота): самый интуитивно понятный формат. Настраивайте тон, насыщенность и светлоту для создания гармоничных палитр.

# Контрастность и доступность по WCAG

Калькулятор включает измерение относительной контрастности на основе яркости. Это помогает вам соблюдать рекомендации WCAG, гарантируя читаемость вашего текста на выбранном фоне.

# Автоматические цветовые гармонии

  • Комплементарные: противоположный цвет на цветовом круге, идеально подходит для максимального контраста.
  • Аналогичные: соседние цвета, которые создают плавные, гармоничные переходы.
  • Триадические: три равноудаленных цвета для ярких, сбалансированных композиций.

Библиографические ссылки