Цвет

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

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

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

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

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

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

h1 {
  color: #b71540;
}

Шестнадцатеричная запись (часто сокращается до шестнадцатеричной) — это сокращенный синтаксис 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() одним из двух способов. Либо добавьте / после параметров красного, зеленого и синего, либо используйте функцию 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) .

HSL (оттенок, насыщенность, яркость)

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

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

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

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

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

Функция цвета HSL визуально разбита. Оттенок использует цветовой круг. Насыщенность показывает, что серый цвет переходит в бирюзовый. Яркость показывает черное на белом.

Альфа определяется в 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 148 именованных цветов . Это простые английские названия, такие как пурпур, томат и золотарник. По данным Веб-альманаха , одни из самых популярных имен — черный, белый, красный, синий и серый. Наши фавориты — золотарник, aliceblue и hotpink.

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

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

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

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

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

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

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

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

Какие из следующих цветов являются допустимыми?

#OOFZ2
hsl(180deg 50% 50%)
rgb(255, 0, 0)
hotpink
rbga(400 0 1)
#0f08

Найдите неверный цвет hsl.

hsl(0 0% 0% / 20%)
hsl(.5turn 40% 60%)
hsl(0, 0, 0)
hsl(2rad 50% 50%)
hsl(5, 0%, 90%)

Ресурсы