Допустимые значения цвета CSS
Цвета CSS
Цвета в CSS можно указать следующими способами:
- Шестнадцатеричные цвета
- Шестнадцатеричные цвета с прозрачностью
- Цвета RGB
- Цвета RGBA
- Цвета HSL
- цвета HSLA
- Предопределенные/кроссбраузерные названия цветов
- С
currentcolorключевым словом
Шестнадцатеричные цвета
Шестнадцатеричный цвет указывается с помощью: #RRGGBB, где RR (красный), GG (зеленый) и BB (синий) шестнадцатеричные целые числа определяют компоненты цвета. Все значения должны быть между 00 и FF.
Например, значение #0000ff отображается как синее, потому что для синего компонента установлено максимальное значение (ff), а для остальных — 00.
Пример
Определите разные цвета HEX:
#p1 {background-color: #ff0000;} /* red */
#p2 {background-color: #00ff00;} /* green */
#p3 {background-color: #0000ff;} /* blue */
Шестнадцатеричные цвета с прозрачностью
Шестнадцатеричный цвет указывается с помощью: #RRGGBB. Чтобы добавить прозрачности, добавьте две дополнительные цифры между 00 и FF.
Пример
Определите различные цвета HEX с прозрачностью:
#p1a {background-color: #ff000080;} /* red transparency */
#p2a {background-color: #00ff0080;} /* green
transparency */
#p3a {background-color: #0000ff80;} /* blue
transparency */
Цвета RGB
Значение цвета RGB задается с помощью функции rgb() , которая имеет следующий синтаксис:
rgb(red, green, blue)
Каждый параметр (красный, зеленый и синий) определяет интенсивность цвета и может быть целым числом от 0 до 255 или процентным значением (от 0% до 100%).
Например, значение rgb(0,0,255) отображается как синий цвет, потому что для параметра blue установлено максимальное значение (255), а для остальных установлено значение 0.
Кроме того, следующие значения определяют одинаковый цвет: rgb(0,0,255) и rgb(0%,0%,100%).
Пример
Определите различные цвета RGB:
#p1 {background-color: rgb(255, 0, 0);} /* red */
#p2 {background-color: rgb(0, 255, 0);} /* green */
#p3 {background-color: rgb(0, 0, 255);} /* blue */
Цвета RGBA
Цветовые значения RGBA являются расширением цветовых значений RGB с альфа-каналом, который определяет непрозрачность объекта.
Цвет RGBA задается с помощью функции rgba() , которая имеет следующий синтаксис:
rgba(red, green, blue, alpha)
Альфа-параметр представляет собой число от 0,0 (полностью прозрачный) до 1,0 (полностью непрозрачный).
Пример
Определите различные цвета RGB с непрозрачностью:
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */
Цвета HSL
HSL расшифровывается как оттенок, насыщенность и яркость и представляет собой представление цветов в цилиндрических координатах.
Значение цвета HSL задается с помощью функции hsl() , которая имеет следующий синтаксис:
hsl(hue, saturation, lightness)
Оттенок — это степень на цветовом круге (от 0 до 360) — 0 (или 360) — красный, 120 — зеленый, 240 — синий. Насыщенность — это процентное значение; 0% означает оттенок серого, а 100% — полный цвет. Легкость тоже в процентах; 0% — черный, 100% — белый.
Пример
Определите разные цвета HSL:
#p1 {background-color: hsl(120, 100%, 50%);} /* green */
#p2 {background-color: hsl(120, 100%, 75%);} /* light green */
#p3 {background-color: hsl(120, 100%, 25%);} /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */
Цвета HSLA
Цветовые значения HSLA являются расширением цветовых значений HSL с альфа-каналом, который определяет непрозрачность объекта.
Значение цвета HSLA задается с помощью функции hsla() , которая имеет следующий синтаксис:
hsla(hue, saturation, lightness, alpha)
Альфа-параметр представляет собой число от 0,0 (полностью прозрачный) до 1,0 (полностью непрозрачный).
Пример
Определите разные цвета HSL с непрозрачностью:
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green with opacity */
Предопределенные/кроссбраузерные названия цветов
140 названий цветов предопределены в спецификации цветов HTML и CSS.
Например: blue, red, coral, brown, и т.д.:
Пример
Определите разные имена цветов:
#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}
Список всех предопределенных имен можно найти в нашем Справочнике по названиям цветов .
Ключевое слово текущего цвета
Ключевое currentcolorслово относится к значению свойства цвета элемента.
Пример
Цвет границы следующего элемента <div> будет синим, потому что цвет текста элемента <div> синий:
#myDIV {
color: blue; /* Blue text color */
border: 10px solid currentcolor;
/* Blue border color */
}