Подкаст CSS – 006: Цвет, часть первая
Цвет — важная часть любого веб-сайта, и в 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% альфа:
- B равно 11, что при умножении на 16 равно 176.
- F равно 15
- 176 + 15 = 191
- Значение альфа составляет 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%, будет находиться в синем диапазоне. Это происхождение цвета, который мы видим.
Насыщенность — это яркость выбранного оттенка. Полностью ненасыщенный цвет (с насыщенностью 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)
.
Ключевые слова цвета
В 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
также принимает цвет в качестве одного из значений.
Проверьте свое понимание
Проверьте свои знания о цвете
Какие из следующих цветов являются допустимыми?
#0f08
rgb(255, 0, 0)
hotpink
rbga(400 0 1)
hsl(180deg 50% 50%)
#OOFZ2
Найдите неверный цвет hsl.
hsl(0, 0, 0)
hsl(5, 0%, 90%)
hsl(2rad 50% 50%)
hsl(.5turn 40% 60%)
hsl(0 0% 0% / 20%)