Цвет¶

Существует несколько различных способов задания цвета в CSS. В этом модуле мы рассмотрим наиболее часто используемые значения цвета.

CSS подкаст

006: Цвет Часть первая

Перевод на русскийАнглийский оригинал

Цвет является важной частью любого сайта, а в CSS существует множество вариантов типов, функций и обработок цвета.

Как решить, какой тип цвета использовать? Как сделать цвета полупрозрачными? В этом уроке вы узнаете, какие варианты есть, что поможет вам принять правильное решение для вашего проекта и команды.

В CSS существуют различные типы данных, такие как строки и числа. Цвет является одним из этих типов и использует другие типы, такие как числа, для своих определений.

Числовые цвета¶

Вполне вероятно, что первое знакомство с цветами в CSS происходит через числовые цвета. Мы можем работать с числовыми значениями цветов в нескольких различных формах.

Шестнадцатеричные цвета¶

h1 {
    color: #b71540;
}

Шестнадцатеричная нотация (часто сокращаемая до hex) — это сокращенный синтаксис для RGB, который присваивает числовое значение красному, зеленому и синему цветам, которые являются тремя основными цветами.

По данным Web Almanac, hex — самый популярный тип синтаксиса цвета.

Шестнадцатеричные диапазоны — 0-9 и A-F. При использовании шестизначной последовательности они переводятся в числовые диапазоны RGB, которые составляют 0-255 и соответствуют красному, зеленому и синему цветовым каналам соответственно.

Также можно задать альфа-значение для любых числовых цветов. Альфа-значение — это процент прозрачности. В шестнадцатеричном коде к шестизначной последовательности добавляются еще две цифры, и получается восьмизначная последовательность. Например, чтобы задать черный цвет в шестнадцатеричном коде, напишите #000000. Чтобы добавить 50% прозрачности, измените его на #00000080.

Поскольку шестнадцатеричная шкала имеет вид 0-9 и A-F, значения прозрачности, вероятно, не совсем такие, как вы ожидаете. Вот некоторые ключевые, общепринятые значения, добавляемые к черному шестнадцатеричному коду #000000:

0% альфа, т. е. полная прозрачность — 00: #00000000
50% альфа — это 80: #00000080
75% альфа — это BF: #000000BF

Чтобы преобразовать двузначное шестнадцатеричное число в десятичное, нужно взять первую цифру и умножить ее на 16 (поскольку шестнадцатеричное число имеет основание 16), а затем прибавить вторую цифру. На примере BF для 75% альфа:

B равно 11, что при умножении на 16 равно 176
F равно 15
176 + 15 = 191
Значение альфа равно 191-75% от 255

Сокращенная hex запись

Можно также записывать шестнадцатеричные коды в виде трехзначной стенограммы. Трехзначный шестнадцатеричный код — это сокращение эквивалентной шестизначной последовательности. Например, #a4e идентичен #aa44ee. Если добавить альфу, то #a4e8 расширится до #aa44ee88.

RGB (Red, Green, Blue)¶

h1 {
    color: rgb(183, 21, 64);
}

Цвета RGB задаются с помощью цветовой функции rgb(), используя в качестве параметров либо числа, либо проценты. Числа должны находиться в диапазоне 0-255, а проценты — в диапазоне от 0% до 100%. RGB работает по шкале 0-255, поэтому 255 будет эквивалентно 100%, а 0 — 0%.

Чтобы задать черный цвет в RGB, определите его как rgb(0 0 0), то есть ноль красного, ноль зеленого и ноль синего. Черный цвет также можно определить как rgb(0%, 0%, 0%). Белый цвет — полная противоположность: rgb(255, 255, 255) или rgb(100%, 100%, 100%).

Альфа задается в rgb() одним из двух способов. Либо добавить символ / после параметров красного, зеленого и синего цветов, либо использовать функцию rgba(). Альфа может быть задана в процентах или в десятичной дроби от 0 до 1. Например, чтобы задать 50% альфа черного цвета в современных браузерах, напишите: rgb(0 0 0 / 50%) или rgb(0 0 0 / 0,5). Для более широкой поддержки, используя функцию rgba(), напишите: rgba(0, 0, 0, 50%) или rgba(0, 0, 0, 0.5).

Запятые и пробелы

Запятые были удалены из обозначений rgb() и hsl(), поскольку в новых цветовых функциях, таких как lab() и lch(), в качестве разделителя используются пробелы, а не запятые. Это изменение обеспечивает большую согласованность не только с новыми цветовыми функциями, но и с CSS в целом. Для лучшей обратной совместимости можно по-прежнему использовать запятые для определения rgb() и hsl().

HSL (Hue, Saturation, Lightness)¶

h1 {
    color: hsl(344, 79%, 40%);
}

HSL расшифровывается как hue, saturation и lightness. Оттенок описывает значение на цветовом круге, от 0 до 360 градусов, начиная с красного (это и 0, и 360). Оттенок 180, или 50%, будет находиться в синем диапазоне. Это источник того цвета, который мы видим.

