Руководство по современным цветам CSS с помощью RGB, HSL, HWB, LAB и LCH

Краткое описание ↬

Знаете ли вы, что выбранная вами цветовая палитра может повлиять на то, сколько энергии использует ваш сайт? Даже более экологичный выбор цветов может снизить влияние на время автономной работы мобильных устройств. В этой статье Мишель Баркер делится советами о не столь очевидных вещах, которые вы должны иметь в виду при работе с цветами в CSS сегодня.

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

Содержание статьи

Общеизвестные значения цвета

Есть много разных способов определения цвета в CSS. Именованные цвета CSS — это один из самых простых способов раскрасить элемент:

  .my-element {
  цвет фона: красный;
}

Их очень мало, и они редко соответствуют проектам, которые мы создаем! Мы также можем использовать шестнадцатеричные (шестнадцатеричные) значения цвета. Этот код дает нашему элементу красный цвет фона:

  .my-element {
  цвет фона: # ff0000;
}

Если вы не специалист по цвету, шестнадцатеричные значения очень трудно прочитать. Маловероятно, что вы сможете угадать цвет элемента, прочитав шестнадцатеричное значение. При создании веб-сайта дизайнер может дать нам шестнадцатеричное значение цвета, но если бы они попросили нас сделать его, скажем, на 20% темнее, нам было бы сложно сделать это, настроив шестнадцатеричное значение без наглядного руководства или цвета. сборщик.

RGB

Обозначение RGB (красный, зеленый, синий) — это альтернативный способ записи цветов, дающий нам доступ к тому же диапазону цветов, что и шестнадцатеричные значения, в гораздо более удобочитаемой форме. Для этого в CSS есть функция rgb () . Цвета на полотне складываются: чем выше доля красного, зеленого и синего, тем светлее будет полученный цвет. Если использовать только красный канал, результат будет красным:

  .my-element {
  цвет фона: rgb (255, 0, 0);
}

Установка максимального значения красного, зеленого и синего каналов приведет к появлению белого цвета:

  .my-element {
  цвет фона: rgb (255, 255, 255);
}

Мы также можем добавить альфа-канал (для прозрачности), используя функцию rgba () :

  .my-element {
  цвет фона: rgba (255, 0, 0, 0,5); // прозрачность 50%
}

.my-element {
  цвет фона: rgba (255, 0, 0, 1); // полностью непрозрачный
}

rgb () и rgba () позволяют нам до некоторой степени «смешивать» цвета в нашем коде, но результаты могут быть несколько непредсказуемыми.

HSL

Совсем недавно мы смогли использовать значения HSL (оттенок, насыщенность, яркость) с функциями цвета hsl () и hsla () . Как разработчик, они гораздо более интуитивно понятны, когда дело доходит до настройки значений цвета. Например, мы можем получить более темные и более светлые варианты одного и того же цвета, настроив параметр lightness :

  .my-element {
  цвет фона: hsl (0deg, 100%, 20%); // темно-красный
}

.my-element {
  цвет фона: hsl (0deg, 100%, 50%); // средний красный
}

.my-element {
  цвет фона: hsl (0 градусов, 100%, 80%); // светло-красный
}

Три образца цвета, полученные в результате предыдущего кода, в диапазоне от темно-красного до светло-красного — (Большой превью)

Параметр оттенок представляет положение на цветовом круге и может принимать любое значение от 0 до 360 градусов . Функция также принимает единицы измерения (например, 0,5 оборота ) и безразмерные значения.

Все следующие действительны:

  .my-element {
  цвет фона: hsl (180 градусов, 50%, 50%);
}

.my-element {
  цвет фона: hsl (0,5 оборота, 50%, 50%);
}

.my-element {
  цвет фона: hsl (180, 50%, 50%);
}

Совет : Удерживая нажатой SHIFT и щелкая образец цвета в инспекторе в инструментах разработчика Chrome и Firefox, значение цвета будет переключаться между шестнадцатеричным, RGB и HSL!

hsl () и hsla () хорошо поддаются манипуляции с настраиваемыми свойствами, как мы вскоре увидим.

`currentColor`

Ключевое слово currentColor заслуживает упоминания как еще один способ установки цвета для элемента, который существует уже некоторое время. Это эффективно позволяет нам использовать текущий цвет текста элемента в качестве переменной. Он довольно ограничен по сравнению с настраиваемыми свойствами, но часто используется для установки цвета заливки значков SVG, чтобы они соответствовали цвету текста их родительского элемента. Об этом читайте здесь.

