Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 <p>Вы знаете, что можно динамически менять цветовое оформление страницы без JavaScript или CSS-препроцессоров? Это возможно благодаря магии кастомных свойств CSS, цветовой модели HSL и функции calc(). Они работают с любым фреймворком и веб-технологией без лишних телодвижений. Да здравствует CSS!</p>

2 <p>В демо на CodePen можно выбрать основной и дополнительный цвета и создать завершённую систему. Это реализовано на ванильном CSS. JavaScript здесь используется только для динамического изменения цветов.</p>

3 <h2>Содержание</h2>

4 <ul><li><a>Что нам дают CSS-препроцессоры</a></li>

5 <li><a>Настраиваем окружение</a></li>

6 <li><a>Корректируем значения с помощью HSL</a></li>

7 <li><a>Получаем комплементарные цвета и триадические сочетания</a></li>

8 <li><a>Воспроизводим mix()</a></li>

9 <li><a>Создаём функцию color-contrast()</a></li>

10 <li><a>Заключение</a></li>

11 </ul><h2>Что нам дают CSS-препроцессоры</h2>

12 <p>Когда заходит речь о системах цветов, на ум приходят<a>несколько полезных функций Sass</a>. Вот наиболее распространённые:</p>

13 <ul><li>lighten, darken();</li>

14 <li>complement();</li>

15 <li>hue();</li>

16 <li>mix();</li>

17 <li>contrast-color().</li>

18 </ul><p>Некоторые из этих трансформаций можно воссоздать с помощью CSS-фильтров. Например, lighten и darken - это всего лишь значение lightness из HSL. Трансформация hue - это H из HSL. Дополнительные цвета можно рассчитывать с помощью инверсии hue, для этого достаточно прибавить к или отнять 180 от соответствующего значения. Это переносит значение hue на противоположную сторону цветового круга. Функция calc() и кастомные свойства позволяют трансформировать цвета с помощью одного значения.</p>

19 <p>Ниже рассказывается, как с помощью кастомных свойств CSS и функции calc() воссоздавать lighten() darken(), comlement() и даже триадические сочетания. Также вы узнаете лайфхак, который позволяет делать крутые штуки с color-contrast(). Эти возможности реализованы во всех современных браузерах. Но для Internet Explorer 11 и ниже придётся использовать препроцессор.</p>

20 <h2>Настраиваем окружение</h2>

21 <p>В первую очередь нужно разложить цвета на значения hue, saturation и lightness (тон, насыщенность и светлота) цветовой модели HSL. Можно также использовать значение альфа - прозрачность. Например, переменная для цвета red выглядит так:</p>

22 <p>Объявляем пользовательские свойства со значениями HSL.</p>

23 <h2>Корректируем значения с помощью HSL</h2>

24 <p>Теперь значения из примера выше можно использовать для корректирования цветов. Начать стоит с воссоздания функций lighten и darken.</p>

25 <p>Определим, на сколько светлее или темнее должен стать цвет. Эти значения сохраним в дополнительных кастомных свойствах.</p>

26 <p>После определения трансформаций можно записать новые значения. Показатель lightness можно вычислить так.</p>

27 <p>Всё вместе выглядит так.</p>

28 <p>Код может показаться сложным. Но здесь только используются базовые значения hue и saturation и уточняется значение lightness.</p>

29 <blockquote><p><strong>Читайте также:<a>7 необычных приёмов и инструментов HTML и CSS</a></strong></p>

30 </blockquote><p>Чтобы реализовать функцию darken, можно вычесть значение lightness или прибавить его, если вам нужны отрицательные значения.</p>

31 <h2>Получаем комплементарные цвета и триадические сочетания</h2>

32 <p><em>Цветовой круг HSL</em></p>

33 <p>Чтобы получать комплиментарные или триадические оттенки, нужно уточнять значение hue базового цвета. Можно создать отдельные переменные или использовать шорткаты и помнить, что цветовой круг HSL изменяется по часовой стрелке от нуля до 360 градусов (см. иллюстрацию выше). То есть чтобы получить комплементарный оттенок, необходимо отнять или прибавить к значению 180 градусов.</p>

34 <p><em>Получаем комплементарный оттенок</em></p>

35 <p>Чтобы получить триадическое сочетание, нужно разделить цветовой круг на три части. То есть оттенки можно получить, добавив к базовому значению 120 и 240 соответственно.</p>

36 <p><em>Триадические сочетания</em></p>

37 <h2>Воспроизводим mix()</h2>

38 <p>Режим смешивания mix() более сложный по сравнению с lighten() и darken(). Но его можно воспроизвести с помощью HSL-вычислений.</p>

39 <p>Чтобы смешать цвета, надо определить их.</p>

40 <p>Затем надо получить средние значения.</p>

41 <p>Теперь можно получить смешанный цвет.</p>

42 <h2>Создаём функцию color-contrast()</h2>

43 <p>Ещё одна ключевая возможность CSS-препроцессоров - использование логических значений. Они позволяют вычислять доступные цвета с помощью функции color-contrast().</p>

44 <p>Эта функция принимает серию значений: базовый цвет, который выступает в качестве контрастного, значения light и dark. Функция возвращает самый контрастный цвет по отношению к базовому. Это невозможно воспроизвести на чистом CSS, поэтому понадобятся дополнительные хаки.</p>

45 <p><em>Наглядная демонстрация возможностей системы цветов</em></p>

46 <p>Сначала определяем порог контрастности.</p>

47 <p>Затем проверяем, не превышает ли значение lightness порог контрастности. Для этого используем<a>демонстрационную версию</a>системы цветов. Если порог выше яркости основного цвета, возвращается значение light, так как мы умножаем значение lightness на - 100. Например, значение lightness составляет 40, а contrastThreshhold 60. Разница равна - 20. Умножаем это значение на - 100 и получаем 2000. Это белый цвет, так как при значении lightness 100 и выше всегда получается белый.</p>

48 <p>Когда значение lightness выше contrastThreshhold, получаем обратную ситуацию. Если lightness 90, а contrastThreshold 60, разница составляет 30. Умножаем это значение на - 100 и получаем -3000. Это чёрный цвет, так как lightness ниже нуля.</p>

49 <p>Возвращаем lightness как L в HSL. Это выглядит так.</p>

50 <p>Поскольку HSL - это то, как компьютер, а не пользователь понимает lightness, этот инструмент не идеальный. То есть у кастомных свойств и функции calc() есть недостатки, как у любого другого инструмента.</p>

51 <h2>Заключение</h2>

52 <p>В статье рассмотрели удобные способы работы с кастомными свойствами и функцией calc(). Если у вас есть вопросы или дополнения, пишите их в комментариях.</p>

53 <p><em>Адаптированный перевод статьи<a>Calculating Color: Dynamic Color Theming with Pure CSS</a>by Una Kravets.</em></p>