Конвертер цветов
Преобразование цветов между форматами HEX, RGB и HSL.
Предварительный просмотр
шестигранник
RGB
ХСЛ
Инструмент проектирования
Конвертер цветов
Выберите цвет и получите готовые к копированию значения HEX, RGB и HSL.
Все инструменты
Сопутствующие инструменты
Продолжайте использовать полезные инструменты для решения ближайших задач.
Как пользоваться конвертером цветов
Нажмите на поле цвета, чтобы открыть системную палитру, или введите начальное значение, а затем перемещайте ползунки, пока образец Предварительного просмотра не покажет нужный оттенок. По мере перемещения три значения обновляются в реальном времени: код HEX, тройка RGB и значения HSL. Каждое из них описывает один и тот же цвет в своей записи, поэтому вы можете скопировать тот формат, который ожидает ваша таблица стилей, графический редактор или код, и сразу вставить его.
HEX, RGB и HSL: в чём разница
Один цвет можно записать тремя способами. HEX — это шестизначный шестнадцатеричный код, например #0f766e, где пары цифр кодируют красный, зелёный и синий от 00 до ff. RGB записывает те же три канала десятичными числами от 0 до 255, например rgb(15, 118, 110), что отражает то, как экраны смешивают свет. HSL описывает цвет через Hue (тон — угол на цветовом круге), Saturation (насыщенность) и Lightness (светлоту) — hsl(174, 78%, 26%) — и это самая понятная человеку модель для ручной настройки оттенка.
Распространённые цвета во всех форматах
Один и тот же цвет выглядит совершенно по-разному в зависимости от записи. В таблице ниже несколько знакомых цветов показаны рядом, чтобы вы видели, как соотносятся HEX, RGB и HSL.
| Цвет | HEX | RGB | HSL |
|---|---|---|---|
| Белый | #ffffff | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Чёрный | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| Красный | #ff0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Зелёный | #00ff00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| Синий | #0000ff | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| Бирюзовый | #0f766e | rgb(15, 118, 110) | hsl(174, 78%, 26%) |
Обратите внимание: чистые красный, зелёный и синий имеют в HSL одинаковые насыщенность 100% и светлоту 50%, различаясь только углом тона.
Пример: осветление цвета через HSL
Допустим, фирменный бирюзовый цвет — #0f766e, то есть hsl(174, 78%, 26%). Чтобы сделать состояние при наведении того же цвета, но ярче, оставьте тон и насыщенность без изменений и поднимите только светлоту — скажем, до 36% — получив hsl(174, 78%, 36%). Та же правка в HEX или RGB потребовала бы пересчёта всех трёх каналов вручную. Именно эта предсказуемость делает HSL самой удобной моделью для создания светлых и тёмных оттенков из одного базового цвета.
Почему этот инструмент полезен
Макеты дизайна, CSS, скриншоты и графические редакторы редко используют одну и ту же запись цвета, поэтому постоянно приходится переводить один формат в другой. Этот конвертер выдаёт сразу все три из одного выбора, избавляя от ручного пересчёта HEX в RGB, сохраняя точность фирменных цветов в разных файлах и позволяя легко собрать единую палитру оттенков для кнопок, состояний при наведении и тем.
Точность и конфиденциальность
Преобразования используют стандартные формулы, по которым браузеры отображают цвет, поэтому скопированные значения HEX, RGB и HSL отобразятся одинаково везде, куда бы вы их ни вставили. Всё работает локально в вашем браузере — ничто из выбранного или вставленного не загружается, не записывается в журнал и не хранится на сервере, и инструмент продолжает работать, даже если соединение пропадёт после загрузки страницы.
Часто задаваемые вопросы
Что такое HSL и когда его использовать?
HSL расшифровывается как Hue (тон), Saturation (насыщенность) и Lightness (светлота). Тон — это угол от 0 до 360 градусов на цветовом круге, а насыщенность и светлота задаются в процентах. Это лучшая модель, когда нужно интуитивно настроить цвет — сделать оттенок светлее или менее насыщенным — не пересчитывая числа вручную, как пришлось бы в HEX или RGB.
Как работают альфа-канал и прозрачность?
Альфа-канал управляет прозрачностью. В CSS его задают через rgba() или hsla() значением от 0 до 1, где 0 — полностью прозрачный, а 1 — полностью непрозрачный, либо добавляя две шестнадцатеричные цифры к HEX-коду, например #0f766e80 для примерно 50% непрозрачности. Этот конвертер работает с непрозрачными цветами, поэтому альфа-канал добавляйте самостоятельно, когда нужна прозрачность.
Что такое сокращённая трёхзначная запись HEX?
Если в каждой из трёх пар HEX-кода обе цифры одинаковые, код можно сократить до трёх символов. Например, #ffffff превращается в #fff, а #0088cc — в #08c. Браузер удваивает каждую цифру, поэтому сокращённая и полная запись дают абсолютно одинаковый цвет. Сокращение работает только тогда, когда в каждой паре символы повторяются.
Какой формат цвета использовать в CSS?
Все три допустимы в CSS и отображаются одинаково. HEX компактен и удобен для фиксированных фирменных цветов. RGB удобен, когда значения берутся из кода или графических редакторов. HSL лучше всего подходит, когда цвет планируется править вручную, ведь менять светлоту или насыщенность гораздо предсказуемее, чем числа HEX или RGB.
Отправляет ли инструмент мои цвета на сервер?
Нет. Преобразование между HEX, RGB и HSL выполняется полностью в вашем браузере с помощью локальных вычислений. Ничто из выбранного или вставленного не загружается и не сохраняется, поэтому инструмент работает даже без подключения к интернету после загрузки страницы.