Допустимые значения цветов в CSS

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

  • Шестнадцатеричные цвета;
  • Цвет RGB;
  • Цвета RGBA;
  • Цвета HSL;
  • Цвета HSLA;
  • Предопределенные названия цветов.

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

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

Например, значение # 0000ff определяет синий цвет, так как синий компонент установлен в наибольшее значение( ff), а остальные компоненты установлены в 0.

Пример

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

#p1 {background-color: #ff0000;} /* красный */ #p2 {background-color: #00ff00;} /* зеленый */ #p3 {background-color: #0000ff;} /* синий */

Посмотреть просмотр

Цвет RGB

В RGB(не путать с RGBA цветовой таблицей) значение цвета задается функцией rgb(), которая имеет в себя следующий синтаксис:

rgb(red, green, blue)

Каждый настройка(красный, зеленый и синий) определяет интенсивность цвета и может быть целым числом от 0 до 255 или значением в процентах(от 0% до 100%).

К примеру, значение rgb(0,0,255) выводится синим, так как настройка синего компонента установлен в наибольшее значение(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)

Настройка 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 — синий. Насыщенность — это значение в процентах. 0% обозначает оттенок серого, а 100% — полный цвет. Яркость также представляет собой процентную величину: 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 значения цветов являются расширением с альфа-каналом, который определяет непрозрачность объекта.

HSLA значение цвета задается при помощи возможности hsla () , которая имеет в себя следующий синтаксис:

hsla(hue, saturation, lightness, alpha)

Настройка alpha представляет собой число от 0,0 (в полном объеме прозрачный) и до 1,0 (в полном объеме непрозрачный). Этот формат во многом схож с CSS RGBA цветом .

Пример

Определите различные цвета 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 . Посмотрите таблицу предопределенных имен цветов .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *