Определение цветовой палитры и темы может быть большой работой, особенно если учитывать контекстные цвета для различных состояний элементов. Хотя CSS color-mix() смешивает только два цвета, эта маленькая функция может стать ключом к максимальному использованию цветов без максимальных усилий.
Все новые, экспериментальные цветовые возможности CSS появляются не просто так. И есть причина всего того волнения, которое они вызывают.
Цвета — это сложно.
Определение базовой цветовой палитры может занять много времени и привлечь довольно много заинтересованных сторон. И это еще без учета контекстуальных цветов, таких как hover, активное и неактивное состояние. Определение этих значений требует больше времени, больше внимания к доступности и может привести к раздутой палитре и еще более раздутому набору дизайнерских маркеров.
Это может быть очень сложно 🤹.
Хотя функция CSS color-mix() может смешивать только два цвета, можно ли использовать ее для упрощения цветовой палитры и упорядочивания контекстных значений в разных темах?
Функция CSS Color-Mix()
Функция CSS color-mix() — это экспериментальная функция, которая в настоящее время является частью Color Module 5. В соответствии со своим названием, функция принимает любые два цвета, смешивает их вместе и возвращает маленький цветовой Франкенштейн.
В рамках этой статьи давайте определим, как будут называться эти аргументы на примере.
- Цветовое пространство будет означать
HSL. - Базовый цвет будет означать
red. - Базовый процент будет означать
50% - Цвет смешивания будет означать
белый - Процент смешивания, не показанный в этом примере, будет относиться к значению, описанному позже.
Здесь довольно много движущихся частей, поэтому давайте проведем быструю интерактивную визуализацию, чтобы смоделировать базовый цвет, базовый процент и цвет смешивания.
Как и в случае с любой экспериментальной функцией, синтаксис или функции могут измениться до широкого распространения в браузере. Однако возможности Color Module 5 кажутся достаточно стабильными, чтобы, по крайней мере, начать работу над ними.
На момент написания статьи поддержка в браузерах очень ограничена, то есть практически отсутствует. Функция может быть включена за флагами разработки в Firefox и Safari Technology Preview. Но Интернет развивается быстро, и, вероятно, стоит посетить Color-Mix() на caniuse, чтобы увидеть последнюю (и, надеюсь, самую лучшую) поддержку.
А теперь, когда формальности убраны, возьмите немного темного рома, имбирного пива и сока лайма, и давайте смешивать.
Урок искусства 🎨
Помните, как на уроках рисования вы узнали о цветовом круге?
Первичные цвета были основой круга, а при смешивании они образовывали вторичный слой. Наконец, смешивание вторичного слоя образовывало третичные цвета. Колесо было завершено.
Несмотря на отсутствие визуального колеса, для создания такого же эффекта можно использовать CSS color-mix().
Создание линейного цветового колеса было очень увлекательным занятием и отличным погружением в использование color-mix(). При экспериментировании с новой функцией часто полезно знать, каким должен быть визуальный результат.
Итак, как это работает?
// First: Define the base primary colors
--primary-1: #ff0;
--primary-2: #f00;
--primary-3: #00f;
// Next: Mix the primary colors to create the secondary colors
--secondary-1: color-mix(in srgb, var(--primary-1) 50%, var(--primary-2));
--secondary-2: color-mix(in srgb, var(--primary-2) 50%, var(--primary-3));
--secondary-3: color-mix(in srgb, var(--primary-3) 50%, var(--primary-1));
// Last: Mix the primary and secondary colors to create the tertiary colors
--tertiary-1: color-mix(in srgb, var(--primary-1) 50%, var(--secondary-1));
--tertiary-2: color-mix(in srgb, var(--secondary-1) 50%, var(--primary-2));
--tertiary-3: color-mix(in srgb, var(--primary-2) 50%, var(--secondary-2));
--tertiary-4: color-mix(in srgb, var(--secondary-2) 50%, var(--primary-3));
--tertiary-5: color-mix(in srgb, var(--primary-3) 50%, var(--secondary-3));
--tertiary-6: color-mix(in srgb, var(--secondary-3) 50%, var(--primary-1));
Конечно, когда я учился в художественном классе, у нас был только один набор красок. Поэтому если вы хотели желтый цвет, то был только один желтый. Красный? Была только одна красная. Синяя? Ну, вы поняли идею.
Но веб и CSS предлагают гораздо более широкий выбор цветов в виде «цветовых пространств». Некоторые из этих цветовых пространств могут быть уже знакомы, но некоторые я раньше не использовал, включая четыре новые цветовые функции CSS, которые постепенно получают поддержку.
Цветовые пространства могут рассчитывать свои цвета по-разному. Новые цветовые пространства предоставляют более широкие палитры с более яркими оттенками, чтобы максимально использовать новейшие технологии экранов, такие как дисплеи сверхвысокой четкости retina. Это означает, что один и тот же цвет может выглядеть по-разному в каждом цветовом пространстве.
Зная, что функция CSS color-mix() поддерживает использование различных цветовых пространств, давайте поэкспериментируем с цветовыми пространствами, заменив использование srgb из предыдущего примера на пользовательское свойство, чтобы увидеть, как меняется цветовой круг.
Функция color-mix() не ограничивается смешиванием только HEX-кодов. Фактически, она может смешивать несколько типов цветов одновременно. Предыдущий пример можно модифицировать, чтобы использовать разные типы цветов и получить те же результаты.
// First: Define the base primary colors
--primary-1: yellow;
--primary-2: rgb(255,0,0);
--primary-3: hsl(240,100%,50%);
// Next: Mix the primary colors to create the secondary colors
--secondary-1: color-mix(in srgb, var(--primary-1) 50%, var(--primary-2));
--secondary-2: color-mix(in srgb, var(--primary-2) 50%, var(--primary-3));
--secondary-3: color-mix(in srgb, var(--primary-3) 50%, var(--primary-1));
Смешивание и сопоставление
Воссоздание уроков рисования в детстве — это весело, но эти понятия можно развить и применить более практично к нашим взрослым увлечениям и карьере.
Можно потратить много времени на определение каждой цветовой вариации и оттенка, но функция color-mix() может смешивать значения тем вместе, чтобы заполнить пробелы в вариациях.
Давайте рассмотрим контекстные цвета пользовательского интерфейса, такие как цвета кнопок :hover и :active. Можно потратить много времени на определение этих значений, чтобы убедиться, что они сочетаются с текущей темой и доступны. Но когда темы часто уже включают первичные темные и светлые цвета, можно ли смешивать эти значения для более автоматического создания контекстных цветов?
Хотя подобный эффект можно создать с помощью функции HWB color, увеличив значение черноты цвета кнопки, иногда затемнение кнопки — это не просто смешение черного цвета. Просто спросите любого, кто когда-либо пытался найти идеальную тему для темного режима. Именно в этом color-mix() отличается от функций Sass darken() и lighten(). Функция color-mix() дает более широкий, детальный контроль над тем, как настраиваются цвета, и она не имеет ничего общего с CSS.
Смешивая определенное значение темы, например --color-dark-primary, можно создавать псевдосостояния, оставаясь визуально целостным с остальной темой.
Кроме того, результат color-mix() может быть использован в качестве базового цвета в другой функции color-mix(). Это сделано в демонстрационном примере для определения состояния кнопок :active относительно их состояния :hover.
При указании базового процента цвет смеси смешивается с процентом, который в сумме составит 100%. Если базовый процент равен 75%, процент смешивания будет равен 25%.
:root {
--color-dark-primary: #dedbd2;
}
button {
--btn-bg: #087e8b;
--btn-bg-hover: color-mix(in srgb, var(--btn-bg) 75%, var(--color-dark-primary));
--btn-bg-active: color-mix(in srgb, var(--btn-bg-hover) 80%, var(--color-dark-primary));
background: var(--btn-bg);
&:hover {
background: var(--btn-bg-hover);
}
&:active {
background: var(--btn-bg-active);
}
}
В этом примере значение --btn-bg-hover определяется путем смешивания 75% от --btn-bg с --color-dark-primary. Затем, --btn-bg-active задается путем смешивания 80% --btn-bg-hover с --color-dark-primary снова.
Важно отметить, что при указании базового процента, цвет смешивания смешивается с процентом, который в сумме составит 100%. Если базовый процент равен 75%, то процент смешивания будет равен 25%.
Однако это становится немного сложнее, когда вводится отдельный процент смешивания.
Смешивание мастерства с процентами смешивания
Как дополнительный аргумент для color-mix(), процент смешивания вводит дополнительный уровень мастерства смешивания. В предыдущих примерах без процента смешивания цвет смешивания автоматически использовал бы значение, которое, будучи добавленным к базовому проценту, составляло бы 100.
Если базовый процент равен 50, то процент смешивания будет равен 50. Если базовый процент равен 99, процент смешивания будет равен 1.
Однако указание пользовательского процента смешивания означает, что итоговый процент может не всегда выравниваться.
Хотя в документации W3 достаточно хорошо объясняются расчеты, лежащие в основе этой функциональности, математические выкладки выходят за рамки моих возможностей для четкого объяснения. В конце концов, это урок искусства. Но как можно лучше, насколько я могу это выразить.
--math-bg: color-mix(in srgb, red 20%, white 60%);
В этом примере базовый процент составляет 20, а процент смешивания — 60, что в сумме составляет 80. Это дает нам так называемый альфа-множитель 0.8, где 1 = 100 и 0.8 = 80%.
Чтобы заполнить пробелы, функция умножит проценты базы и наложения на этот альфа-множитель, чтобы увеличить их до 100%, оставаясь при этом относительно их исходных весов.
20% * 100/80 = 25%
60% * 100/80 = 75%
--math-bg: color-mix(in srgb, red 25%, white 75%);
В случае, если проценты основы и наложения составляют более 100, будет использован обратный метод округления до 100. Опять же, математика, стоящая за масштабированием этих значений, а также общие расчеты смешивания выходят за рамки моей компетенции, и для тех, кто заинтересован в углублении в технические аспекты color-mix(), я бы посоветовал обратиться к документации W3.
Тем не менее, математические знания не требуются для приведенной ниже демонстрации, в которой можно изменять процентное соотношение базового и смешанного цветов, чтобы увидеть результат.
Действуя в тени с прозрачностью
Цвета с прозрачностью добавляют еще один уровень к функции color-mix(). Концепция кажется сложной, но после экспериментов непрозрачные цвета смешиваются так же, как и непрозрачные.
:root {
--base-opacity: 50%;
--blend-opacity: 50%;
--base-color: rgba(255, 0, 0, var(--base-opacity));
--blend-color: rgba(0, 0, 255, var(--blend-opacity));
}
#result {
background: color-mix(in lch, var(--base-color) 50%, var(--blend-color));
}
В этом примере базовый цвет — красный, а цвет смешивания — синий. В обычных условиях эти цвета смешиваются, образуя розовый. Однако каждый цвет определен с помощью rgba и непрозрачности 50%.
В результате получается ожидаемый розовый оттенок, но с усредненной непрозрачностью. Если базовая непрозрачность 100%, а непрозрачность смеси 0%, то непрозрачность результата будет 50%. Но независимо от непрозрачности результата, смесь цветов 50/50 сохраняет неизменный розовый оттенок.
Осторожно
Как и у любой экспериментальной или новой функции, у color-mix() есть неизбежные недостатки, которые следует учитывать.
Пользовательские свойства и обратные действия
Поскольку пользовательские свойства CSS поддерживают запасные значения для тех случаев, когда свойство не определено, казалось бы, хорошим подходом будет использование color-mix() в качестве прогрессивного улучшения.
--background-color: color-mix(in srgb, red 50%, blue);
background: var(--background-color, var(--fallback-color));
Если color-mix() не поддерживается, свойство --background-color не будет определено, и поэтому будет использоваться --fallback-color. К сожалению, это работает не так.
В неподдерживаемых браузерах происходит интересная вещь — пользовательское свойство будет определено в самой функции. Вот пример этого из Chrome DevTools.
Поскольку свойство --background-color технически определено, откат не сработает.
Однако это не означает, что color-mix() нельзя использовать постепенно. Ее можно использовать в паре с функцией @supports(), но будьте осторожны, если решите это сделать. Как бы интересно это ни было, с такой ограниченной поддержкой и потенциальными изменениями синтаксиса и/или функциональности, возможно, лучше воздержаться от внедрения этой маленькой жемчужины в целую базу кода.
@supports (background: color-mix(in srgb, red 50%, blue)) {
--background-color: color-mix(in srgb, red 50%, blue);
}
CurrentColor не поддерживается
Мощным элементом CSS является возможность использовать currentColor в качестве значения, сохраняя стили относительно их элемента. К сожалению, эту относительную переменную нельзя использовать в color-mix().
button {
background: color-mix(in srgb, currentColor 50%, white);
}
Была надежда получить еще больший контроль над относительными цветами, но, к сожалению, использование currentColor таким образом не работает. Хотя color-mix() не может достичь такой степени относительных цветов, новый синтаксис относительных цветов также появляется в CSS. Читайте о синтаксисе относительных цветов CSS вместе со Стефаном Джудисом.
Завершение
Хотя color-mix() может быть не таким мощным, как, например, color-contrast(), ему определенно найдется место в поясе инструментов CSS — или в кухонном шкафу. Где угодно.
Варианты использования контекстных цветов интригуют, а интеграция в системы дизайна и темы для потенциального упрощения цветовой палитры при сохранении большой гибкости — это то, где я больше всего хочу поэкспериментировать с этой функцией. Тем не менее, эти эксперименты, скорее всего, еще впереди из-за текущей поддержки браузера.
Лично мне сочетание color-mix() с color-contrast() кажется особенно интересной областью, но без должной поддержки браузера ее будет трудно полностью изучить.
Где бы вы сначала реализовали color-mix()? 🤔
Возможно, его можно было бы использовать как миксин, чтобы примерно повторить функции lighten() и darken() SCSS. Может ли быть больший потенциал в сфере пользовательских тем? Или даже в веб-графических редакторах и инструментах? Может быть, его можно использовать как простой конвертер цветовых форматов в зависимости от возможностей устройства.
Тем не менее, CSS предоставляет Интернету множество новых и интересных ингредиентов. Это лишь вопрос времени, когда мы начнем смешивать невероятные рецепты.
Ресурсы
- Color-Mix() на MDN
- Статистика поддержки на caniuse.com
- Color-Mix() на W3 Color Module 5
- Коллекция демонстраций Color-Mix() на CodePen