В прошлом совете я рассказал про квадрат Иттена, который показывает, что цвета неодинаковы по яркости. Сегодня максимально его детализируем.

Почти во всех графических редакторах есть режим наложения слоев color. В этом режиме от слоя остаётся цвет, а яркость берётся с нижнего.

Если в нижний слой положить вертикальный ч/б градиент, а в верхнем горизонтально развернуть цветовой спектр с таким наложением, мы увидим волшебную картину:

Получается максимально детализированный квадрат Иттена. Спектральный жёлтый совсем рядом с белым, а красный наоборот близок к чёрному. Самый тёмный цвет — синий.

Разная яркость цветов диктует принципы их сочетания:

ГОСТ 12.4.026‑2015 описывает сигнальные и контрастные им цвета. Для красного, синего и зелёного, контрастный цвет — белый. Для жёлтого — чёрный.

Еще можно заметить, что от красного, зелёного и синего вниз тянутся лучики соответствующего цвета. А от жёлтого, голубого и фиолетового такие же лучики тянутся вверх. Замечали, что красный, зелёный и синий хорошо затемняются, а при осветлении становятся грязными? А жёлтый, голубой и фиолетовый, напротив, грязнеют при затемнении, но отлично осветляются. Теперь вы знаете, как это работает.

Градиентные заливки айосовских иконок учитывают эту особенность цветов. Эпловые иконисты смещают верхний цвет градиента в сторону Линии Силы, чтобы цвет не мутнел. Красный и зелёный желтеют, а синий голубеет:

P. S. Это был иконочный совет. Пилите пиктограммы в интерфейсах? Заказчик ругается на иконки? Графика не цепляет? В чём сила, брат? Присылайте вопросы

ИконкиГрафика
Отправить
Поделиться
Запинить

Комментарии

«Линии силы» — это побочный эффект использования RGB/HSL/HSV моделей плюс ограниченность цветового профиля графического редактора (для дисплеев это почти всегда sRGB). Первые нелинейно смешивают и меняют цвета относительно яркости, а вторые обрезают их, чтобы помещались в старый экранный диапазон (современные моники способны показывать гораздо больше цветов). На практике без правильных инструментов люди просто на глаз берут цвета схожей яркости.

Проблема нелинейности фиксится использованием других цветовых моделей, которые работают относительно воспринимаемой яркости. Это знакомая фотографам модель Lab (яркость, синий‑жёлтый, зелёный‑магента) и его цилиндрическая форма — LCH (яркость, цветастость, оттенок hue). Палитры на основе этой модели получаются гармоничнее и логичнее: без тёмных синих, противопоставленных ярким жёлтым.

Для граф. дизайна в играх запилил генератор цветовых палитр, который работает на LCH и смешивает цвета в XYZ (линейное пространство) и/или Lab:
https://comigo.itch.io/palettes

Прикрепляю аналог квадрата Иттена в LCH.

Результат лучше, но всё равно видимые полосы есть — только уже в насыщенности. Тут приплывает проблема ограниченности цветового спектра в вебе, sRGB и не только, и об этом хорошо рассказывает Lea Verou в своём блоге:
https://lea.verou.me/…‑in‑css‑what‑why‑and‑how

Там же есть информация о LCH и введении управляемого цветового пространства для веб‑страниц в четвёртом слое стандартов цветов CSS: CSS Color Module, Level 4.

Если вкратце, то LCH и Lab создают цвета, треть которых показать невозможно — из насыщенных цветов sRGB показывает только спектр от тёмных фиолетовых до ярких жёлтых, через красные, минуя синие оттенки. Сочные цвета — что в статье Lea Verou, что в моём генераторе — приглушаются по насыщенности, чтобы попасть в sRGB.

Помимо проблем цветового пространства и модели ещё нужно учитывать окружающее освещение. Для ясного дня это более тёплая подсветка и холодные тени. Такое почему‑то и подразумевается везде, отчего вписывается даже в веб‑интерфейсах и делает цвета более натуральными. От этого также первая айосовская иконка кажется вогнутой, а две другие — чуть выпуклыми. В графике для игр и в художествах, правда, всё сложнее, но это другая уже история.

24 мая 2020

Рекомендуем другие советы