Значения цвета CSS

Веб определяет набор стандартных имён цветов, позволяющих использовать ключевые слова вместо числовых представлений для описания цветов. Это более простой, но и более ограниченный подход — может не быть ключевого слова, представляющего именно тот цвет, который вы хотите использовать.

Ключевые слова цветов включают стандартные первичные и вторичные цвета (такие как red, blue, или orange), оттенки серого (от black до white, включая цвета вроде darkgray и lightgrey ), и множество других смешанных цветов, включая lightseagreen, cornflowerblue, и rebeccapurple . Имена цветов используют модель RGB и связаны с цветовым пространством sRGB (srgb).

Существует более 160 имён цветов. Среди них есть цвета особого интереса: transparent устанавливает прозрачное значение цвета, а currentcolor устанавливает текущее значение свойства CSS color. Также существуют имена цветов <system-color>, такие как accentcolortext и buttonface, отражающие стандартные цветовые предпочтения пользователя, браузера или операционной системы.

Все ключевые слова цветов нечувствительны к регистру. Дополнительную информацию о ключевых словах цветов см. в типе данных <named-color>.

Существует два основных способа определения цвета RGB по составляющим красного, зеленого и синего цветов в CSS — шестнадцатеричные и rgb() значения. Как и именованные цвета, эти методы используют модель RGB и связаны с цветовым пространством sRGB (srgb). Однако они позволяют указать гораздо больший диапазон цветов.

Шестнадцатеричная (hex) строковая нотация использует шестнадцатеричное значение для представления каждой составляющей (красного, зеленого и синего) цвета RGB. Она также может включать четвёртую составляющую: альфа-канал (или непрозрачность).

Цвет в шестнадцатеричной строковой нотации всегда начинается с символа "#". После этого следуют шестнадцатеричные цифры кода цвета. Строка нечувствительна к регистру.

"#rrggbb"

Указывает полностью непрозрачный цвет, красная составляющая которого — шестнадцатеричное число 0xrr, зелёная — 0xgg, а синяя — 0xbb.

"#rrggbbaa"

Указывает цвет, красная составляющая которого — шестнадцатеричное число 0xrr, зелёная — 0xgg, а синяя — 0xbb. Альфа-канал задаётся значением 0xaa; чем меньше это значение, тем более прозрачным становится цвет.

"#rgb"

Указывает цвет, красная составляющая которого — шестнадцатеричное число 0xrr, зелёная — 0xgg, а синяя — 0xbb.

"#rgba"

Указывает цвет, красная составляющая которого — шестнадцатеричное число 0xrr, зелёная — 0xgg, а синяя — 0xbb. Альфа-канал задаётся значением 0xaa; чем меньше это значение, тем более прозрачным становится цвет.

