Все цвета радуги

Международная комиссия по освещению

CIE 1931 XYZ

CIE 1976 L*a*b*

Цветовые профили

Каждое устройство ввода или вывода снабжается профилем, который однозначно определяет преобразование в CIEXYZ или CIELAB и обратно.

International
Color
Consortium

sRGB

• Разработан в 1996 совместно HP и Microsoft
• Прекрасно работает для ЭЛТ и LCD-мониторов
• Практически вся техника для массового потребителя работает в sRGB
• Любое изображение без цветового профиля считается в sRGB
• Цвет в CSS задаётся только в пространстве sRGB 🙁
• Для видео применяют Rec.601 (SD) или Rec.709 (HD) 🙁

Профили
широким
охватом

Будущее уже вокруг нас

Медиа-запросы

        @media (color-gamut: srgb) { }
        @media (color-gamut: p3) { }
        @media (color-gamut: rec2020) { }
    

Медиа-запросы

        <picture>
          <source media="(color-gamut: rec2020)"
              src="image@rec2020.jpg">
          <source media="(color-gamut: p3)"
              src="image@p3.jpg">
          <img src="image.jpg"><!-- sRGB -->
        </picture>
    

Демо

Минусы

• Файлы становятся больше на 1-3 Кбайта из-за внедрённого профиля.
• Слабая поддержка инструментами оптимизации и CDN.
• Нет согласования с цветами из CSS.
• Возможно, 8 бит уже не хватит.

Плюсы

• Специально подготовленные иллюстрации выглядят эффектнее на соответствующих дисплеях.
• Автоматическая конвертация в профиль устройства вывода.
• Есть поддержка во всех современных ОС и браузерах^*.
• В Firefox по-умолчанию выключена поддержка цветовых профилей v4, а так же вместо sRGB используется весь доступный цветовой охват для изображений без цветового профиля.

Где применять?

• Маркетинговые страницы.
• Проекты с качественными фото иллюстрациями.
• Презентационные и рекламные стенды на выставках.

Что ещё почитать?

• A Beginner’s Guide to (CIE) Colorimetry
• Цветофобия
• Improving Color on the Web
• Web browser color management test