Больше после прыжка! Продолжить чтение ниже ↓

Современный цветовой синтаксис

Цветовой модуль CSS уровня 4 предоставляет нам более удобный синтаксис для наших цветовых функций, который широко поддерживается в браузерах. Нам больше не нужно, чтобы значения разделялись запятыми, а функции rgb () и hsl () могут принимать необязательный альфа-параметр, разделенный косой чертой:

  .my-element {
  / * необязательное значение альфа дает нам непрозрачность 50% * /
  цвет фона: hsl (0 100% 50% / 0,5);
}

.my-element {
  / * Без значения альфа фон полностью непрозрачен * /
  цвет фона: hsl (0 100% 50%);
}

Новые функции цвета CSS

HWB

HWB означает оттенок, белизну и черноту. Как и HSL, оттенок может быть где угодно в диапазоне от 0 до 360. Два других аргумента контролируют, сколько белого или черного смешивается с этим оттенком, вплоть до 100% (что приведет к полностью белому или полностью черному цвету). Если смешать равное количество белого и черного, цвет становится все более серым. Мы можем думать об этом как о смешивании красок. Это может быть особенно полезно для создания монохромных цветовых палитр

Пять образцов цветов, полученных из цветов HWB с разным количеством белого / черного — (Большой превью)

Попробуйте это демо (работает только в Safari):