Как показано выше, красную, зелёную и синюю составляющие можно представить как двухзначные шестнадцатеричные значения, представляющие число от 0 (00) до 255 (FF) или однозначные шестнадцатеричные значения (число от 0 (0) до 15 (F).

Эти два шестнадцатеричных цвета являются эквивалентными значениями цвета; оба — красный:

color: #ff0000;
color: #f00;

Все компоненты обязательно должны быть указаны с одинаковым количеством цифр. Если вы используете однозначную нотацию, конечный цвет вычисляется, используя каждую цифру компонента дважды; то есть "#D" становится "#DD" при отрисовке.

Чтобы сделать значения 25% непрозрачными, добавьте значение альфа-канала, как показано ниже:

color: #ff000044;
color: #f004;

Дополнительную информацию о шестнадцатеричной строковой нотации для цветов см. в типе данных <hex-color>.

Тип ввода цвета HTML

Существует множество ситуаций, когда вашему веб-сайту может понадобиться позволить пользователю выбрать цвет. Возможно, у вас есть настраиваемый пользовательский интерфейс или вы реализуете приложение для рисования. Возможно, у вас есть редактируемый текст, и вам нужно дать пользователю возможность выбрать цвет текста. Или, возможно, ваше приложение позволяет пользователю назначать цвета папкам или элементам. В таких случаях у элемента <input> есть тип "color" type, который отображает средство выбора цвета.

Этот пример позволяет вам выбрать цвет. После выбора border-color устанавливается в этот цвет, а значение отображается.

<div id="box">
  <label for="colorPicker">Border color:</label>
  <input type="color" value="#8888ff" id="colorPicker" />
  <output></output>
</div>

HTML создаёт поле, содержащее средство выбора цвета (с меткой, созданной с помощью элемента <label>), и пустой элемент <output>, в который мы выведем значение цвета с помощью JavaScript. Значение ввода цвета всегда является шестнадцатеричной строкой.

Следующий JavaScript обновляет цвет границы до соответствия начальному значению средства выбора цвета, а затем добавляет два обработчика событий к элементу <input type="color">, чтобы реагировать на изменения его значения.

const colorPicker = document.querySelector("#colorPicker");
const box = document.querySelector("#box");
const output = document.querySelector("output");

box.style.borderColor = colorPicker.value;

colorPicker.addEventListener(
  "input",
  (event) => {
    box.style.borderColor = event.target.value;
  },
  false,
);

colorPicker.addEventListener(
  "change",
  (event) => {
    output.innerText = `${colorPicker.value}`;
  },
  false,
);

Событие input отправляется каждый раз, когда значение элемента изменяется; то есть каждый раз, когда пользователь изменяет цвет в средстве выбора цвета. Каждый раз, когда это событие поступает, мы устанавливаем цвет границы поля в соответствии с текущим значением средства выбора цвета.

Событие change обрабатывается, когда значение средства выбора цвета окончательно определено. Мы реагируем, установив содержимое <output> в строковое значение выбранного цвета.

Функциональная запись RGB (Red/Green/Blue), подобно шестнадцатеричной строковой записи, представляет цвета с помощью компонентов красного, зеленого и синего (и, необязательно, компонента альфа-канала для непрозрачности). Однако вместо использования строки цвет определяется с помощью CSS-функции rgb(). Эта функция принимает 3 или 4 входных параметра — значения компонентов красного, зеленого и синего и необязательное значение альфа-канала.

Допустимые значения для каждого из этих параметров:

red, green, и blue

Каждое должно быть значением <number> от 0 до 255 (включительно), <percentage> от 0% до 100% или ключевым словом none, которое в этом случае равно 0.

alpha

Альфа-канал задаётся в процентах от 0% (полностью прозрачный) до 100% (полностью непрозрачный), или числом от 0.0 (эквивалентно 0%) до 1.0 (эквивалентно 100%).

Например, яркий красный цвет с 50% непрозрачностью можно представить как rgb(255 0 0 / 50%) или rgb(100% 0 0 / 0.5).

Дополнительную информацию о функциональной записи RGB см. в функции цвета rgb().

Функции цвета, имеющие компонент <hue> — угол из цветового круга данной цветовой модели srgb — включают функции цвета hsl() и hwb(), функцию CIElab lch() и функцию цвета OKLab oklch(). Эти функции цвета более интуитивны, так как оттенок позволяет нам определить различие или сходство между цветами, такими как красный, оранжевый, жёлтый, зелёный, синий и т. д.

Функция цвета hsl() CSS была первой функцией цвета на основе оттенка, поддерживаемой браузерами. hsl() более интуитивна, чем rgb() — легче определить эффект изменения оттенка (h), насыщенности (s) и светлоты (l) по сравнению с указанием конкретных цветов через значения каналов красного, зелёного и синего. Кроме того, HSL похожа на цветовой пикер HSB (оттенок, насыщенность и яркость) в Photoshop, что сделало её сразу же понятной многим людям, когда она была впервые поддержана.

Функции цвета hsl() и hwb() sRGB являются цилиндрическими. Оттенок определяет цвет как <angle> на круговом цветовом круге. Диаграмма ниже показывает цилиндр HSL.

Насыщенность — это процент, который определяет, как далеко цвет находится по шкале между полностью сероватым и максимальным возможным количеством данного оттенка. По мере увеличения значения светлоты цвет переходит от самого тёмного к самому светлому возможным цвету (от чёрного до белого).

Изображение предоставлено пользователем SharkD на Wikipedia и распространяется под лицензией CC BY-SA 3.0.

Значение компонента оттенка (H) цвета HSL (или HWB) — это угол, который начинается с 0° как красный, затем проходит через жёлтый, зелёный, голубой, синий и пурпурный, прежде чем вернуться к красному снова на 360°. Значение может быть указано в любой единице <angle>, поддерживаемой CSS, включая градусы (deg), радиан (rad), градиан (grad) или обороты (turn). Значение оттенка определяет, каким является основной оттенок цвета, но не управляет тем, насколько ярким или тусклым, или насколько светлым или тёмным является цвет.

Компонент насыщенности (S) цвета указывает процент конечного цвета, состоящий из указанного оттенка, причём 100% — это полностью насыщенный цвет, а 0% — полное отсутствие цвета (сероватый). Компонент светлоты (L) указывает, насколько светлый цвет на скользящей шкале между полностью чёрным (0%) и полностью белым (100%). Также можно необязательно включить альфа-канал, предварив его слэшем (/), чтобы цвет был менее чем на 100% непрозрачным.

Вот несколько примеров цветов в нотации HSL:

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notation</th>
      <th scope="col">Example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg 0% 50%)</code></td>
      <td style="background-color: hsl(90deg 0% 50%);">&nbsp;</td>
    </tr>
    <tr>
      <td><code>hsl(90 100% 50%)</code></td>
      <td style="background-color: hsl(90 100% 50%);">&nbsp;</td>
    </tr>
    <tr>
      <td><code>hsl(0.15turn 50% 75%)</code></td>
      <td style="background-color: hsl(0.15turn 50% 75%);">&nbsp;</td>
    </tr>
    <tr>
      <td><code>hsl(0.15turn 90% 75%)</code></td>
      <td style="background-color: hsl(0.15turn 90% 75%);">&nbsp;</td>
    </tr>
    <tr>
      <td><code>hsl(0.15turn 90% 50%)</code></td>
      <td style="background-color: hsl(0.15turn 90% 50%);">&nbsp;</td>
    </tr>
    <tr>
      <td><code>hsl(270deg 90% 50% / 50%)</code></td>
      <td style="background-color: hsl(270deg 90% 50% / 50%);">&nbsp;</td>
    </tr>
  </tbody>
