Цвета в CSS

Цвета в CSS

Мы будем говорить:

• о цвете вообще
• о цвете в мониторах
• о цвете в CSS
• о способах с ним работать

Начнём с предыстории

Приходим мы в проект...

#5181b8 lch(52.4% 35. 263) #6186b5 hsl(205, 47%, 49%) #5381b8 lch(54% 29 263) #5081b9 #5282b8 rgb(83, 148, 184) #5084b8 hsl(218, 63%, 59%) #5383b8

Одинаковые, но разные 😭 😭 😭

Личная история

~6500 цветов

Хотим сделать хорошо

Хорошо - это как?

• Для начала привести к палитре
• А дальше посмотрим 😏

Что такое палитра?

            :root {
              --accent: #5181b8
              --text: #000000
              --light: #a1c1d8
              --dark: #012168
            }
        

- ограниченный набор цветов интерфейса

Какие цвета у нас есть в коде?

1. HEX

# ff ff ff

Какие цвета у нас есть в коде?

1. HEX

HEX

Какие цвета у нас есть в коде?

2. RGB() RGBA()

rgb( 123, 234, 110)

rgb( 123, 234, 110, 0.7)

rgb( 123 234 110)

rgb( 123 234 110 / 0.7)

RGB - разные синтаксисы

Новый синтаксис – color: rgb ( R G B / A );
color: rgb ( R G B );

Средний синтаксис – color: rgb ( R, G, B );
color: rgb ( R, G, B, A );

Старый синтаксис – color: rgb ( R, G, B );
color: rgba ( R, G, B, A );

RGB + RGBA

Сложно настраивать руками

Какие цвета у нас есть в коде?

4. именованные цвета

color: black;

background-color: white;

Какие цвета у нас есть в коде?

4. именованные цвета - 148 цветов

Какие цвета у нас есть в коде?

5. возможно, даже ... HSL() HSLA()

Hue

Тон цвета, представленный в виде угла цветового круга.

Saturation

Насыщенность цвета

Lightness

«Светлота» цвета

HSL - разные синтаксисы

Новый синтаксис – color: hsl ( H S L / A );
color: hsl ( H S L );

Средний синтакис – color: hsl ( H, S, L );
color: hsl ( H, S, L, A );

Старый синтакис – color: hsl ( H S L );
color: hsla ( H, S, L, A );

HSL

Просто настраивать руками

Как привести их все к палитре?

Нужно как-то соотнести. Желательно автоматически.

Как мы можем сравнить два цвета?

Расстояние между двумя точками в пространстве:

³ (r² + g² + b²)

Как мы можем сравнить два цвета?

Почему не rgb-куб:

rgb(100, 100, 100) rgb(200, 100, 100) r = 100

rgb(100, 100, 100) rgb(100, 200, 100) r = 100

rgb(100, 100, 100) rgb(100, 100, 200) r = 100

Одинаковое расстояние - разное визуальное изменение.

Как мы можем сравнить два цвета?

Lab

LAB()

Система, равномерная для человеческого глаза

Lightness

CIE-яркость

Может быть больше 100%!

B

От синего до желтого

A

От красного до зеленого

Как мы можем сравнить два цвета?

Считаем расстояние и заменяем

³ (l² + c² + h²)

Технически - colord

Технически - colord

            import { colord, extend } from "colord";

            import labPlugin from "colord/plugins/lab";

            extend([labPlugin]);
            const result = colord('#5181b8').toLab();
            // => { l: 73.13, a: 24.49,b: 63.71, alpha: 1 }
        

Технически

            const lab1 = { l: 22.56, a: 34.74, b: 62.97, alpha: 1 };
            const lab2 = { l: 52.37, a: -4.25, b: -34.48, alpha: 1 };
            const D = Math.sqrt(
            (lab1.l - lab2.l)^2 +
            (lab1.a - lab2.a)^2 +
            (lab1.b - lab2.b)^2 +
            (lab1.alpha - lab2.alpha)^2
            );
        

