Как конвертировать цвета между HEX, RGB и HSL
Быстрый ответ
Чтобы конвертировать цвет: откройте Color Converter, введите цвет в любом формате (HEX, RGB, HSL) и инструмент мгновенно покажет эквиваленты во всех других форматах. Вся конвертация локально —данные не загружаются.
Введение
Цвета могут быть представлены в нескольких форматах: HEX (#ff6600), RGB (rgb(255, 102, 0)), HSL (hsl(24, 100%, 50%)) и других. Разные инструменты и контексты используют разные форматы —CSS часто HEX или RGB, design tools HSL, а API любой. Конвертация между форматами позволяет использовать цвет из одной системы в контексте, требующем другой.
Шаг за шагом
-
Откройте инструмент «Конвертер цветов».
Перейдите на страницу инструмента «Конвертер цветов». Инструмент поддерживает форматы HEX, RGB, HSL, HSV и CMYK.
-
Введите свой цвет
Введите или вставьте значение цвета в любом поддерживаемом формате. Примеры: «#ff6600», «rgb(255, 102, 0)», «hsl(24, 100%, 50%)». Инструмент автоматически определяет входной формат.
-
Просмотрите все эквиваленты формата
Инструмент отображает цвета одновременно во всех форматах: HEX, RGB, HSL, HSV и CMYK. Он также показывает образец цвета для предварительного просмотра, чтобы вы могли убедиться в правильности преобразования.
-
Скопируйте нужный вам формат
Нажмите кнопку «Копировать» рядом с любым форматом, чтобы скопировать это значение в буфер обмена. Используйте его в своем CSS, инструменте проектирования или приложении.
-
Отрегулируйте цвет (необязательно)
Некоторые инструменты позволяют регулировать цвет с помощью ползунков (для HSL: оттенок, насыщенность, яркость) и видеть обновление всех форматов в режиме реального времени. Это полезно для поиска родственных цветов или оттенков.
Примеры
От HEX до RGB и HSL
Вход: #ff6600
Выход: RGB: RGB(255, 102, 0)
HSL: hsl(24, 100%, 50%)
От RGB до HEX
Вход: RGB(0, 128, 255)
Выход: HEX: #0080ff
HSL: hsl(210, 100%, 50%)
От HSL до HEX
Вход: всл(120, 100%, 50%)
Выход: HEX: #00ff00
RGB: RGB(0, 255, 0)
Распространенные проблемы
- HEX с vs без # — для некоторых инструментов требуется префикс #, для других — нет. Наш конвертер принимает оба варианта.
- 3-значный или 6-значный HEX —#f60 является сокращением от #ff6600. Оба действительны; конвертер нормализуется до 6 цифр.
- HSL диапазон оттенка — оттенок составляет 0–360 градусов (круг). 0 и 360 оба красные. Значения выше 360 обходят стороной.
- Различия в цветовом пространстве — HEX, RGB и HSL — все относятся к sRGB. CMYK — это другое цветовое пространство (печать), и преобразование является приблизительным.
Советы
- Используйте HSL для создания цветовых вариаций — настройка оттенка, насыщенности или яркости более интуитивно понятна, чем RGB.
- Используйте HEX вместо CSS — это самый компактный и широко поддерживаемый формат в таблицах стилей.
- Используйте RGB, когда вам нужно установить альфа-прозрачность — rgb(255, 102, 0, 0,5) для непрозрачности 50 % (или используйте 8-значный HEX: #ff660080).
- Используйте наш конвертер цветов для мгновенного и конфиденциального преобразования всех цветовых форматов.