Насыщенность — это степень яркости выбранного оттенка. Полностью ненасыщенный цвет (с насыщенностью 0%) будет выглядеть полутоновым. И, наконец, светлота — это параметр, описывающий шкалу от белого до черного цвета добавленного света. Светлота, равная 100%, всегда будет давать белый цвет.

Используя функцию цвета hsl(), вы определяете истинный черный цвет, написав hsl(0 0% 0%) или даже hsl(0deg 0% 0%). Это связано с тем, что параметр hue определяет градус на цветовом круге, который, если использовать числовой тип, равен 0-360. Можно также использовать тип angle, который имеет вид (0deg) или (0turn). Насыщенность и светлота задаются в процентах.

Тип angle

Тип angle в CSS отлично подходит для определения оттенка, поскольку он очень хорошо представляет угол цветового круга. Этот тип принимает градусы, повороты, радианы и градианы.

Альфа задается в hsl(), так же как и в rgb(), путем добавления символа / после параметров оттенка, насыщенности и светлоты или с помощью функции hsla(). Альфа может быть задана в процентах или десятичных числах от 0 до 1. Например, чтобы задать 50% альфа черного, используйте: hsl(0 0% 0% / 50%) или hsl(0 0% 0% / 0.5). Используя функцию hsla(), напишите: hsla(0, 0%, 0%, 50%) или hsla(0, 0%, 0%, 0.5).

В CSS появилось несколько новых типов цветов. К ним относятся lab() и lch(), которые позволяют задать гораздо более широкий диапазон цветов, чем это возможно в RGB.

Ключевые слова цветов¶

В CSS существует 148 названий цветов. Это такие простые английские названия, как purple, tomato и goldenrod. По данным Web Almanac, наиболее популярными являются черный, белый, красный, синий и серый. Нашими любимыми являются goldenrod, aliceblue и hotpink.

Помимо стандартных цветов, существуют также специальные ключевые слова:

transparent — полностью прозрачный цвет. Он также является начальным значением background-color.
currentColor — это контекстно вычисляемое динамическое значение свойства color. Если у вас есть цвет текста red, а затем установить border-color в значение currentColor, то он также будет красным. Если элемент, для которого задается currentColor, не имеет определенного значения для color, то currentColor будет вычисляться каскадом.

Системные ключевые слова — это цвета, которые определяются темой операционной системы. Примерами таких цветов являются Background — цвет фона рабочего стола или Highlight — цвет подсветки выделенных элементов. Это только два из множества вариантов.

Все ключевые слова цвета не чувствительны к регистру, однако часто можно встретить системные цвета с заглавной буквы, чтобы отличить их от стандартных ключевых слов цвета.

Цвета высокой чёткости¶

RGB и HSL описывают цвета в гамме sRGB. Новые мониторы показывают гораздо больше цветов, чем умещают эти форматы. Такие цвета задают отдельными функциями CSS.

Гамму можно считать множеством всех задаваемых цветов, а цветовое пространство — способом выбрать цвет. Подробнее — в руководстве по цветам высокой чёткости CSS.

Функция `color()`¶

h1 {
    color: color(srgb 0.9 0.2 0.4);
}

Функция color() выбирает цвет в конкретном цветовом пространстве. Первый аргумент — пространство, оно определяет смысл следующих каналов. Как и в rgb(), альфа задаётся числом от 0 до 1 или процентом после /.

Тёмно-красный из предыдущих примеров, rgb(183 21 64), в процентах — rgb(72% 8% 25%). Тот же цвет через color() и ключевое слово srgb: color(srgb .72 .08 .25).

srgb задаёт пространство и сообщает, что следующие три аргумента — красный, зелёный и синий. Значения идут от 0 до 1, а не от 0 до 255.

Альфа задаётся так же, как в rgb(): через / и процент или десятичную дробь от 0 до 1.

У color() много цветовых пространств, у каждого свои сильные стороны.

Сейчас у всех определённых пространств три канала плюс альфа. В будущем в CSS могут появиться пространства с другим числом каналов, например CMYK.

Display P3¶

h1 {
    color: color(display-p3 0.9 0.2 0.4);
}

Гамма Display P3 содержит примерно на 50% больше цветов, чем sRGB. Все цвета этой гаммы задаются пространством Display P3 в функции color().

Чёрный в Display P3 — color(display-p3 0 0 0). После display-p3 идут те же три канала, красный, зелёный и синий, что и у color(srgb). Но это координаты более широкого пространства, поэтому одинаковые числа означают разные цвета.

color(srgb 1 .5 0) — оранжевый, эквивалентный color(display-p3 0.93596 0.52724 0.1983). Его можно сделать насыщеннее, выйдя за sRGB: color(display-p3 1 .5 0).

Oklab¶

Oklab задаётся функцией oklab() с каналами светлоты, a и b. Пространство удобно для плавных градиентов и для изменения насыщенности без сдвига оттенка и светлоты.

