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

HEX (шестнадцатеричный) — это 6-значный код, начинающийся с #, который представляет значения RGB в системе по основанию 16. Например, #FF5733 означает Red=FF (255), Green=57 (87), Blue=33 (51). Он популярен потому, что компактен, легко копируется и универсально поддерживается в HTML/CSS. Первые два знака отвечают за красный, средние — за зелёный, последние — за синий. Также можно использовать сокращённую запись из 3 знаков (#F53 раскрывается в #FF5533).

RGB и HEX обозначают одно и то же — просто разные системы записи. RGB использует десятичные числа (0–255) в виде rgb(255, 87, 51), а HEX — шестнадцатеричные (00–FF) в виде #FF5733. RGB более читабелен с раздельными каналами, HEX — компактнее. RGB поддерживает прозрачность через rgba(255, 87, 51, 0.5), HEX требует 8-значный формат #FF5733CC для прозрачности.

HSL (Hue, Saturation, Lightness) лучше подходит для манипуляций с цветом и создания цветовых схем. Чтобы сделать цвет светлее — увеличьте lightness. Снизить насыщенность — уменьшите saturation. RGB требует менять все три канала, что усложняет работу. HSL интуитивен для дизайнеров: hue (0–360°) — позиция на цветовом круге, saturation (0–100%) — интенсивность, lightness (0–100%) — яркость.

OKLCH — современное перцептивно равномерное цветовое пространство, поддерживаемое в CSS с 2023 года. В отличие от HSL, где 50% lightness выглядит визуально разной для синего и жёлтого, OKLCH обеспечивает одинаковую воспринимаемую яркость для всех оттенков. Это идеально для создания доступных цветовых шкал. Формат: oklch(L C H), где L — lightness (0–100%), C — chroma (0–0.4), H — hue (0–360°). Поддерживается в Chrome 111+, Safari 15+, Firefox 113+.

CMYK (Cyan, Magenta, Yellow, Key/Black) — цветовая модель для печати. Экраны используют аддитивный RGB (смешение света), а принтеры — субтрактивный CMYK (смешение чернил). При проектировании визиток, брошюр или упаковки нужны значения CMYK. CMYK имеет более узкий цветовой охват, чем RGB, поэтому яркие экранные цвета могут выглядеть тусклее в печати. Всегда конвертируйте и проверяйте CMYK перед отправкой на печать.

Наш матчер Pantone находит ближайший цвет Pantone Solid Coated через алгоритм Delta E (ΔE) — индустриальный стандарт измерения перцептивной разницы цветов. ΔE меньше 1 — незаметная разница, меньше 3 — допустимая для большинства задач. Однако экранные цвета (RGB) никогда не совпадут идеально с физическими свотчами Pantone из-за разных цветовых пространств и условий просмотра. Для финальных решений по печати всегда сверяйтесь с физическими книгами Pantone.

Для максимальной гибкости храните цвета как OKLCH или HSL в CSS custom properties. Это позволяет легко манипулировать значениями — можно настроить только lightness для hover-состояний без пересчёта всего цвета. Пример: --primary: oklch(60% 0.15 260);, затем используйте relative color syntax для вариаций. Избегайте хранения как HEX, потому что отдельные каналы нельзя менять напрямую в CSS.

HEX, RGB и HSL поддерживаются всеми браузерами. OKLCH требует современных браузеров (Chrome 111+, Safari 15+, Firefox 113+). CMYK — не CSS-формат, он только для печатного ПО. Для прозрачности используйте rgba(), hsla(), 8-значный HEX (#RRGGBBAA) или slash-синтаксис OKLCH oklch(60% 0.15 260 / 0.5). Всегда предусматривайте фолбэки при использовании новых цветовых пространств в продакшене.