Цвета CSS

Поддержка CSS Более 140 наименований цветови также шестнадцатеричными значениями, значениями RGB, RGBA, значениями HSL, HSLA и непрозрачностью.

Цвет RGBA

Значение цвета RGBA является расширением значения цвета RGB, имеющим канал alpha - этот канал определяет непрозрачность цвета.

Значение цвета RGBA определяется следующим образом: rgba(red, green, blue, alpha)。 alpha Параметр - это число между 0.0 (полностью прозрачный) и 1.0 (абсолютно непрозрачный).

rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);

Ниже приведен пример определения различных цветов RGBA:

Пример

#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 означает тон, насыщенность и яркость (Hue, Saturation и Lightness).

Значение цвета HSL определяется следующим образом: hsl(hue, saturation, lightness).

Тон является углом на цветовом круге (от 0 до 360):

  • 0 (или 360) - это красный цвет
  • 120 - это зеленый цвет
  • 240 - это синий цвет

Сатурация является процентным значением: 100% - это полная окраска.

Яркость также является процентным значением: 0% - это темный цвет (черный), а 100% - белый.

hsl(0, 100%, 30%);
hsl(0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);

Ниже приведены примеры различных цветов 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 с Alpha-каналом - оно определяет непрозрачность цвета.

Значение цвета HSLA определяется следующими параметрами: hsla(hue, saturation, lightness, alpha), где параметр alpha определяет непрозрачность. Параметр alpha является числом, находящимся между 0.0 (полностью прозрачный) и 1.0 (абсолютно непрозрачный).

hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);

Ниже приведены примеры различных цветов HSLA:

Пример

#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);}   /* Тонкий зеленый с непрозрачностью */

Попробуйте сами

Непрозрачность

CSS opacity Атрибут устанавливает непрозрачность всего элемента (фоновый цвет и текст также будут непрозрачными/прозрачными).

opacity Значение атрибута должно быть числом, находящимся между 0.0 (полностью прозрачный) и 1.0 (абсолютно непрозрачный).

rgb(255, 0, 0); opacity:0.2;
rgb(255, 0, 0); opacity:0.4;
rgb(255, 0, 0); opacity:0.6;
rgb(255, 0, 0); opacity:0.8;

Обратите внимание, что上面的 текст также будет прозрачным/непрозрачным!

Ниже приведен пример различных элементов с непрозрачностью:

Пример

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* Красный с непрозрачностью */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* Зеленый с непрозрачностью */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* Синий с непрозрачностью */

Попробуйте сами