CSS Юридический Цвет Значения

CSS Цвета

Цвета в CSS могут быть определены следующими способами:

Шестнадцатеричные цвета
RGB цвета
RGBA цвета
HSL цвета
HSLA цвета
Названия цветов Предопределенные / Cross-браузер

Шестнадцатеричные Цвета

Шестнадцатеричные значения цветов поддерживаются во всех основных браузерах.

Шестнадцатеричный цвет задается с: #RRGGBB, где RR (red) , GG (green) и BB (blue) шестнадцатеричные числа указать компоненты цвета. Все значения должны находиться в диапазоне от 00 до FF.

Например, # 0000FF значение отображается как синий, так как синий компонент установлен в его самое высокое значение (ff) , а остальные установлены на 00.

пример

Определить различные цвета HEX:

#p1 {background-color: #ff0000;}   /* red */
#p2 {background-color: #00ff00;}   /* green */
#p3 {background-color: #0000ff;}   /* blue */

Попробуй сам "

RGB Цвета

значения цвета RGB поддерживаются во всех основных браузерах.

Значение цвета RGB задается: rgb(red, green, blue) . Каждый параметр (красный, зеленый и синий) определяет интенсивность цвета и может быть целым числом от 0 до 255 или процентное значение (from 0% to 100%) .

Например, rgb(0,0,255) значение отображается как синий, так как синий параметр установлен на его самое высокое значение (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 поддерживаются в IE9 +, Firefox 3+, Chrome, Safari и Opera в 10+.

цветовые значения RGBA являются расширением цветовых значений RGB с альфа-каналом - который определяет прозрачность объекта.

Значение цвета RGBA задается: rgba(red, green, blue, alpha) . Параметр альфа представляет собой число в диапазоне от 0,0 (fully transparent) и 1.0 (fully opaque) .

пример

Определить различные цвета 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 поддерживаются в IE9 +, Firefox, Chrome, Safari и Opera в 10+.

HSL обозначает оттенок, насыщенность и легкость - и представляет собой цилиндрическую-координатное представление цветов.

Значение цвета HSL задается: hsl(hue, saturation, lightness) .

Оттенок степень на цветовом круге (from 0 to 360) - 0 (or 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 поддерживаются в IE9 +, Firefox 3+, Chrome, Safari и Opera в 10+.

Значения цвета HSLA являются продолжением цветовых значений HSL с альфа-каналом - который определяет прозрачность объекта.

Значение цвета HSLA задается: hsla(hue, saturation, lightness, alpha) , где параметр альфа определяет непрозрачность. Параметр альфа представляет собой число в диапазоне от 0,0 (fully transparent) и 1.0 (fully opaque) .

пример

Определить различные цвета 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 */

Попробуй сам "