</table>

Последнее значение — полупрозрачное; оно включает необязательное значение альфа, предваряемое слэшем.

Функция цвета hwb() использует ту же систему координат оттенка, что и hsl(), где 0deg — красный. Однако вместо светлоты и насыщенности hsl(), функции hwb() определяют белизну (W) и чернильность (B). Эта функция также довольно интуитивна — позволяя вам выбрать оттенок, а затем смешать в нём количества белого и/или чёрного, чтобы получить желаемый цвет.

Значения W и B варьируются от 0% до 100% (или 0 до 1). Если суммарное значение W и B составляет 100% (или 1) или больше, цвет будет серым, аналогично установке s на 0% с hsl(). Как и в hsl(), необязательное значение альфа можно включить, предварив его слэшем /.

Вот несколько примеров использования нотации HWB:

/* These examples all specify varying shades of a lime green. */
hwb(90 10% 10%)
hwb(90 50% 10%)
hwb(90deg 10% 10%)
hwb(1.5708rad 60% 0%)
hwb(.25turn 0% 40%)

/* Same lime green but with an alpha value */
hwb(90 10% 10% / 0.5)
hwb(90 10% 10% / 50%)

В следующих примерах мы устанавливаем те же оттенки, что и в примерах hsl(), но мы добавляем белизну и чернильность к каждому оттенку через hwb() вместо насыщенности и светлоты:

<table>
  <thead>
    <tr>
      <th scope="col">Color in HWB notation</th>
      <th scope="col">Example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>hwb(90deg 50% 50%)</code></td>
      <td style="background-color: hwb(90deg 50% 50%);">&nbsp;</td>
    </tr>
    <tr>
      <td><code>hwb(90 0% 0%)</code></td>
      <td style="background-color: hwb(90 0% 0%);">&nbsp;</td>
    </tr>
    <tr>
      <td><code>hwb(0.15turn 25% 0%)</code></td>
      <td style="background-color: hwb(0.15turn 25% 0%);">&nbsp;</td>
    </tr>
    <tr>
      <td><code>hwb(0.15turn 10% 25%)</code></td>
      <td style="background-color: hwb(0.15turn 10% 25%);">&nbsp;</td>
    </tr>
    <tr>
      <td><code>hwb(1turn 10% 65%)</code></td>
      <td style="background-color: hwb(1turn 10% 65%);">&nbsp;</td>
    </tr>
    <tr>
      <td><code>hwb(270deg 75% 10%)</code></td>
      <td style="background-color: hwb(270deg 75% 10%);">&nbsp;</td>
    </tr>
  </tbody>
</table>

