Цвет

Подкаст CSS - 006: Цвет, часть первая

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

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

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

Выбор цвета

Названные цвета

Самый простой способ выбрать цвет — выбрать один из 148 именованных цветов в CSS . Это простые английские названия, такие как purple , tomato и goldenrod . Некоторые из самых популярных названий, согласно Web Almanac , — black , white , red , blue и gray . Наши фавориты — goldenrod , aliceblue и hotpink .

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

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

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

h1 {
  color: #b71540;
}

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

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

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

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

• 0% альфа — что полностью прозрачно — это 00 : #00000000
• 50% альфа равно 80 : #00000080
• 75% альфа — это BF : #000000BF

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

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

RGB (красный, зеленый, синий)

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() одним из двух способов. Либо добавьте / после параметров red, green и blue, либо используйте функцию rgba() . Альфа может быть определена процентом или десятичной дробью от 0 до 1. Например, чтобы установить 50% альфа черного в современных браузерах, напишите: rgb(0 0 0 / 50%) или rgb(0 0 0 / 0.5) .

HSL (Оттенок, Насыщенность, Яркость)

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

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

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

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

Альфа определяется в 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) .

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

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

Функция color()

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

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

Например, темно-красный цвет RGB в предыдущем фрагменте кода, который определен как rgb(183 21 64) , может быть определен с процентами как rgb(72% 8% 25%) . Вы можете использовать функцию color() с ключевым словом srgb , чтобы указать тот же цвет с помощью color(srgb .72 .08 .25) .

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

Подобно rgb() мы можем задать альфа-канал с помощью символа / и процента или десятичной дроби от 0 до 1 .

Существует множество цветовых пространств, которые можно использовать с функцией color() , каждое из которых имеет разные преимущества и варианты использования.

Дисплей P3

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

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

Чтобы установить черный цвет в Display P3, определите его как color(display-p3 0 0 0) . После указания цветового пространства display-p3 для функции color() у вас есть три канала: красный, зеленый и синий, аналогично 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() с каналами Lightness, 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 — это полярная или цилиндрическая форма OKLab, которая определяется каналами Lightness, Chroma и Hue. Она полезна для настройки цветов перцептивно однородным образом. Это означает, что изменения оттенка не повлияют на то, насколько светлым или насыщенным будет цвет.

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 и иметь представление о том, каким будет результирующий цвет.

Подробнее читайте в разделе Доступ к большему количеству цветов и новым пространствам .

Системные цвета

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

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

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

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

color-mix()

Чтобы использовать результат смешивания двух цветов, можно использовать метод color-mix() . Это полезно для смешивания цвета с белым или черным, чтобы создать более светлый или более темный вариант.

Чтобы использовать color-mix() , вам необходимо определить два цвета, способ их смешивания (метод интерполяции) и необходимое количество каждого цвета.

Для цветовых пространств, имеющих оттенок, вы также можете решить, какой путь по цветовому кругу вы хотите пройти. По умолчанию используется shorter путь, но вы также можете выбрать longer или increasing и decreasing .

Вместе цветовое пространство и направление представляют собой метод интерполяции.

Вы также можете указать количество каждого цвета для смешивания.

Синтаксис относительного цвета

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

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

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

Для внесения корректировок можно использовать функцию calc() для изменения значений каналов или просто полностью заменить канал. Здесь мы используем тот же red цвет, но определяем его с помощью 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);
}

Используя относительный цветовой синтаксис (RCS), вы можете создать палитру цветов для использования на своем сайте.

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

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

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

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

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

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

Проверьте свое понимание

Проверьте свои знания цвета

Ресурсы

• Удобная демонстрация, показывающая, как можно использовать углы с HSL
• Подробное руководство по цвету
• Подробное руководство по широкому цветовому охвату
• [видео] Объяснение того, как читать шестнадцатеричные коды
• Как работают шестнадцатеричные коды