Миксуй палитру как настоящий художник

Миксуй палитру как настоящий художник!

Анна Ширяева, СИБУР Цифровой

Когда о цвете приходится думать?

Палитры

• Диапазон оттенков.
• Работа с разными темами.
• Подбор комплиментарных цветов.

Это работа дизайнеров!

Гипотеза 1

• Без дизайнера тоже можно сделать красиво.

Гипотеза 2

• CSS тоже код, который нужно поддерживать.
• Важно как запрограммируете цвет.

Возможности современного CSS

Давно использовали
color picker в DevTools?

Цветовые пространства

1. Хотим более сочную картинку

Больше доступных цветов видимого спектра

2. Разные пространства —
разные системы координат

Внутри цветовых функций:

Как это помогает контролировать цвет?

Сравнение

CSS Color Module Level 5

CSS Color Module Level 5

CSS Color Module Level 5

• color-mix(in srgb, black, white);
• color-mix(in srgb-linear, black, white);
• color-mix(in lch, black, white);
• color-mix(in oklch, black, white);
• color-mix(in lab, black, white);
• color-mix(in oklab, black, white);
• color-mix(in xyz, black, white);

Палитра

• Нейтральные оттенки.
• Бренд цвет.
• Поддерживающие цвета (success, warning, danger).

Проблема оттенков

color-mix(???, black, white);

color-mix(???, blue, white);

Решение

color-mix(in oklab, black, white);

color-mix(in oklab, blue, white);

Восприятие

Цвет - ЧБ - корректировка - цвет

html { filter: grayscale(); }