Хотя hsl() и hwb() интуитивно понятны, у них есть существенный недостаток. При использовании этих функций каждый полностью насыщенный оттенок (hsl(<angle> 100% 50%) или hwb(<angle> 0% 0%)) имеет одинаковую светлоту, но это не соответствует работе человеческого зрения или мониторов. Текст белого цвета на полностью насыщенном синем (hsl(240deg 100% 50%)) читается, но тот же текст на полностью насыщенном желтом (hsl(60deg 100% 50%)) будет не только нечитаемым, но и может навредить глазам пользователя. В этих цветовых функциях светлота цвета относительна к другим цветам, а не к восприятию человеком. На самом деле, не все оттенки имеют одинаковую максимальную насыщенность.

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

Цветовые пространства CIELAB и Oklab представляют весь спектр цветов, которые может видеть человек. Цветовые функции CIE lab включают lch() и lab(). Цветовые функции Oklab включают oklch() и oklab(). Основная цель этих моделей заключается в их равномерности, так что заданное расстояние между любыми двумя точками в цветовом пространстве должно казаться одинаково разным для наблюдателя. Oklab — это цветовое пространство, использующее тот же тип модели, что и CIELAB, но построенное с использованием дополнительных шагов численной оптимизации, поэтому значения считаются более точными, чем CIELAB. Благодаря этой оптимизации оттенки более равномерны с точки зрения восприятия.

Функции lch() и oklch() используют светлоту (L), хроматичность (C) и оттенок (H) и рассматриваются более подробно в этом разделе. Функции lab() и oklab() работают по-другому, используя светлоту (L), значение красного/зелёного (по оси a) и значение жёлтого/синего (по оси b). Эти оси называются прямоугольными координатами. Основное преимущество этих цветовых функций заключается в том, что «светлота» — это воспринятая светлота; это яркость цвета, воспринимаемая человеческим глазом, а не светлота по сравнению с другими цветами.

Подобно цветовым функциям оттенка sRGB, значение оттенка (h) в lch() и oklch() — это число, угол или ключевое слово none (эквивалентное 0deg) , представляющее угловой оттенок цвета. Однако цвета при каждом значении угла не одинаковы. Углы, соответствующие определённым оттенкам, различаются в цветовых пространствах sRGB, CIELAB (используемых в lch()) и Oklab (используемых в oklch()).

Следующие градиенты демонстрируют цвета оттенков при каждом угле от 0deg до 360deg в цветовых пространствах sRGB, CIE Lab и OKlab:

Вы можете заметить, что яркость последующих градиентов более равномерна по всему спектру оттенков, чем градиент sRGB. Выберите флажок в примере выше, чтобы преобразовать градиент оттенков в градации серого, чтобы это было более заметно.

Обратите также внимание на то, что диапазон синих значений в CIE Lab шире, чем в двух других. В этом разница между lch() и oklch(). Расширенный диапазон синего в lch() обусловлен ошибкой, которая смещает хроматичность и светлоту значений оттенков между 270deg и 330deg. Эта ошибка была исправлена в цветовом пространстве oklab, и поэтому обозначение цвета oklch().

Как обсуждалось выше, оттенок (H) в lch() и oklch() представляет собой <angle>, number или ключевое слово none. Значение lightness — это либо <percentage>, либо для lch() число от 0 до 100, а для oklch() — число от 0 до 1, где 0 или 0% обозначают полное отсутствие светлоты, то есть чёрный цвет.

Значение C — это <number>, <percentage> или ключевое слово none (эквивалентное 0%) — это хроматичность цвета, или «количество цвета». Это аналогично значению насыщенности S цветовой функции hsl(). Значение 0 — это полное отсутствие хроматичности или насыщенности, что приводит к серому цвету между белым и чёрным включительно, в зависимости от значения светлоты. Теоретически значения могут быть неограниченными, с 100% равным 150 для lch() и 0.4 с oklch().

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

В примере ниже показано влияние изменения значения светлоты в функциях lch() и oklch().

Функциональное обозначение lab() выражает заданный цвет в цветовом пространстве CIE L*a*b*. Функция oklab() определяет цвета в цветовом пространстве OKLab. Эти функции представляют весь спектр цветов, которые может видеть человек, определяя светлоту (L), значение оси красный/зеленый (a), значение оси синий/жёлтый (b) и необязательное значение альфа-прозрачности.

