Реализация кинематографичных цветов на сайте: как использовать HCL, LCH и P3 для Wide Gamut

Сегодня я хочу поделиться с вами знаниями о современных цветовых пространствах в CSS, которые помогут создавать сайты с кинематографичной глубиной и реалистичностью. Мы разберёмся, как работают HCL, LCH и P3, зачем они нужны и как их применять на практике.

Почему стандартного RGB уже недостаточно?

Традиционные цветовые модели вроде sRGB, которые мы используем в вебе десятилетиями, ограничивают наш творческий потенциал. Они охватывают только 35% видимых человеческим глазом цветов! Современные мониторы с поддержкой Wide Gamut (например, Apple Retina, OLED-экраны) способны отображать гораздо больше оттенков. Чтобы использовать этот потенциал, нужны новые инструменты:

• P3 (Display P3) — цветовое пространство, используемое в киноиндустрии (например, в фильмах Marvel)
• LCH / HCL — модели, основанные на человеческом восприятии цвета
• OKLCH — усовершенствованная версия LCH с лучшей предсказуемостью

Давайте посмотрим на разницу визуально:

/* Традиционный sRGB */ 
.old-color { 
  color: rgb(255, 0, 128); 
} 

/* Wide Gamut P3 */ 
.new-color { 
  color: color(display-p3 1 0 0.5); 
}

На мониторе с поддержкой P3 второй цвет будет выглядеть на 30% насыщеннее.

HCL и LCH: цветовые пространства

Что такое HCL?

HCL (Hue-Chroma-Luminance) модель, где:

• Hue (оттенок) — угол на цветовом круге (0-360°)
• Chroma (насыщенность) — интенсивность цвета (0-100+)
• Luminance (яркость) — воспринимаемая яркость (0-100%)

Пример:

.button { 
  background-color: hcl(270 85% 60%); /* Фиолетовый */ 
}

Чем LCH отличается от HCL?

LCH (Lightness-Chroma-Hue) похожая модель, но с другим порядком компонентов:

.card { 
  border-color: lch(75% 100 120); /* Голубой акцент */ 
}

Главное преимущество LCH/HCL перед HSL/HSV перцептуальная равномерность. Если вы меняете lightness на 10%, визуальное восприятие яркости изменится равномерно, что критично для создания доступных интерфейсов.

Display P3: кинематографичные цвета в CSS

P3 это цветовое пространство, используемое в профессиональном видеопроизводстве. Его охват на 25% шире sRGB.

Как использовать:

.header { 
  background-color: color(display-p3 0.8 0.2 0.4); 
}

Когда стоит выбирать P3:

1. Фотографии с высокой цветовой глубиной
2. Брендинг с «невозможными» в sRGB цветами
3. Анимации с плавными градиентами

Сравнительная таблица: HCL, LCH, P3

Практика: создаём кинематографичный градиент

Шаг 1. Выбираем цвета в P3 для максимальной насыщенности:

.gradient { 
  background: linear-gradient( 
    to right, 
    color(display-p3 1 0.2 0), 
    color(display-p3 0.5 0 1) 
  ); 
}

Шаг 2. Добавляем fallback для старых браузеров:

.gradient { 
  background: rgb(255, 51, 0); 
  background: linear-gradient( 
    to right, 
    rgb(255, 51, 0), 
    rgb(127, 0, 255) 
  ); 
  @supports (color: color(display-p3 0 0 0)) { 
    background: linear-gradient(...); /* P3-версия */ 
  } 
}

Шаг 3. Оптимизируем контраст с помощью LCH:

.text { 
  color: lch(30% 50 270); 
  /* Проверяем контраст: должно быть > 4.5 */ 
}

5 правил работы с Wide Gamut

1. Всегда проверяйте контраст: инструменты вроде WebAIM Contrast Checker ещё не поддерживают P3, используйте ручной расчёт:
   js

   const contrast = (L1 + 0.05) / (L2 + 0.05); // L — lightness из LCH

2. Используйте постепенное улучшение: сначала проектируйте в sRGB, потом добавляйте Wide Gamut.
3. Тестируйте на реальных устройствах: MacBook Pro, iPad Pro, OLED-телевизоры.
4. Для анимаций переходите между цветами в одном пространстве: смешивание sRGB и P3 даёт артефакты.
5. Конвертируйте цвета через CSS-функции, а не вручную:

/* Плохо */ 
color: rgb(255 0 0); 
/* Хорошо */ 
color: lch(54% 106.5 40.9);

Что ждёт цвет в вебе?

Спецификация CSS Color Level 4 обещает нам:

• Динамическое управление цветовыми профилями
• Пространства, привязанные к устройству вывода
• Интеграцию с HDR

Экспериментируйте уже сейчас, но помните о поддержке. Мои рекомендации:

• Для основного брендинга используйте LCH
• Для медиаконтента — P3
• Для данных — HCL

Освоение HCL, LCH и P3 открывает новый уровень визуального дизайна. Замените один цвет в вашем проекте на его Wide Gamut-версию. Используйте @supports для безопасного внедрения. И не забывайте, даже самые яркие цвета должны улучшать UX, а не мешать контенту.