CSS Правильные значения цвета
Цвета CSS
Цвета в CSS могут быть заданы следующими способами:
- Hexadecimal colors
- RGB colors
- RGBA colors
- HSL colors
- HSLA colors
- Predefined/Cross-browser color names
Шестнадцатеричные цвета
Шестнадцатеричный цвет указывается с помощью: #RRGGBB, где RR (красный), GG (зеленый) и BB (синий) шестнадцатеричные целые числа определяют компоненты цвета. Все значения должны находиться в диапазоне от 00 до FF.
Например, #0000ff значение отображается синим цветом, так как синий компонент имеет наивысшее значение (FF), а остальные — 00.
Пример
Определите различные шестнадцатеричные цвета:
#p1 {background-color: #ff0000;} /* red */
#p2 {background-color: #00ff00;} /* green */
#p3 {background-color: #0000ff;} /* blue */
Цвета RGB
Значение цвета RGB задается с помощью функции RGB (), которая имеет следующий синтаксис:
rgb(red, green, blue)
Каждый параметр (красный, зеленый и синий) определяет интенсивность цвета и может быть целым числом между 0 и 255 или процентным значением (от 0% до 100%).
Например, значение RGB (0, 0255) отображается синим цветом, поскольку параметру Blue присвоено наибольшее значение (255), а другим — 0.
Кроме того, следующие значения определяют одинаковый цвет: RGB (0, 0255) и 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)
Параметр 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)
Hue-это градус на цветном колесе (от 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)
Параметр 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.
Посмотрите на таблицу пред определенных имен цветов.