Подобно lch() и oklch(), значение lightness может быть:

• Значением <percentage>, где 0% — это полностью чёрный цвет, а 100% — это полностью белый цвет.
• Числом от 0 до 100 для lab() и 0, и числом от 1 до oklab() для oklab(), где 0 — это полностью чёрный цвет, а 1/100 — это полностью белый цвет.

Значение a — это <number> между -125 и 125 для lab() или между -0.4 и 0.4 для oklab(), <percentage> между -100% и 100%, или ключевое слово none (эквивалентное 0% в этом случае). Это значение указывает на расстояние цвета вдоль оси a в цветовом пространстве, что определяет, насколько зелёным (в направлении −100%) или красным (в направлении +100%) является цвет.

Обратите внимание, что эти значения являются знаковыми (разрешая как положительные, так и отрицательные значения) и теоретически неограниченными, что означает, что вы можете задавать значения вне пределов ±125 или ±0,4 (±100%). На практике значения не могут превышать ±160 или ±0,5 соответственно.

Значение b имеет те же ограничения. Оно указывает на расстояние цвета вдоль оси b в цветовом пространстве, что определяет, насколько синим (в направлении −100%) или жёлтым (в направлении +100%) является цвет.

В следующем примере показано влияние изменения оси a с помощью функции lab() и оси b с помощью функции oklab().

Если вы хотите получить явный контроль над цветовыми пространствами при определении цветов, вы можете использовать функцию color().

Это полезно для описания цвета для устройств высокого разрешения с более широкими цветовыми диапазонами. Например, если вы хотели показать цвет display-p3 0 0 1, который находится за пределами диапазона sRGB, вы могли бы использовать правило @media @media color-gamut, чтобы определить, поддерживает ли оборудование клиента цвета в этом диапазоне, прежде чем пытаться использовать его:

.vibrant {
  background-color: color(srgb 0 0 1);
}

@media (color-gamut: p3) {
  .vibrant {
    background-color: color(display-p3 0 0 1);
    /* Equivalent to out-of-gamut color(srgb 0 0 1.042) */
  }
}

Понимание color() важно, когда дело доходит до относительных цветов, которые будут обсуждаться далее. Более старые обозначения цвета sRGB, обсуждавшиеся выше — hsl(), hwb(), и rgb()— не выражают весь спектр видимых цветов, тогда как функция color() поддерживает гораздо более широкий цветовой охват. В результате, когда для определения относительных цветов используются более старые типы функций, цвет, возвращаемый при запросе свойства HTMLElement.style или метода CSSStyleDeclaration.getPropertyValue(), будет представлять собой значение color(srgb ...).

Чтобы увидеть пример преобразования цветовых функций hsl(), hwb(), и rgb() в color() в цветовом пространстве srgb, ознакомьтесь с нашим инструментом выбора цвета.

Каждая функция цвета, перечисленные выше, может быть использована для определения относительных цветов, что позволяет <color> значения определять относительно других существующих цветов, а не каждый раз определять значение цвета с нуля. Эта мощная функция позволяет создавать дополнения к существующим цветам — такие как более светлые, темные, насыщенные, полупрозрачные или инвертированные варианты исходного цвета. Относительные цвета обеспечивают эффективный механизм для создания палитр и определения корректировок цвета. Подробнее об их относительных синтаксисах см. на странице каждой функции цвета.

Как указано выше, при использовании rgb(), hsl(), или hwb() для вывода относительного цвета, выходной цвет будет функцией color() в цветовом пространстве srgb.

Функция color-mix() принимает два значения цвета любого синтаксиса, упомянутого выше, необязательно с процентными значениями пропорциональности для каждого цвета, и возвращает результат их смешивания в заданном цветовом пространстве на заданную величину.

Функция light-dark() позволяет указывать два значения цвета для свойства, предназначенного для использования в светлых и темных цветовых схемах соответственно. Какой из них будет установлен, зависит от того, задал ли разработчик или пользователь светлую или темную цветовую схему. Это функция-короткое обозначение, позволяющая добиться тех же результатов, что и запрос к медиа-свойству prefers-color-scheme, но с меньшим количеством кода.

• Применение цвета к элементам HTML с помощью CSS
• Использование цвета разумно
• Использование относительных цветов
• Понимание цвета и яркости
• WCAG 1.4.1: Контрастность цветов
• Модуль цветов CSS