CSS Допустимые значения цвета
CSS Цвета
Цвета в CSS можно указать следующими способами:
- Шестнадцатеричные цвета (HEX)
- RGB цвета
- RGBA цвета
- HSL цвета
- HSLA цвета
- Предопределенные / кросс-браузерные названия цветов
Шестнадцатеричные цвета (HEX)
Шестнадцатеричный цвет задается с помощью: #RRGGBB, где шестнадцатеричные числа RR (red - красный), GG (green - зеленый) и BB (blue - синий) задают компоненты цвета. Все значения должны быть между 00 и FF.
Например, значение #0000ff отображается как синий, потому что синий компонент установлен в его самое высокое значение (ff), а остальные установлены в 00.
Пример
Определите разные цвета HEX:
#p1 {background-color: #ff0000;} /* красный */
#p2 {background-color: #00ff00;} /* зелёный */
#p3 {background-color: #0000ff;} /* синий */
Попробуйте сами »
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);} /* красный */
#p2 {background-color: rgb(0, 255, 0);} /* зеленый */
#p3 {background-color: rgb(0, 0, 255);} /* синий */
Попробуйте сами »
RGBA Цвета
Цветовые значения RGBA являются расширением цветовых значений RGB с альфа-каналом, который определяет непрозрачность объекта.
Цвет RGBA указывается с помощью rgba() функции, которая имеет следующий синтаксис:
rgba(red, green, blue, 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 - синий. Насыщенность (saturation) - это процентное значение; 0% означает оттенок серого, а 100% - полный цвет. Легкость (lightness) также в процентах; 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 являются расширением значений цвета HSL с альфа-каналом, который определяет непрозрачность объекта.
Значение цвета HSLA указывается с помощью hsla() функции, которая имеет следующий синтаксис:
hsla(hue, saturation, lightness, alpha)
Альфа-параметр - это число от 0,0 (полностью прозрачное) до 1,0 (полностью непрозрачное).
Пример
Определите различные цвета 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.
Посмотрите таблицу предопределенных названий цветов.
