Цвет в CSS

Свойство color – предоставляет цвет в цветовом спектре sRGB. В свойстве – color , может включать значения прозрачности Альфа-канала (alpha-channel), указывающие, как цвет сочетается с его фоном.

Цвета в CSS можно задать несколькими способами , с помощью ключевых слов или использовать числовые значения .

Основные ключевые слова цвета

color - либо ключевое слово или числовая спецификация.

Список основных ключевых слов color: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, и yellow. В названиях цветов регистр не учитывается.

Названия цветов и значения Hex rgb

body {color: black; background: white }
h1 { color: maroon }
h2 { color: olive }

Цветовые значения RGB

Цветовая модель RGB используется в цифровых спецификациях цвета. Во всех этих примерах указан один и тот же цвет:

em {color: #f00} / * #rgb * /
em {color: #ff0000} / * #rrggbb * /
em {color: rgb(255,0,0)}
em {color: rgb(100%, 0%, 0%)}

Формат значения RGB в шестнадцатеричной системе счисления - " #", за которым сразу следуют три или шесть шестнадцатеричных символов. Трехзначная нотация RGB ( #rgb ) преобразуется в шестизначную форму ( #rrggbb ) путем копирования цифр, а не добавления нулей. Например, # fb0 заменяется на # ffbb00. Это гарантирует, что белый цвет (#ffffff) может быть указан с помощью краткой записи (#fff), и устраняет любые зависимости от глубины цвета дисплея.

Значением вида – #[R] [G] [B] , где R – насыщенность красного , G – насыщенность зеленого и B – насыщенность синего в цвете . Значения задаются одинарными шестнадцатеричными числами от 0 до F :

p { color: #F00;}

Значением вида – #[RR] [GG] [BB] , где RR – насыщенность красного , GG – насыщенность зеленого и BB – насыщенность синего в цвете . Значения задаются одинарными шестнадцатеричными числами от 00 до FF :

p { color: #FF0000;}

Значением вида – rgb [R] , [G] , [B] , где R , G , и B – насыщенности красного , зеленого и синего цветов , которые задаются десятичными числами от 0 до 255 :

p { color: rgb(255, 0, 0);}

Значением вида – rgb [R]% , [G]% , [B%] , где R% , G% , и B% – насыщенности красного , зеленого и синего цветов , которые задаются в процентах:

p { color: rgb(100%, 0%, 0%);}

Все перечисленные примеры задают красный цвет .

Цветовые значения RGBA

Функция – rgba () определяет цвета, используя модель красный – зеленый – синий – альфа (RGBA).

Значения цвета RGBA являются расширением значений цвета RGB с альфа – каналом, который определяет непрозрачность цвета.

p { color: rgb(255, 0, 0, 0.5);}

Во всех этих примерах указан один и тот же цвет:

em {color: rgb(255,0,0)} / * Целочисленный диапазон 0–255 * /
em {color: rgba(255,0,0,1) / * То же самое, с явной непрозрачностью 1 * /
em {color: rgb(100%, 0%, 0%)} / * Диапазон значений с плавающей запятой 0,0% - 100,0% * /
em {color: rgba(100%, 0%, 0%, 1)} / * То же самое, с явной непрозрачностью 1 * /

В отличие от значений RGB, для значения RGBA нет шестнадцатеричной записи.

Формат значения RGBA в функциональной нотации: ' rgba(', за которым следует список из трех числовых значений, разделенных запятыми (либо три целочисленных значения, либо три процентных значения), за которым следует <alphavalue> , за которым следует ' )'. Целочисленное значение 255 соответствует 100%, rgba (255,255,255,0,8) = rgba (100%, 100%, 100%, 0,8). Допускаются символы пробела вокруг числовых значений.

Реализации должны обрезать красный, зеленый и синий компоненты значений цвета RGBA в гамме устройства в соответствии с правилами для значения цвета RGB, составленного из этих компонентов.

Эти примеры определяют эффекты, которые возможны с помощью нотации rgba ():

p {color: rgba(0,0,255,0.5)} / * Полупрозрачный сплошной синий * /
p {color: rgba(100%, 50%, 0%, 0.1)} / /* Очень прозрачный сплошной оранжевый * /

Если значения RGBA не поддерживаются пользовательским агентом, они должны рассматриваться как нераспознанные значения в соответствии с правилами синтаксического анализа прямой совместимости CSS ( [CSS21] , Глава 4). Значения RGBA должны не рассматриваться как просто значение RGB с непрозрачностью проигнорировано.

Цветовая модель HSL

Цветовая модель HSL является представлением модели RGB в цилиндрической системе координат. HSL представляет цвета более интуитивным и понятным для восприятия образом, чем типичное RGB. Модель часто используется в графических приложениях, в палитрах цветов, и для анализа изображений.

HSL – расшифровывается как Hue ( цвет/оттенок), Saturation ( насыщенность), Lightness/Luminance ( светлота/светлость/светимость, не путать с яркостью).

Hue – задаёт положение цвета на цветовом круге ( от 0 до 360). Saturation является процентным значением насыщенности ( от 0% до 100%). Lightness является процентным значением светлости ( от 0% до 100%).

h1 {color : hsl(120, 100%, 50%); }  /* Зелёный */
h2 {color : hsl(120, 100%, 75%); }  /* Светло-зелёный */
h3 {color : hsl(120, 100%, 25%); }  /* Тёмно-зелёный */
h4 {color : hsl(120,  60%, 70%); }  /* Пастельный зеленый */

По аналогии с RGB/RGBA, для HSL имеется режим HSLA с поддержкой альфа – канала для указания непрозрачности объекта.

Значение цвета HSLA задается в виде: hsla(hueHSLA, saturationHSLA, lightnessHSLA, alphaHSLA). Параметр alphaHSLA — это число в диапазоне от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).

h1 {color : hsl(120, 100%, 50%); }  /* Зелёный в обычном HSL */
h2 {color : hsla(120, 100%, 50%, 1); }  /* Тот же зелёный в HSLA, потому как непрозрачность: 100% */
h3 {color : hsla(120, 100%, 50%, 0.5); }  /* Непрозрачность: 50% */
h4 {color : hsla(120, 100%, 50%, .15,5); }  /* Непрозрачность: 15.5% */
h5 {color : hsla(120, 100%, 50%, 0); }  /* Полностью прозрачный */

Содержимое файла style.css

@charset "utf-8"   /* Кодировка файла */
  /* Так можно вставить комментарий */
@media screen and (max-width: 767px) {
body {
  max-width: 767px;
  height auto;
}
}
body {  /* Стиль для всего документа */
  font-size: 16pt;
  color: black;
  font-family: "Verdana";
}
h1 {color : hsl(120, 100%, 50%); }  /* Зелёный в обычном HSL */
h2 {color : hsla(120, 100%, 50%, 1); }  /* Тот же зелёный в HSLA, потому как непрозрачность: 100% */
h3 {color : hsla(120, 100%, 50%, 0.5); }  /* Непрозрачность: 50% */
h4 {color : hsla(120, 100%, 50%, .155); }  /* Непрозрачность: 15.5% */
h5 {color : hsla(120, 100%, 50%, 0); }  /* Полностью прозрачный */
# p1{ color: #ff0000; } /* Красный */
#p2{ color: #00ff00; } /* Зелёный */
#p3{ color: #0000ff; } /* Синий */
#p4{ color: #00f; } /* Синий, сокращённая запись */

Содержимое файла index.html

<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Цвет в CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Зелёный в обычном HSL$</h1>
<h2>Тот же зелёный в HSLA, потому как непрозрачность: 100%</h2>
<h3>Непрозрачность: 50%</h3>
<h4>Непрозрачность: 15.5%</h4>
<h5>Полностью прозрачный</h5>
<h2>Цвета RGB с непрозрачностью</h2>
<p id="p1">Красный</p>
<p id="p2">Зелёный</p>
<p id="p3">Синий</p>
<p id="p4">Тот же синий, сокращённая запись</p>
</body>
</html>

Открыть пример в новом окне

Примеры HSL

Каждая таблица ниже представляет один оттенок. Из цветового круга были выбраны двенадцать равноудаленных цветов (то есть с интервалом 30 °): красный, желтый, зеленый, голубой, синий, пурпурный, со всеми промежуточными цветами (последний - цвет между пурпурным и красным).

Ось X каждой таблицы представляет насыщенность (100%, 75%, 50%, 25%, 0%).

Ось Y представляет яркость. 50% - это «нормально».

Таблица цветов HSL

h1 {color :  hsla(0, 100%, 38%, 1); }

h1 {color :  hsla(30, 100%, 38%, 1); }

h1 {color :  hsla(60, 100%, 38%, 1); }

h1 {color :  hsla(90, 100%, 38%, 1); }

h1 {color :  hsla(120, 100%, 38%, 1); }

h1 {color :  hsla(150, 100%, 38%, 1); }

h1 {color :  hsla(180, 100%, 38%, 1); }

h1 {color :  hsla(210, 100%, 38%, 1); }

h1 {color :  hsla(240, 100%, 38%, 1); }

h1 {color :  hsla(270, 100%, 38%, 1); }

h1 {color :  hsla(300, 100%, 38%, 1); }

h1 {color :  hsla(330, 100%, 38%, 1); }

Точно так же, как rgb()функциональная нотация имеет rgba()альфа-аналог, hsl()функциональная нотация имеет hsla()альфа-аналог. Подробнее см. Простой альфа-композитинг . В этих примерах указан один и тот же цвет:

p {color: hsl(120, 100%, 50%)} / * Зеленый * /
p {color: hsla(120, 100%, 50%, 1)} / * То же самое, с явной непрозрачностью 1 * /

Формат значения цвета HSLA в функциональной записи: ' hsla(', за которым следует оттенок в градусах, насыщенность и яркость в процентах, и <alphavalue> , за которым следует ' )'. Допускаются символы пробела вокруг числовых значений.

Реализации должны обрезать компоненты оттенка, насыщенности и яркости значений цвета HSLA в гамме устройства в соответствии с правилами для значения цвета HSL, составленного из этих компонентов.

Эти примеры определяют эффекты, которые возможны с нотацией hsla ():

p {color: hsla(240, 100%, 50%, 0.5)} / * Полупрозрачный сплошной синий * /
p {color: hsla(30, 100%, 50%, 0.1)} / * Очень прозрачный сплошной оранжевый * /

Ключевое слово цвета - transparen

Полностью прозрачный. Это ключевое слово можно рассматривать как сокращение для прозрачного черного, rgba (0,0,0,0), которое является его вычисленным значением.

p { color: transparent; }

Расширенная таблица цветов

В таблице ниже представлен список цветов X11 [X11COLORS], поддерживаемых популярными браузерами, с добавлением серых / серых вариантов из SVG 1.0. Полученный список в точности совпадает с именами ключевых слов цвета SVG 1.0. Эта спецификация расширяет их определение за пределы SVG. Два образца цвета слева иллюстрируют установку цвета фона ячейки таблицы двумя способами: в первом столбце используется указанное значение цвета, а во втором столбце - соответствующее числовое значение цвета.

Расширенная таблица цветов