См. Pen [HWB color (Safari only)] (https://codepen.io/smashingmag/pen/xxLmOgV) Мишель Баркер.

См. Цвет Pen HWB (только Safari) Мишель Баркер.

LAB

LAB и LCH определены в спецификации как независимые от устройства цвета . LAB — это цветовое пространство, доступное в программном обеспечении, таком как Photoshop, и рекомендуется, если вы хотите, чтобы цвет на экране выглядел так же, как, скажем, напечатанный на футболке. Он использует три оси: яркость, за которой следует ось a (зеленый к красному) и ось b (синий к желтому).

Яркость выражается в процентах, как и HSL, но на самом деле может превышать 100% при использовании цветовой функции lab () . Очень яркие белые цвета могут использовать процентное содержание до 400%. Значения для осей a и b могут варьироваться от положительных до отрицательных. Два отрицательных значения приведут к окраске в сторону зеленого / синего конца спектра, а два положительных значения могут дать более оранжевый / красный оттенок.

  .my-element {
  цвет фона: лаборатория (80% 100 50); // красновато-розовый
}

.my-element {
  цвет фона: лаборатория (80% -80 -100); // синий / бирюзовый
}

Образец красного / розового цвета с положительными значениями a / b, образец синего / бирюзового цвета с отрицательными значениями a / b — (Большой превью)

См. Перо [LAB Color (Safari only)] (https://codepen.io/smashingmag/pen/JjywKNK) Мишель Баркер.

См. Pen LAB Color (только Safari) Мишель Баркер.

LCH

LCH означает легкость, насыщенность и оттенок. Как и в случае с LAB, легкость может составлять процент, превышающий 100%. Подобно HSL, оттенок может быть в диапазоне от 0 до 360. Цветность представляет собой количество цвета, и мы можем думать об этом как о насыщенности в HSL. Но цветность может превышать 100 — на самом деле, она теоретически неограниченна. Пример использования:

  .my-element {
  цвет фона: lch (80% 100 50);
}

.my-element {
  цвет фона: lch (80% 240 50); // этот цвет будет за пределами отображаемого диапазона современных браузеров
}

Однако сегодня существует ограничение на количество цветов, которое браузеры и мониторы могут отображать (подробнее об этом чуть позже), поэтому значения выше 230 вряд ли будут иметь значение — цветность уменьшается до тех пор, пока она не окажется в пределах допустимого диапазона.

Четыре образца цвета LCH с красным оттенком, различные уровни цветности — Конечный цвет справа выходит за пределы отображаемого диапазона (гаммы), поэтому никакой разницы не ощущается. (Большой превью)

Зачем нам LAB и LCH, когда у нас есть HSL? Одна из причин заключается в том, что использование LAB или LCH дает нам доступ к гораздо большему диапазону цветов. LCH и LAB созданы, чтобы дать нам доступ ко всему спектру человеческого зрения. Кроме того, HSL и RGB имеют несколько недостатков: они не являются однородными по восприятию, а в HSL увеличение или уменьшение яркости имеет совершенно разный эффект в зависимости от оттенка.

В этой демонстрации мы можем увидеть резкий контраст между LCH и HSL, нажав на переключатель оттенков серого. Для полос оттенка и насыщенности HSL есть явные различия в воспринимаемой легкости каждого квадрата, даже несмотря на то, что компонент «легкости» функции HSL одинаков! Между тем, полосы цветности и оттенка на стороне LCH имеют почти одинаковую воспринимаемую легкость.

Образцы цветов LCH и HSL сравниваются бок о бок — Применяя фильтр оттенков серого, мы можем видеть, что цвета LCH (слева) имеют почти однородную яркость при настройке цветности и оттенка по сравнению с тем, когда мы настраиваем оттенок и насыщенность цветов HSL (справа), где видны различия в легкости. (Большой превью)

Мы также можем увидеть большую разницу при использовании цвета LCH для градиентов. Оба этих градиента начинаются и заканчиваются одним и тем же цветом (со значениями LCH, преобразованными в эквиваленты HSL с помощью этого конвертера). Но градиент LCH проходит через яркие оттенки синего и фиолетового посередине, тогда как градиент HSL по сравнению с ним выглядит более мутным и размытым.

LCH и HSL градиентные полосы от синего до розового — (Большой превью)

LAB и LCH, возможно, синтаксически немного менее интуитивно понятны, но ведут себя так, чтобы их поведение было более понятным для человеческого глаза. В своей статье «Цвет LCH в CSS: что, почему и как?» Леа Веру подробно объясняет преимущества цвета LCH. Она также построила палитру цветов LCH.

Как и другие функции цвета, hwb () lab () и lch () также могут принимать необязательный альфа-параметр.

  .my-element {
  цвет фона: lch (80% 240 50 / 0,5); // Результирующий цвет имеет непрозрачность 50%
}

Поддержка браузера и цветовые пространства

hwb () lab () и lch () в настоящее время поддерживаются только в Safari. Их можно сразу начать использовать, предоставив запасной вариант для браузеров, не поддерживающих их. Браузеры, не поддерживающие функцию цвета, просто проигнорируют второе правило:

  .my-element {
  цвет фона: lch (55% 102 360);

  / * Цвет LCH преобразован в RGB с помощью инструмента Lea Verou: https://css.land/lch/ * /
  цвет фона: rgb (98,38% 0% 53,33%);
}

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

  .my-element {
  дисплей: нет;
}

/ * Отображать этот элемент, только если браузер поддерживает lch () * /
@supports (background-color: lch (55% 102 360)) {
  .my-element {
    дисплей: блок;
    цвет фона: lch (55% 102 360);
  }
}

Стоит отметить, как объясняет Ли в своей статье, что, хотя современные экраны способны отображать цвета помимо RGB, большинство браузеров в настоящее время поддерживают цвета только в цветовом пространстве sRGB. В демонстрации цвета LAB вы можете заметить, что перемещение ползунков за определенную точку фактически не влияет на цвет, даже в Safari, где поддерживаются lab () и lch () . Использование значений за пределами диапазона sRGB будет иметь эффект только тогда, когда оборудование и браузеры достаточно продвинуты.

Safari теперь поддерживает функцию color () которая позволяет отображать цвета в пространстве P3, но пока они ограничены цветами RGB и пока не дают нам всех преимуществ LAB и LCH.

  .my-element {
  фон: rgb (98,38% 0% 53,33%); // ярко-розовый
  фон: цветной (display-p3 0,947 0 0,5295); // эквивалент в цветовом пространстве P3
}

Рекомендуемая литература : «Широкая цветовая гамма в CSS с Display-P3» Никиты Васильева

Доступность

Когда они получат широкую поддержку, возможно, LAB и LCH помогут нам выбрать более доступные цветовые комбинации. Текст переднего плана должен иметь одинаковый коэффициент контрастности с цветами фона с разными значениями оттенка или цветности, если их значение яркости остается неизменным. В настоящее время с цветами HSL дело обстоит иначе.

Управление цветом

Более широкий диапазон функций цвета означает, что у нас есть больше возможностей, когда дело доходит до управления цветами в нашем приложении. Часто нам требуется несколько вариантов одного цвета в нашей системе дизайна, от темного до светлого.

Пользовательские свойства

Пользовательские свойства CSS позволяют нам сохранять значения для повторного использования в наших таблицах стилей. Поскольку они допускают частичные значения свойств, они могут быть особенно полезны для управления значениями цвета и управления ими. HSL особенно хорошо подходит для настраиваемых свойств благодаря своей интуитивности. В предыдущей демонстрации я использую их для настройки оттенка для каждого сегмента цветовой полосы путем вычисления значения - hue на основе индекса элемента (определенного в другом настраиваемом свойстве).

  li {
  --hue: calc (var (- i) * (360/10));
  фон: hsl (var (- hue, 0) 50% 45%);
}

Мы также можем делать такие вещи, как вычисление дополнительных цветов (цветов с противоположных сторон цветового круга). Об этом написано много, поэтому я не буду здесь останавливаться на достигнутом, но если вам интересно, то статья Сары Суейдан об управлении цветом с помощью HSL — отличное место для начала.

Переход с Hex / RGB на HSL

Цвета RGB могут удовлетворить ваши потребности до определенной степени, но если вам нужна гибкость, чтобы иметь возможность получать новые оттенки из вашей базовой цветовой палитры, вам может быть лучше переключиться на HSL (или LCH, когда он будет поддерживаться). Я бы порекомендовал использовать для этого настраиваемые свойства.

Примечание : Существует множество онлайн-ресурсов для преобразования шестнадцатеричных значений или значений RGB в HSL (вот один пример).

Возможно, у вас есть цвета, сохраненные как переменные Sass:

  $ primary: rgb (141 66 245);

При преобразовании в HSL мы можем назначить пользовательские свойства для значений оттенка, насыщенности и яркости. Это позволяет легко создавать более темные или более светлые, более или менее насыщенные варианты исходного цвета.

 : root {
  --h: 265;
  --s: 70%;
  --l: 50%;
        
  --primary: hsl (var (- h) var (- s) var (- l));
  --primaryDark: hsl (var (- h) var (- s) 35%);
  --primaryLight: hsl (var (- h) var (- s) 75%);
}

HSL может быть невероятно полезным для создания цветовых схем, как подробно описано в статье «Построение цветовой схемы» Адама Аргайла. В статье он создает светлые, темные и неяркие цветовые схемы, взяв за основу фирменный цвет. Мне нравится этот подход, потому что он позволяет детально контролировать вариант цвета (например, уменьшать насыщенность цветов в «темной» схеме), но при этом сохраняет большое преимущество настраиваемых свойств: обновление цвета бренда всего за одно место будет перенесено для всех цветовых схем, так что это потенциально может сэкономить нам много работы в будущем.

Цветовые функции Sass

Когда дело доходит до смешивания и настройки цветов, Sass предоставляет функции цвета, которые позволяют нам делать именно это в течение многих лет. Мы можем насытить или обесцветить, осветлить или затемнить, даже смешать два цвета вместе. В некоторых случаях они отлично работают, но у них есть некоторые ограничения: во-первых, мы можем использовать их только во время компиляции, а не для управления цветами в браузере. Во-вторых, они ограничены RGB и HSL, поэтому страдают от тех же проблем единообразия восприятия, как мы можем видеть в этой демонстрации, где цвет становится все более ненасыщенным, но кажется все более светлым при преобразовании в оттенки серого.

Образцы красного цвета становятся все более ненасыщенными, с фильтром оттенков серого, примененным к верхней половине — К верхней полосе применен фильтр оттенков серого. Когда мы уменьшаем насыщенность основного красного цвета с помощью Sass (внизу), мы видим, что цвет на самом деле становится светлее. (Большой превью)

Чтобы обеспечить однородность легкости, мы могли бы использовать настраиваемые свойства с LCH аналогично HSL выше.

  li {
  --hue: calc (var (- i) * (360/10));
  фон: lch (50% 45 var (- оттенок, 0));
}

Смешение цветов и манипуляции

Смешивание цветов

Единственное, чего CSS пока не позволяет нам, так это смешивать цвета в браузере. Это все скоро изменится: спецификация цвета CSS уровня 5 (рабочий проект) содержит предложения по функциям смешивания цветов, которые звучат довольно многообещающе. Первая — это функция color-mix () которая смешивает два цвета так же, как функция Sass mix () . Но color-mix () в CSS позволяет нам указывать цветовое пространство и по умолчанию использует LCH, в результате чего достигается превосходное смешивание.

Обновление : цветовой микс () и цветовой контраст () теперь доступны за флагом в Safari 15! Ознакомьтесь с этой статьей о том, как включить экспериментальные функции в Safari.

Цвета не обязательно должны быть LCH при передаче в качестве аргументов, но интерполяция будет использовать указанное цветовое пространство. Мы можем указать, сколько каждого цвета нужно смешать, аналогично остановкам градиента:

  .my-element {
  / * равное количество красного и синего * /
  background-color: color-mix (в лч, красный, синий);
}

.my-element {
  / * 30% красный, 70% синий * /
  background-color: color-mix (в лч, красный 30%, синий);
}

Цветовой контраст и доступность

цвет-контраст () — еще одна предлагаемая функция, которая действительно имеет огромное значение для выбора доступных цветов. Фактически, он разработан с учетом в первую очередь доступности. Это позволяет браузеру выбрать наиболее подходящее значение из списка, сравнивая его с другим цветом. Мы даже можем указать желаемый коэффициент контрастности, чтобы наши цветовые схемы соответствовали рекомендациям WCAG. Цвета оцениваются слева направо, и браузер выбирает первый цвет из списка, который соответствует желаемому соотношению. Если ни один из цветов не соответствует этому соотношению, выбранный цвет будет наиболее контрастным.

  .my-element {
  цвет: пшеничный;
  цвет фона: цвет-контраст (пшеница против бисквитного, темно-золотистого, оливкового, сиенского, темно-зеленого, бордового по сравнению с AA);
}

Поскольку сейчас это не поддерживается ни одним браузером, я позаимствовал этот пример прямо из спецификации. когда браузер оценивает выражение, результирующий цвет будет темно-зеленым поскольку он первым соответствует коэффициенту контрастности AA по сравнению с пшеницей цветом текста.

]

Поддержка браузера

Спецификация цвета уровня 5 в настоящее время находится в рабочем проекте, что означает, что ни один из браузеров еще не поддерживает функции color-Contrast () и color-mix () а их синтаксис зависит от изменение. Но это определенно выглядит как светлое будущее для цветной печати в Интернете!

Воздействие цветов на окружающую среду

Знаете ли вы, что выбранная вами цветовая палитра может повлиять на то, сколько энергии потребляет ваш сайт? На OLED-экранах (которые используются в большинстве современных телевизоров и ноутбуков) более темные цвета будут потреблять значительно меньше энергии, чем светлые: белый — больше всего, а черный — меньше всего. По словам Тома Гринвуда, автора книги «Устойчивый веб-дизайн», синий также более энергоемкий, чем цвета в красной и зеленой областях спектра. Чтобы уменьшить воздействие ваших приложений на окружающую среду, рассмотрите возможность использования более темной цветовой схемы, использования меньшего количества синего или включения темного режима для ваших пользователей. В качестве дополнительного бонуса более экологичный выбор цветов также может снизить влияние на время автономной работы мобильных устройств.

Hexplorer, Роб ДиМарзо
Научитесь понимать шестнадцатеричные цвета с помощью этой интерактивной визуализации.
Палитра цветов LCH, Леа Веру и Крис Лилли
Получите цвета LCH и их аналоги в RGB.
Выбор цвета HWB
Визуализация цветов HWB и преобразование в HSL, RGB и шестнадцатеричный.
Цветные маркеры союзников, Стефани Эклс
Генератор доступных цветных маркеров.

Ресурсы

«Руководство для ботаников по раскраске в Интернете», Сара Драснер, CSS-Tricks
«Цвета LCH в CSS: что, почему и как?», Ли Веру
«Лучшие цветовые функции в CSS?» Крис Койер, CSS-Tricks
«Построение цветовой схемы», Адам Аргайл, Web.dev
«Использование цветов HSL в CSS», Ахмад Шахид, Smashing Magazine
«При переходе с Hex и RGB на HSL», Сара Суэйдан
«Улучшение цвета в Интернете», Дин Джексон, блог Webkit

Smashing Редакционное "width =" 35 "height =" 46 "loading =" lazy "decoding =" async

(vf, il)

Руководство по современным цветам CSS с помощью RGB, HSL, HWB, LAB и LCH — Smashing Magazine