Технически

            colors.forEach((color) => {
            const result = palette.reduce((acc, paletteColor) => {
            const d = distance(color, paletteColor);
            if(d < acc.d) { /* заменяем */  }
            return acc;
            }, {name: null, d: Infinity } )
                }
        

Технически - postCSS

            root.walkDecls(declaration => {
            /* определяем, что это цвет */
            /* подбираем нужный из палитры */
            declaration.value = newRightColor;
            });

Хотим сделать хорошо

Хорошо - это как?

• Привести в палитру - ✅
• Построение простых цветовых схем

Дальше оперируем переменными

Одинаковый цветовой угол

Выделим в отдельную переменную

Цветовая схема зависит только от акцентного цвета

Простая цветовая схема

Управляем цветами через одну ручку!

Хотим сделать хорошо

Хорошо – это как?

• Привести в палитру - ✅
• Построение простых цветовых схем - ✅
• Темная тема

Темная тема - это не светлая

Это значит, что в HSL мы будем оперировать светловой.

hsl(123, 50%, 80%) - светлый цвет

hsl(123, 50%, 20%) - темный цвет

Вернемся к схеме

Вернемся к схеме и вынесем светлоту

Вернемся к схеме и вынесем светлоту

                    [light] {
                      --l-100: 100%;
                      --l-30: 30%;
                      --l-98: 98%;
                      --l-2: 2%;
                      --l-60: 60%;
                      --l-90: 90%;
                    }
                    

                    [dark] {
                      --l-100: 0%;
                      --l-30: 70%;
                      --l-98: 2%;
                      --l-2: 98%;
                      --l-60: 40%;
                      --l-90: 10%;
                    }
                

Dark Light

LCH()

CIE LAB в полярных координатах

HUE

Угол цветового круга (другого!)

Chroma

Количество цвета

Lightness

CIE яркость

Повторим по другому

Dark Light

Все ли так хорошо?

Что мы видим? (подробнее)

Цветовой охват

- множество цветов, которое может отобразить монитор.

sRGB (люминофоры)

sRGB

P3

P3 как задать цвет?

color( sRGB 1 1 1 );

P3 как задать цвет?

Акценты для apple

            p {
              color: #00c2c9;
            }
            @supports (color: lch(0% 0 0)) {
              p {
               color: lch(70% 50 200);
              }
            }
        

Относительный колориметрический метод

Относительный колориметрический метод

Мораль: проверяйте на разных экранах

Хотим сделать хорошо

Хорошо - это как?

• Привести в палитру - ✅
• Построение простых цветовых схем - ✅
• Темная тема - ✅
• Яркие акценты - ✅

Еще несколько удобных вещей в будущем

Хотим сделать хорошо

Хорошо - это как?

• Привести в палитру - ✅
• Построение простых цветовых схем - ✅
• Темная тема - ✅
• Яркие акценты - ✅
• Удобные цвета для состояний

Удобные цвета для состояний

            :root {
              --button_bg: hsl(200 50% 50%)
              --button_bg_hover: hsl(200 50% 60%)
              --button_bg_active: hsl(200 50% 40%)
            }
        

Удобные цвета для состояний

            :root {
              --common_l: 50%;
              --hover_l: calc(var(--common_l) + 10%);
              --active_l: calc(var(--common_l) - 10%);
              --button_bg: hsl(200 50% var(--common_l));
              --button_bg_hover: hsl(200 50% var(--hover_l));
              --button_bg_active: hsl(200 50% var(--active_l));
            }
        

Удобные цвета для состояний

            :root {
              --common_l: 50%;
              --hover_l_diff: 10%;  --active_l_diff: -10%;
              --button_bg: hsl(200 50% var(--common_l));
              --button_bg_hover: 
                   hsl(200 50% calc(var(--common_l) + var(--hover_l_diff)));
              --button_bg_active:
                   hsl(200 50% calc(var(--common_l) + var(--active_l_diff)));
            }
        

Удобные цвета для состояний

            :root {
              --button_bg: hsl(200 50% 50%);
              --button_bg_hover: 
                   hsl(from var(--button_bg) h s calc(l + 10%));
              --button_bg_active:
                   hsl(from var(--button_bg) h s calc(l - 10%));
            }
        

Относительный синтаксис

Относительный синтаксис цветов

Относительный синтаксис цветов

Можно полифиллить, но не в рантайме.

Пока лучше так 😭

            :root {
              --common_l: 50%;
              --hover_l_diff: 10%;  --active_l_diff: -10%;
              --button_bg: hsl(200 50% var(--common_l));
              --button_bg_hover: 
                   hsl(200 50% calc(var(--common_l) + var(--hover_l_diff)));
              --button_bg_active:
                   hsl(200 50% calc(var(--common_l) + var(--active_l_diff)));
            }
        

Хотим сделать хорошо

• Привести в палитру - ✅
• Построение простых цветовых схем - ✅
• Темная тема - ✅
• Яркие акценты - ✅
• Удобные цвета для состояний - ✅
• Контрасты

Текст на пользовательском фоне

В этой презентации много примеров цвета.

Текст на пользовательском фоне

            .color {
              background-color: var(--c);
              height: 1em;
              min-width: 1em;
              ...
            }
        

Текст на пользовательском фоне

            .color {
              background-color: var(--c);
              color: color-contrast(var(--c) vs #fff, #000);
              height: 1em;
              min-width: 1em;
              ...
            }
        

color-contrast()

color-contrast()

Сделали хорошо!

• Привести в палитру - ✅
• Построение простых цветовых схем - ✅
• Темная тема - ✅
• Яркие акценты - ✅
• Удобные цвета для состояний - ✅
• Контрасты - ✅

Источники и ссылки

• Про палитры "Дизайн-система на JSON"
• Основы теории цвета на хабре
• Основы ЦВЕТОВОГО восприятия на cambridgeincolor
• Перевод статьи Лии Веру про LCH
• Лия Веру про построение темной темы c помощью LCH
• Про цвета вне гаммы на cambridgeincolor
• Про цвета вне гаммы на creativepro

София Валитова из Cube

Презентация сделана с помощью Shower.