Цвет

Подкаст 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% альфа:

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

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

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) .

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

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) . И насыщенность, и яркость определяются в процентах.

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

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

• 2
• 12
• 3.6
• 4

Источник

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

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

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

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

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

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

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

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

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

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

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

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

rbga(400 0 1)

rbga — это опечатка rgba, и число 400 в любом случае больше, чем оно принимает, что делает его недействительным.

#0f08

🎉

#OOFZ2

Это не шестнадцатеричное значение, оно состоит всего из 5 цифр и включает букву Z, что делает его недействительным.

rgb(255, 0, 0)

🎉

hsl(180deg 50% 50%)

🎉

hotpink

🎉

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

hsl(5, 0%, 90%)

Это допустимое значение hsl.

hsl(.5turn 40% 60%)

Это допустимое значение hsl.

hsl(0, 0, 0)

🎉Вы нашли, 2-е и 3-е значения должны быть процентами.

hsl(2rad 50% 50%)

Это допустимое значение hsl.

hsl(0 0% 0% / 20%)

Это допустимое значение hsl.

Ресурсы

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