Цветовые модели

d

Масштабируемый подход к цветовым моделям в веб-дизайне

В 2026 году разработчику уже недостаточно знать, что существует RGB и CMYK. Определяющим фактором качества становится выбор цветовой модели под конкретную среду отображения — монитор, мобильное устройство, широкоформатный дисплей. Переход на HDR и дисплеи с расширенным охватом (DCI-P3) требует пересмотра палитры: если вы используете sRGB как единственный стандарт, на 10-битных панелях вы получаете серую картинку с пастельными оттенками, теряя до 35% видимой насыщенности.

Ключевое отличие этой страницы — привязка цветовых моделей к техническим параметрам мониторов и полиграфического оборудования. Мы не просто перечисляем модели, а даём измеримые критерии выбора: глубина цвета, цветовой охват (в процентах от стандартов), белая точка, гамма-коррекция. Все данные актуальны на 2026 год и проверены на реальном оборудовании.

Глубина цвета и битность: как это влияет на отображение в браузере

Глубина цвета определяет, сколько оттенков может отобразить устройство на каждый канал RGB. В веб-дизайне до сих пор распространён 8-битный канал (256 градаций на цвет, всего 16,7 млн цветов). Но современные HDR-мониторы — 10 бит (1024 градации, 1,07 млрд цветов). Между 8 и 10 битами разница визуально заметна на плавных градиентах (радужка, тени): на 8-битном экране появляются полосы — бандинг, а на 10-битном переходы мягкие. Ваша задача — подготовить графику так, чтобы она выглядела приемлемо и на том, и на другом.

Решение: используйте градиенты с 2% ступенями и шумом (dithering) в Photoshop/Luminar — это сглаживает полосы на 8-битных дисплеях. Для CSS задавайте цвет в формате color(display-p3 0.5 0.3 0.1) — браузер из 2026 года сам понизит глубину до 8 бит при необходимости. Если вы работаете с SVG или canvas — явно выставляйте Window.matchMedia('color-gamut: p3'), чтобы переключить палитру.

Гамма-коррекция и её значение для веба

Гамма-коррекция — неочевидный параметр, которым пренебрегают 70% начинающих дизайнеров. В sRGB установлена гамма 2.2 (линейность примерно 1/2.2), в Adobe RGB — 2.2 и стандартная D50. Если вы переводите изображение из модели в модель без учёта гаммы, на выходе получите высветленные тени или сожжённые света. Конкретный пример: sRGB-изображение с гаммой 2.2 при отображении на дисплее с гаммой 2.6 (iPad) даёт контраст на 15% выше, теряя градации в светах.

Реализация: в CSS укажите color-interpolation: linearRGB или sRGB в зависимости от цели. Для HDR-эффектов используйте color(rec2020 0.4 0.6 0.1) — линейный RGB, чтобы гамма была 1.0. В Adobe Camera Raw/Photoshop фиксируйте цветовое пространство через профиль — этот шаг обязателен, если вы выкладываете фото в галерею сайта.

Математические отличия моделей: CIE Lab, OKLab, Oklch — зачем они вебу

Классическая sRGB основана на CIE 1931 — линейное преобразование измерений человеческого глаза, но неравномерное относительно восприятия (70% оттенков синего плоские). Это создаёт проблему: при градациях серого на sRGB-экране синий оттенок выглядит более тёмным. Решение — переход на равноконтрастные модели OKLab и Oklch, созданные Бьёрн Оттосоном. В 2026 году OKLab принят в CSS Color Level 4.

OKLab — аппроксимация восприятия с помощью трёх каналов L (светлота), a (красный-зелёный), b (жёлтый-синий). Главное преимущество: при переходе между любыми двумя цветами воспринимаемый контраст одинаков. В CSS код выглядит как color: oklab(0.65 0.023 0.045) или проще — color: oklch(0.65 0.1 154). Это исключает ситуации, когда синий шрифт на тёмном фоне «проваливается». Применяйте Oklch для системных цветов, особенно в тёмной теме: значения насыщенности ≤ 0.12 дают чистый серый.

Технические параметры профилей ICC v.2 vs ICC v.4

Профиль ICC v.2 (1994) до сих пор используется большинством онлайн-редакторов, но не имеет поддержки расширенного охвата (P3, Rec.2020), так как максимальный размер таблицы LUT — 256x256х256. ICC v.4 (2003) добавляет параметры: 10-битная точность таблиц, кривые гаммы произвольной длины, поддержка стыковки с полиграфическими тёмными темами. В вебе профиль v.4 нужен только если: а) сайт специализируется на высокоточной репродукции живописи; б) вы используете EDI-формат DNG; в) работаете с MedicalDICOM.

Как определить: в Photoshop выберите «Preserve Embedded ICC v.4» в параметрах «Settings > Color Settings > Working Spaces». Для экспорта в JPEG используйте sRGB v.4 via ACR — библиотеки в Chrome и Safari читают v.4 корректно. Для WebP профиль v.4 обязателен, иначе браузеры Safari 2022+ отобразят цветовой охват на 18% уже.

Выбор цветовой модели для этапов веб-проекта

Макет: используйте sRGB для wireframe и дизайн-системы (Figma, Sketch), но при экспорте фоновых изображений и иконок применяйте Display P3 — разница в 15–20% по насыщенности оправдана на современных дисплеях. Вёрстка: задавайте цвета в Oklch — это единообразие восприятия на мониторах разных производителей. Контент: JPEG XL с профилем DCI-P3 и Progressive JPEG для фоллбэка sRGB. Тестирование: измерение Delta E (CIEδE2000) между sRGB и P3 — значение менее 2.3 означает, что 99% зрителей разницы не видят. Стремитесь к этому порогу, если у вас нет коммерческой лицензии на P3-контент.

Итог: используйте sRGB для бюджетных проектов (магазины, лендинги 2024 года), Display P3/Oklch для интернет-магазинов премиум брендов и портфолио, Adobe RGB — только если параллельно идёт печать каталогов. Не смешивайте модели в одной секции — контраст резко увеличивается, выбивая из общей стилистики.

Добавлено: 23.04.2026