Допустимые значения цветов в CSS
Цвета в CSS могут быть указаны следующими способами:
- Шестнадцатеричные цвета;
- Цвет RGB;
- Цвета RGBA;
- Цвета HSL;
- Цвета HSLA;
- Предопределенные названия цветов.
Шестнадцатеричные цвета
Шестнадцатеричный цвет указывается в формате: #RRGGBB, где шестнадцатеричные целые числа RR (красный), GG (зеленый) и BB (синий) определяют компоненты цвета. Все значения должны быть в диапазоне от 00 до FF.
Например, значение # 0000ff определяет синий цвет, потому что синий компонент установлен в наибольшее значение (ff), а остальные компоненты установлены в 0.
Пример
Определите разные цвета HEX:
#p1 {background-color: #ff0000;} /* красный */ #p2 {background-color: #00ff00;} /* зеленый */ #p3 {background-color: #0000ff;} /* синий */Цвет RGB
В RGB (не путать с RGBA цветовой таблицей) значение цвета задается функцией rgb(), которая имеет следующий синтаксис:
rgb(red, green, blue)Каждый параметр (красный, зеленый и синий) определяет интенсивность цвета и может быть целым числом от 0 до 255 или значением в процентах (от 0% до 100%).
Например, значение rgb (0,0,255) отображается синим, потому что параметр синего компонента установлен в наибольшее значение (255), а остальные параметры на 0.
Следующие значения определяют одинаковый цвет: rgb (0,0,255) и rgb (0%, 0%, 100%).
Пример
Определите разные цвета RGB:
#p1 {background-color: rgb(255, 0, 0);} /* красный */
#p2 {background-color: rgb(0, 255, 0);} /* зеленый */
#p3 {background-color: rgb(0, 0, 255);} /* синий */Цвета RGBA
RGBA цвета являются расширением RGB значений цветов альфа-каналом, который определяет прозрачность объекта.
RGBA значение цвет задается функцией rgba (), которая имеет следующий синтаксис:
rgba(red, green, blue, alpha)Параметр alpha представляет собой число от 0,0 (полностью прозрачный) и 1,0 (полностью непрозрачный).
Пример
Определите разные цвета RGB с уровнем прозрачности:
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* красный с прозрачностью */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* зеленый с прозрачностью */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* синий с прозрачностью */Цвета HSL
HSL обозначает тон, насыщенность и яркость. Формат определяет представление цветов в цилиндрических координатах.
Значение цвета HSL задается с помощью функции hsl (), которая имеет следующий синтаксис:
hsl(hue, saturation, lightness)Hue - это значение угла (в градусах) цветового круга (от 0 до 360) - 0 (или 360) красный, 120 - зеленый, 240 - синий. Насыщенность - это значение в процентах. 0% обозначает оттенок серого, а 100% - полный цвет. Яркость также представляет собой процентную величину: 0% - черный, 100% - белый.
Пример
Определите различные цвета HSL:
#p1 {background-color: hsl(120, 100%, 50%);} /* зеленый */
#p2 {background-color: hsl(120, 100%, 75%);} /* светло-зеленый */
#p3 {background-color: hsl(120, 100%, 25%);} /* темно-зеленый */
#p4 {background-color: hsl(120, 60%, 70%);} /* пастельный оттенок зеленого */Цвета HSLA
HSLA значения цветов являются расширением с альфа-каналом, который определяет непрозрачность объекта.
HSLA значение цвета задается с помощью функции hsla (), которая имеет следующий синтаксис:
hsla(hue, saturation, lightness, alpha)Параметр alpha представляет собой число от 0,0 (полностью прозрачный) и до 1,0 (полностью непрозрачный). Этот формат во многом схож с CSS RGBA цветом.
Пример
Определите разные цвета HSL с непрозрачностью:
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* зеленый с прозрачностью */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* светло-зеленый с прозрачностью */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* темно-зеленый с прозрачностью*/
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* пастельный оттенок зеленого с прозрачностью */Предопределенные названия цветов
140 названий цветов предопределены в HTML и CSS. Посмотрите таблицу предопределенных имен цветов.