В этой статье
Форматы цвета: обзор
Цвета в цифровом дизайне и веб-разработке представляются в нескольких форматах, каждый из которых подходит для разных контекстов. HEX (#ff5733) лаконичен и универсален для веба. RGB (255, 87, 51) интуитивно понятен при смешивании цветов. HSL (14°, 100%, 60%) наиболее читаем при настройке тона, насыщенности и яркости.
Разные инструменты используют разные форматы цвета: дизайн-программы часто предпочитают HSL, HTML/CSS использует HEX и RGB, библиотеки работы с цветом в JavaScript могут поддерживать различные форматы, а печатный дизайн использует CMYK. Точное преобразование между форматами требует математических формул.
Как работает конвертация цвета
Конвертер применяет точные математические преобразования между цветовыми пространствами.
- Разбор HEX — декодирует 3- и 6-значные шестнадцатеричные коды с альфа-каналом или без него
- Нормализация RGB — обрабатывает целые значения от 0 до 255 и дробные значения от 0 до 1
- Вычисление HSL — конвертирует в и из тона (0–360°), насыщенности (0–100%) и яркости (0–100%)
Попробуйте бесплатно — без регистрации
Конвертировать цвет →Когда применять конвертацию цвета
Конвертация цвета необходима всякий раз, когда цвета переходят между разными инструментами, форматами или контекстами.
- От дизайна к коду — конвертируйте значения цвета в HSL из Figma/Sketch в HEX для реализации в CSS
- Единообразие бренда — проверяйте соответствие значений цвета в разных дизайн-инструментах и реализациях кода
- Доступность — вычисляйте коэффициенты контрастности (использующие относительную яркость из значений RGB) для соответствия требованиям WCAG
Часто задаваемые вопросы
В чём разница между RGB и RGBA?
RGBA добавляет альфа-канал к RGB, представляющий непрозрачность от 0 (полностью прозрачный) до 1 (полностью непрозрачный) или от 0 до 255 в некоторых контекстах. Аналогично, HEXA добавляет два шестнадцатеричных символа для альфа-канала (например, #FF5733FF для полной непрозрачности или #FF573380 для 50% прозрачности). Значения альфа позволяют создавать прозрачные и полупрозрачные цвета.
Почему конвертация цвета и обратно не всегда возвращает точно то же значение?
Конвертация между цветовыми пространствами включает арифметику с плавающей точкой и округление. При циклических преобразованиях (RGB → HSL → RGB) могут возникать небольшие ошибки округления в последнем знаке. Это нормально, и разница незаметна для человеческого глаза. Для работы, требующей высокой точности, всегда храните цвета в едином каноническом формате.
В чём разница между HSL и HSV/HSB?
HSL (тон, насыщенность, яркость) и HSV/HSB (тон, насыщенность, значение/яркость) — это разные цилиндрические цветовые модели. В HSL чистый белый цвет соответствует L=100% независимо от насыщенности; в HSV чистый белый — это S=0%, V=100%. HSL более интуитивен для веб-дизайна; HSV чаще используется в элементах управления выбором цвета.