Конвертер цветов (HEX, RGB, HSL)

В рабочих процессах проектирования и разработки сочетаются несколько способов описания одного и того же цвета на экране. HEX (#RRGGBB) компактен в панелях проверки CSS и Figma. RGB перечисляет красные, зеленые и синие каналы от 0 до 255 — родной язык мониторов и API холста. . HSL выражает оттенок с помощью колеса 0–360°, насыщенность — яркостью 0–100 %, а яркость — яркостью 0–100 %, что многим дизайнерам проще при настройке оттенков без смещения оттенка.

Все три формата в этом инструменте при правильном преобразовании соответствуют одной и той же гамме sRGB. HEX и RGB являются точными обратными значениями с точностью до 8 бит. HSL внутренне использует математику с плавающей запятой; после двустороннего преобразования вы можете увидеть, что значения каналов отличаются на один шаг — это нормально для рабочих процессов редактирования HSL.

Переключите сегментированный элемент управления входным сигналом между HEX и RGB в зависимости от того, что обеспечивает ваша передача обслуживания. В шестнадцатеричном режиме вводите с хешем или без него — оба #3B82F6 и 3B82F6 работают, как и трехзначное сокращение #3BF, расширенное до #33BBFF. В режиме RGB каналы вводятся отдельно; инструмент выводит HEX в верхнем регистре, а также строку CSS rgb() и разбивку HSL.

Рабочий пример с шестнадцатеричным полем по умолчанию #3B82F6: красный = 0x3B = 59, зеленый = 0x82 = 130, синий = 0xF6 = 246. В сводке показано RGB(59, 130, 246) — насыщенный синий цвет, распространенный в палитрах пользовательского интерфейса Tailwind. HSL имеет оттенок около 217°, насыщенность 91%, яркость 60%. Переключитесь в режим RGB с этими значениями каналов, и вы получите тот же HEX обратно.

HSL полезен при создании токенов дизайна: увеличьте яркость, чтобы сделать #3B82F6 состоянием наведения без выбора нового оттенка. Более низкая насыщенность для приглушенного фона. Для программных тем многие команды хранят HSL в пользовательских свойствах CSS, потому что альфа-синтаксис hsl(217 91% 60% / 0,5) читается четко.

Распространенные ошибки включают в себя предположение, что HEX включает альфа (восьмизначный #RRGGBBAA здесь не поддерживается), смешивание нормализованного RGB 0–1 из некоторых графических API без умножения на 255 и сравнение напечатанных образцов Pantone с шестнадцатеричным sRGB на некалиброванном дисплее. Веб-цвета представляют собой излучаемый свет sRGB — для преобразования печати CMYK требуется отдельный профиль.

Трехзначное шестнадцатеричное сокращение дублирует каждый полубайт — #ABC становится #AABBCC. Недопустимые символы или неправильная длина возвращают заголовок в виде тире с запросом допустимого цвета, например #3B82F6. Именованные цвета CSS (rebeccapurple, васильковый) не анализируются — сначала преобразуйте их в HEX в DevTools, а затем вставьте сюда.

Ограничения: только непрозрачный sRGB — без CMYK, Lab, Display-P3 или восьмизначного альфа-шестнадцатеричного кода. Моделирование дальтонизма и проверка контрастности входят в состав калькулятора коэффициента контрастности. Дисплеи WCG могут отображать насыщенный синий цвет иначе, чем предварительный просмотр sRGB на стандартных мониторах.