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

Преобразование цветов между HEX, Форматы RGB и HSL

Выберите цвет

Или введите значения ниже

HEX

RGB

HSL

Общие сведения Цветовые форматы

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

#️⃣ HEX (шестнадцатеричный)

Формат: #RRGGBB (6 символов) или #RGB (сокращение из 3 символов)
Пример: #2563EB или #F00 (красный)
Лучше всего подходит для: CSS, атрибутов HTML, инструментов дизайна. Самый компактный формат для веб-разработка.

🔴🟢🔵 RGB (красный, зеленый, синий)

Формат: rgb(R, G, B) , где каждое значение составляет 0–255
Пример: rgb(37, 99, 235)
Лучше всего подходит для: Функции CSS, манипулирование цветом JavaScript, программирование генерация цвета. Легко понять, как легкое смешивание.

🌈 HSL (Оттенок, Насыщенность, Яркость)

Формат: hsl(H, S%, L%) где H — 0–360°, S и L — 0–100 %
Пример: hsl(221, 83%, 53%)
Лучше всего подходит для: Создание цветовых схем, настройка яркости/насыщенности. Большинство интуитивно понятен человеческому восприятию.

Общие случаи использования

Стилизация CSS: Преобразование между форматами для различных свойств CSS и совместимости с браузерами
Передача дизайна: Перевести цвета из инструменты проектирования (часто HEX) в удобные для кода форматы
Цветовые схемы: Используйте HSL для создания варианты (регулировка яркости для состояний наведения)
Доступность: Рассчитать контраст соотношения с использованием значений RGB
Рекомендации по бренду: Цвета документа в несколько форматов для разных случаев использования

Краткие советы по теории цвета

Создание Состояния наведения

Используйте HSL: уменьшите яркость на 10–15 % для более темных эффектов при наведении или увеличьте для более светлых. те. Гораздо проще, чем рассчитывать изменения RGB.

Обеспечение Контрастность

Для соответствия требованиям WCAG AA коэффициент контрастности текста должен составлять 4,5:1. HSL Различия в легкости 40%+ обычно соответствуют этому требованию.

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

Какой формат мне следует использовать? в CSS?

Все три работают в современных браузерах. HEX является наиболее распространенным и компактным. Используйте RGB/HSL, когда вам нужно прозрачность (rgba() или hsla()) или динамическая манипуляция цветом.

Что означает # в HEX имею в виду?

Символ # указывает шестнадцатеричное значение цвета. Это требуется в CSS, но часто необязательно в инструменты дизайна. Следующие 6 символов представляют красный, зеленый и синий в шестнадцатеричной системе счисления (00-FF = 0-255).

Как работает HSL Hue?

Оттенок — это градус цветового круга: 0° = красный, 60° = желтый, 120° = зеленый, 180° = голубой, 240°. = Синий, 300° = Пурпурный, 360° = обратно к Красному. Позволяет выбирать дополнительные цвета (180° отдельно) интуитивно.

Могу ли я добавить прозрачность?

Да! Используйте rgba(R, G, B, A) или hsla(H, S%, L%, A) , где A равно 0–1. Современный CSS также поддерживает 8-значный HEX: #RRGGBBAA.

Справочник цветов CSS

                            /* HEX */

                            color: #2563EB;

                            /* RGB */

                            color: rgb(37, 99, 235);

                            /* HSL */

                            color: hsl(221, 83%, 53%);

                            /* With transparency */

                            color: rgba(37, 99, 235, 0.5);

                            color: hsla(221, 83%, 53%, 0.5);