Цвета CSS

Свойство color в CSS используется для установки цвета элементов HTML. Обычно это свойство используется для установки цвета фона или цвета шрифта элемента.
В CSSмы используем значения цвета для указания цвета. Мы также можем использовать это свойство для цвета границы и других декоративных эффектов.
Мы можем определить цвет элемента, используя следующие способы:
◦ Формат RGB.
◦ Формат RGBA.
◦ Шестнадцатеричная запись.
◦ HSL.
◦ HSLA.
◦ Встроенный цвет.
Давайте подробно разберемся в синтаксисе и описании вышеперечисленных способов.

Формат RGB

Формат RGB — это краткая форма « КРАСНЫЙ, ЗЕЛЕНЫЙ и СИНИЙ », которая используется для определения цвета элемента HTMLпутем простого указания значений R, G, B в диапазоне от 0 до 255.
Значения цвета в этом формате задаются с помощью свойства rgb() . Это свойство допускает три значения, которые могут быть либо в процентах, либо в целых числах (диапазон от 0 до 255).
Это свойство поддерживается не во всех браузерах; поэтому не рекомендуется его использовать.
Синтаксис
color: rgb(R, G, B);

Формат RGBA

Он почти аналогичен формату RGB, за исключением того, что RGBA содержит букву A (альфа) , определяющую прозрачность элемента. Значение альфа находится в диапазоне от 0,0 до 1,0 , где 0,0 соответствует полностью прозрачному, а 1,0 — непрозрачному.
Синтаксис
color:rgba(R, G, B, A);

Шестнадцатеричная запись

Шестнадцатеричный код может быть определен как шестизначное представление цвета. Это обозначение начинается с символа # , за которым следуют шесть символов в диапазоне от 0 до F. В шестнадцатеричном представлении первые две цифры представляют значение красного (RR) цвета, следующие две цифры представляют значение зеленого (GG) цвета, а последние две цифры представляют значение синего (BB) цвета.
Обозначение черного цвета в шестнадцатеричной системе счисления — #000000, а обозначение белого цвета в шестнадцатеричной системе счисления — #FFFFFF. Некоторые из кодов в шестнадцатеричном представлении: #FF0000, #00FF00, #0000FF, #FFFF00 и многие другие.
Синтаксис
color:#(0-F)(0-F)(0-F)(0-F)(0-F)(0-F);

Короткие шестнадцатеричные коды

Это краткая форма шестнадцатеричной системы счисления, в которой каждая цифра воссоздается для получения эквивалентного шестнадцатеричного значения.
Например, #7B6 становится #77BB66 в шестнадцатеричном формате.
Обозначение черного цвета в коротком шестнадцатеричном формате — #000, а обозначение белого цвета в коротком шестнадцатеричном формате — #FFF. Некоторые из коротких шестнадцатеричных кодов: #F00, #0F0, #0FF, #FF0 и многие другие.

HSL

Это краткая форма Hue, Saturation и Lightness . Давайте разберемся с ними по отдельности.
Hue: его можно определить как градус на цветовом круге от 0 до 360. 0 соответствует красному, 120 — зеленому, 240 — синему.
Saturation: принимает значение в процентах, в котором 100 % соответствует полностью насыщенному, т. е. нет оттенков серого, 50 % соответствует 50 % серому, но цвет все еще виден, а 0 % соответствует полностью ненасыщенному, т. е. полностью серому, а цвет невидим.
Lightness: яркость цвета можно определить как свет, который мы хотим обеспечить цветом, в котором 0% представляет черный (нет света), 50% представляет ни темный, ни светлый, а 100% представляет белый (полная яркость). .
Синтаксис
color:hsl(H, S, L);

HSLA

Оно полностью похоже на свойство HSL, за исключением того, что оно содержит A (альфа) , определяющее прозрачность элемента. Значение альфа находится в диапазоне от 0,0 до 1,0 , где 0,0 указывает на полную прозрачность, а 1,0 — на непрозрачную.
Синтаксис
color:hsla(H, S, L, A);

Встроенный цвет

Как следует из названия, встроенный цвет означает набор ранее определенных цветов, которые используются с использованием таких имен, как красный, синий, зеленый и т. д.
Синтаксис
color: color-name;

Давайте посмотрим список встроенных цветов вместе с их десятичными и шестнадцатеричными значениями.
1.
Red
#FF0000
rgb(255,0,0)
2.
Orange
#FFA500
rgb(255,165,0)
3.
Yellow
#FFFF00
rgb(255,255,0)
4.
Pink
#FFC0CB
rgb(255,192,203)
5.
Green
#008000
rgb(0,128,0)
6.
Violet
#EE82EE
rgb(238,130,238)
7.
Blue
#0000FF
rgb(0,0,255)
8.
Aqua
#00FFFF
rgb(0,255,255)
9.
Brown
#A52A2A
rgb(165,42,42)
10.
White
#FFFFFF
rgb(255,255,255)
11.
Gray
#808080
rgb(128,128,128)
12.
Black
#000000
rgb(0,0,0)

Пример