h1 {
    color: oklab(75% 0.1 0.1);
}

Канал светлоты идёт от 0 до 1 или от 0% до 100%. Светлота 0 всегда даёт чёрный.

Канал a идёт от -0.4 до 0.4 или от 0% до 100%. Меньшие значения зеленее, большие — краснее.

Канал b идёт от -0.4 до 0.4 или от 0% до 100%. Меньшие значения синее, большие — желтее.

OkLCh¶

OkLCh — полярная, цилиндрическая форма OKLab. Каналы: светлота, хроматичность и оттенок. Пространство удобно, когда цвет нужно менять предсказуемо для глаза: сдвиг оттенка не меняет воспринимаемую светлоту и насыщенность.

h1 {
    color: oklch(80% 0.1 200);
}

Светлота и оттенок уже знакомы по HSL, а хроматичность близка к насыщенности. Чёрный — oklch(0 0 0), белый — oklch(1 0 0).

Светлота идёт от 0 до 1 или от 0% до 100%. Светлота 0 всегда чёрная.

Хроматичность задаёт яркость цвета: 0 или 0% — ненасыщенный цвет, большие значения — более цветной. 100% совпадает с .4, но значения около .4 быстро выходят за гамму.

Оттенок задаётся в градусах, как в hsl().

OkLCh не ограничен гаммой вроде Display P3, поэтому нужно проверять, что цвет вообще можно показать. oklch(80% 50% 200) выглядит как яркий синий и на числах кажется разумным, но лежит вне гаммы Display P3.

Другие пространства¶

Способов задать цвет в CSS много, и все учить не нужно. rgb() и hex часто встречаются в инструментах дизайна и в существующем коде. Полезно также знать формат, которым можно предсказуемо управлять: значения hsl или oklch можно менять напрямую и представлять, какой цвет получится.

Подробнее — в статье Access more colors and new spaces.

Преобразование цветов¶

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

`color-mix()`¶

color-mix() смешивает два цвета. Так удобно получать более светлый или тёмный вариант, смешивая цвет с белым или чёрным.

Нужно указать два цвета, способ смешивания (метод интерполяции) и долю каждого цвета.

Один и тот же цвет можно записать по-разному, например rgb(100% 66% 76%) и oklch(82.425% 0.10622 0.56816). Среднее двух цветов зависит от пространства, в котором считается смесь.

Если у пространства есть оттенок, можно выбрать направление по цветовому кругу. По умолчанию берётся более короткий путь shorter, также доступны longer, increasing и decreasing.

Пространство и направление вместе составляют метод интерполяции. Долю каждого цвета тоже можно задать явно.

Когда цвета собираются динамически, следите, чтобы сочетания не теряли достаточный контраст.

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

Относительный синтаксис цвета берёт любой цвет и считает по его каналам новый.

h1 {
    color: oklch(from red l c h);
}

oklch() даёт каналы светлоты, хроматичности и оттенка. После from можно указать цвет в любом синтаксисе, а затем использовать буквы каналов. Этот пример даёт красный без изменений.

Каналы меняют через calc() или заменяют целиком. Тот же красный в числах — oklch(62% 0.25 29).

h1 {
    color: oklch(from oklch(62% 0.25 29) calc(l / 2) c 180);
}

Светлота становится 62% / 2, то есть 31%. Хроматичность не меняется и остаётся 0.25. Оттенок — 180. Получается oklch(31% 0.25 180), тёмно-зелёный.

Исходный цвет часто хранят в пользовательском свойстве, чтобы варианты собирались динамически.

Так можно работать с любой цветовой функцией. Удобнее та, чьи каналы описывают нужное изменение. Чтобы менять светлоту, берите oklch или hsl: у них есть отдельный канал светлоты.

h1 {
    color: oklch(from var(--primary-color) calc(l * 0.9) c h);
}

Относительным синтаксисом собирают палитру для всего сайта.

Цвета вне гаммы¶

Контент показывается на разных экранах, и не все поддерживают широкую гамму. Если заданный цвет экран показать не может, браузер подбирает близкий отображаемый цвет — это отображение гаммы. Конкретные запасные цвета задают медиазапросом color-gamut.

Где использовать цвет в правилах CSS¶

Если свойство CSS принимает в качестве значения тип данных <color>, то оно будет принимать любой из перечисленных выше способов выражения цвета. Для стилизации текста используются свойства color, text-shadow и text-decoration-color, которые принимают цвет в качестве значения или как часть значения.

Для фона можно задать цвет в качестве значения для background или background-color. Цвета также могут использоваться в градиентах, например, в linear-gradient. Градиенты — это тип изображения, который может быть программно задан в CSS. Градиенты могут содержать два или более цветов в любой комбинации цветовых форматов, таких как hex, rgb или hsl.

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

Наконец, свойства border-color и outline-color задают цвет границ и контуров боксов. Свойство box-shadow также принимает цвет в качестве одного из значений.

Ресурсы¶

Источник: Color