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

Цвет CSS

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

  • Шестнадцатеричный цвет
  • Шестнадцатеричный цвет с прозрачностью
  • Цвет RGB
  • Цвет RGBA
  • Цвет HSL
  • Цвет HSLA
  • Предварительно определённые/переносимые между браузерами цветовые имена
  • Использование текущий цвет Ключевое слово

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

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

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

Пример

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

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

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

Шестнадцатеричный цвет с прозрачностью

Используйте #RRGGBB для определения шестнадцатеричного цвета. Для увеличения прозрачности добавьте два дополнительных числа между 00 и FF.

Пример

Определяет прозрачный шестнадцатеричный цвет:

#p1a {background-color: #ff000080;}   /* Красный с прозрачностью */
#p2a {background-color: #00ff0080;}   /* Зеленый с прозрачностью */
#p3a {background-color: #0000ff80;}   /* Синий с прозрачностью */

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

Цвет RGB

Цветовая стоимость RGB Функция rgb()Определение, грамматика такова:

rgb(красный, green, голубой)

Каждый параметр (красный, green, голубойОпределяет интенсивность цвета, может быть целым числом от 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, он содержит канал Alpha — определяет непрозрачность объекта.

Цвет RGBA через Функция rgba()Определение, грамматика такова:

rgba(красный, green, голубой, 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 означает тон (hue), насыщенность (saturation) и яркость (lightness) — цилиндрическая координата цвета.

Использование Функция hsl()Указание значения цвета HSL, грамматика функции такова:

hsl(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 являются расширением значений цвета HSL, они содержат канал Alpha — указание непрозрачности объекта.

Цветовые значения HSLA состоят из Функция hsla()Указание, грамматика функции такова:

hsla(hue, насыщенность, светимость, alpha)

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

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

Предварительно определённые/переносимые между браузерами цветовые имена

В HTML и CSS предварительно определены 140 цветовых имен.

Например:голубойикрасныйикоралловыйикоричневый и т.д.:

Пример

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

#p1 {background-color: голубой;}
#p2 {background-color: красный;}
#p3 {background-color: коралловый;}
#p4 {background-color: коричневый;}

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

Полный список всех预定名称 можно найти в нашей цветовой таблице.

Ключевой слово текущий цвет

текущий цвет Цитирование элементов по ключу свойств color.

Пример

Следующие элементы <div> будут иметь голубой цвет рамки, так как цвет текста элемента <div> голубой:

#myDIV {
  цвет: голубой; /* Цвет текста голубой */
  граница: 10px сплошная текущий цвет; /* Цвет голубой рамки */
}

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