<color>
=======

Тип **`<color>`** CSS data type предоставляет цвет в цветовом спектре sRGB. В `<color>` может включать значения прозрачности Альфа-канала (alpha-channel), указывающие, как цвет сочетается с его фоном.

В `<color>` может быть определена любым из следующих способов can.

* Использование или подключённого свойства ведённого в параметр (например, `blue` или `transparent`)
* Использование кубической системы координат RGB (via the #-hexadecimal or the `rgb()` and `rgba()` functional notations)
 ![Цветовая модель представлена виде куба](https://en.wikipedia.org/wiki/RGB_color_model#/media/File:RGB_color_solid_cube.png)
* Использование цилиндрической системы координат HSL (через функциональные обозначения `hsl()` и `hsla()`)

> 
> \*\*Примечание:\*\*В этой статье подробно описывается тип данных <color>. Дополнительные сведения об использовании цвета в HTML см. В разделе применение цвета к элементам HTML с помощью CSS.
> 
> 
> 

Синтаксис
---------

Для типа данных задаётся `<color>` с помощью одного из следующих параметров.

**Примечание:** значения `<color>` точно определены, их фактический внешний вид может отличаться (иногда значительно) от устройства к устройству. Это связано с тем что большинство устройств не откалиброваны, а некоторые браузеры не поддерживают цветовые профили устройств вывода.

### Ключевые цвета

Ключевые слова для цвета - это идентификаторы без учёта регистра, представляющие определённый цвет, например `red`, `blue`, `black` или `lightseagreen`. Хотя названия более или менее описывают их соответствующие цвета, они по существу искусственны, без строгого обоснования используемых имён.

Есть несколько предостережений, которые следует учитывать при использовании ключевых слов цвета:

* HTML распознает только 16 основных цветовых ключевых слов, найденных в CSS1, используя определённый алгоритм для преобразования нераспознанных значений (часто в совершенно разные цвета). Другие ключевые слова цвета должны использоваться только в CSS и SVG.
* В отличие от HTML, CSS будет полностью игнорировать неизвестные ключевые слова.
* Ключевые слова цвета все представляют собой простые, сплошные цвета, без прозрачности.
* Несколько ключевых слов являются псевдонимами друг для друга:
    + `aqua` / `cyan`
    + `fuchsia` / `magenta`
    + `darkgray` / `darkgrey`
    + `darkslategray` / `darkslategrey`
    + `dimgray` / `dimgrey`
    + `lightgray` / `lightgrey`
    + `lightslategray` / `lightslategrey`
    + `gray` / `grey`
    + `slategray` / `slategrey`
* Хотя многие ключевые слова были адаптированы из X11, их значения RGB могут отличаться от соответствующего цвета в системах X11, поскольку производители иногда адаптируют цвета X11 к своему конкретному оборудованию.

**Примечание:** Список принятых ключевых слов претерпел много изменений в ходе эволюции CSS:

* CSS Level 1 включал только 16 основных цветов, называемых цветами VGA, поскольку они были взяты из набора отображаемых цветов на видеокартах VGA
* CSS Level 2 добавил ключевое слово `orange`.
* Хотя различные цвета не в спецификации (в основном адаптированные из списка цветов X11) поддерживались ранними браузерами, они не были формально определены до уровня SVG 1.0 и CSS Colors 3. Они называются расширенными цветовыми *ключевыми* словами, *цветами X11* или цветами SVG.
* CSS Colors Level 4 добавил ключевое слово rebeccapurple, чтобы почтить пионера веб-Эрика Мейера.


| Спецификация | Эквивалент RGB | Ключевое слово | RGB hex значение | Видео сайта |
| --- | --- | --- | --- | --- |
| CSS Level 1 |  | `black` | `#000000` |  |
|  | `silver` | `#c0c0c0` |  |
|  | `gray` | `#808080` |  |
|  | `white` | `#ffffff` |  |
|  | `maroon` | `#800000` |  |
|  | `red` | `#ff0000` |  |
|  | `purple` | `#800080` |  |
|  | `fuchsia` | `#ff00ff` |  |
|  | `green` | `#008000` |  |
|  | `lime` | `#00ff00` |  |
|  | `olive` | `#808000` |  |
|  | `yellow` | `#ffff00` |  |
|  | `navy` | `#000080` |  |
|  | `blue` | `#0000ff` |  |
|  | `teal` | `#008080` |  |
|  | `aqua` | `#00ffff` |  |
| CSS Level 2 (Revision 1) |  | `orange` | `#ffa500` |  |
| CSS Color Module Level 3 |  | `aliceblue` | `#f0f8ff` |  |
|  | `antiquewhite` | `#faebd7` |  |
|  | `aquamarine` | `#7fffd4` |  |
|  | `azure` | `#f0ffff` |  |
|  | `beige` | `#f5f5dc` |  |
|  | `bisque` | `#ffe4c4` |  |
|  | `blanchedalmond` | `#ffebcd` |  |
|  | `blueviolet` | `#8a2be2` |  |
|  | `brown` | `#a52a2a` |  |
|  | `burlywood` | `#deb887` |  |
|  | `cadetblue` | `#5f9ea0` |  |
|  | `chartreuse` | `#7fff00` |  |
|  | `chocolate` | `#d2691e` |  |
|  | `coral` | `#ff7f50` |  |
|  | `cornflowerblue` | `#6495ed` |  |
|  | `cornsilk` | `#fff8dc` |  |
|  | `crimson` | `#dc143c` |  |
|  | `cyan`(synonym of `aqua`) | `#00ffff` |  |
|  | `darkblue` | `#00008b` |  |
|  | `darkcyan` | `#008b8b` |  |
|  | `darkgoldenrod` | `#b8860b` |  |
|  | `darkgray` | `#a9a9a9` |  |
|  | `darkgreen` | `#006400` |  |
|  | `darkgrey` | `#a9a9a9` |  |
|  | `darkkhaki` | `#bdb76b` |  |
|  | `darkmagenta` | `#8b008b` |  |
|  | `darkolivegreen` | `#556b2f` |  |
|  | `darkorange` | `#ff8c00` |  |
|  | `darkorchid` | `#9932cc` |  |
|  | `darkred` | `#8b0000` |  |
|  | `darksalmon` | `#e9967a` |  |
|  | `darkseagreen` | `#8fbc8f` |  |
|  | `darkslateblue` | `#483d8b` |  |
|  | `darkslategray` | `#2f4f4f` |  |
|  | `darkslategrey` | `#2f4f4f` |  |
|  | `darkturquoise` | `#00ced1` |  |
|  | `darkviolet` | `#9400d3` |  |
|  | `deeppink` | `#ff1493` |  |
|  | `deepskyblue` | `#00bfff` |  |
|  | `dimgray` | `#696969` |  |
|  | `dimgrey` | `#696969` |  |
|  | `dodgerblue` | `#1e90ff` |  |
|  | `firebrick` | `#b22222` |  |
|  | `floralwhite` | `#fffaf0` |  |
|  | `forestgreen` | `#228b22` |  |
|  | `gainsboro` | `#dcdcdc` |  |
|  | `ghostwhite` | `#f8f8ff` |  |
|  | `gold` | `#ffd700` |  |
|  | `goldenrod` | `#daa520` |  |
|  | `greenyellow` | `#adff2f` |  |
|  | `grey` | `#808080` |  |
|  | `honeydew` | `#f0fff0` |  |
|  | `hotpink` | `#ff69b4` |  |
|  | `indianred` | `#cd5c5c` |  |
|  | `indigo` | `#4b0082` |  |
|  | `ivory` | `#fffff0` |  |
|  | `khaki` | `#f0e68c` |  |
|  | `lavender` | `#e6e6fa` |  |
|  | `lavenderblush` | `#fff0f5` |  |
|  | `lawngreen` | `#7cfc00` |  |
|  | `lemonchiffon` | `#fffacd` |  |
|  | `lightblue` | `#add8e6` |  |
|  | `lightcoral` | `#f08080` |  |
|  | `lightcyan` | `#e0ffff` |  |
|  | `lightgoldenrodyellow` | `#fafad2` |  |
|  | `lightgray` | `#d3d3d3` |  |
|  | `lightgreen` | `#90ee90` |  |
|  | `lightgrey` | `#d3d3d3` |  |
|  | `lightpink` | `#ffb6c1` |  |
|  | `lightsalmon` | `#ffa07a` |  |
|  | `lightseagreen` | `#20b2aa` |  |
|  | `lightskyblue` | `#87cefa` |  |
|  | `lightslategray` | `#778899` |  |
|  | `lightslategrey` | `#778899` |  |
|  | `lightsteelblue` | `#b0c4de` |  |
|  | `lightyellow` | `#ffffe0` |  |
|  | `limegreen` | `#32cd32` |  |
|  | `linen` | `#faf0e6` |  |
|  | `magenta`(synonym of `fuchsia`) | `#ff00ff` |  |
|  | `mediumaquamarine` | `#66cdaa` |  |
|  | `mediumblue` | `#0000cd` |  |
|  | `mediumorchid` | `#ba55d3` |  |
|  | `mediumpurple` | `#9370db` |  |
|  | `mediumseagreen` | `#3cb371` |  |
|  | `mediumslateblue` | `#7b68ee` |  |
|  | `mediumspringgreen` | `#00fa9a` |  |
|  | `mediumturquoise` | `#48d1cc` |  |
|  | `mediumvioletred` | `#c71585` |  |
|  | `midnightblue` | `#191970` |  |
|  | `mintcream` | `#f5fffa` |  |
|  | `mistyrose` | `#ffe4e1` |  |
|  | `moccasin` | `#ffe4b5` |  |
|  | `navajowhite` | `#ffdead` |  |
|  | `oldlace` | `#fdf5e6` |  |
|  | `olivedrab` | `#6b8e23` |  |
|  | `orangered` | `#ff4500` |  |
|  | `orchid` | `#da70d6` |  |
|  | `palegoldenrod` | `#eee8aa` |  |
|  | `palegreen` | `#98fb98` |  |
|  | `paleturquoise` | `#afeeee` |  |
|  | `palevioletred` | `#db7093` |  |
|  | `papayawhip` | `#ffefd5` |  |
|  | `peachpuff` | `#ffdab9` |  |
|  | `peru` | `#cd853f` |  |
|  | `pink` | `#ffc0cb` |  |
|  | `plum` | `#dda0dd` |  |
|  | `powderblue` | `#b0e0e6` |  |
|  | `rosybrown` | `#bc8f8f` |  |
|  | `royalblue` | `#4169e1` |  |
|  | `saddlebrown` | `#8b4513` |  |
|  | `salmon` | `#fa8072` |  |
|  | `sandybrown` | `#f4a460` |  |
|  | `seagreen` | `#2e8b57` |  |
|  | `seashell` | `#fff5ee` |  |
|  | `sienna` | `#a0522d` |  |
|  | `skyblue` | `#87ceeb` |  |
|  | `slateblue` | `#6a5acd` |  |
|  | `slategray` | `#708090` |  |
|  | `slategrey` | `#708090` |  |
|  | `snow` | `#fffafa` |  |
|  | `springgreen` | `#00ff7f` |  |
|  | `steelblue` | `#4682b4` |  |
|  | `tan` | `#d2b48c` |  |
|  | `thistle` | `#d8bfd8` |  |
|  | `tomato` | `#ff6347` |  |
|  | `turquoise` | `#40e0d0` |  |
|  | `violet` | `#ee82ee` |  |
|  | `wheat` | `#f5deb3` |  |
|  | `whitesmoke` | `#f5f5f5` |  |
|  | `yellowgreen` | `#9acd32` |  |
| CSS Color Module Level 4 |  | `rebeccapurple` | `#663399` |  |

### `Прозрачное` ключевое слово

Ключевое слово `transparent` представляет собой полностью прозрачный цвет. Это делает фон позади цветного элемента полностью видимым. Технически `transparent`- это ярлык для `rgba (0,0,0,0)`.

**Примечание:** чтобы предотвратить непредвиденное поведение, например, в `градиент`, текущая спецификация CSS утверждает, что `transparent` должен быть вычислен в Альфа-предварительно умноженном цветовом пространстве. Однако имейте в виду, что старые браузеры могут рассматривать его как чёрный с Альфа-значением `0`.

**Примечание:** `transparent` не был истинным цветом на уровне CSS 2 (Редакция 1). Это было специальное ключевое слово, которое можно было использовать вместо обычного значения `<color>` для двух свойств CSS: `background` и `border`. Он был существенно добавлен, чтобы позволить разработчикам переопределить унаследованный сплошной цвет. С появлением Альфа-каналов в CSS Colors Level 3, `transparent` был переопределён как истинный цвет. Теперь его можно использовать везде, где можно использовать значение `<color>`.

### `currentColor` ключевое слово

Ключевое слово `currentColor` представляет значение свойства элемента `color` (en-US). Это позволяет использовать значение `color` для свойств, которые не получают его по умолчанию.

Если текущий цвет используется в качестве значения свойства `color` , он вместо этого принимает его значение из наследуемого значения свойства `color`.

#### currentColor пример


```html
<div style="color:blue; border: 1px dashed currentColor;">
  Цвет текста-синий.
  <div style="background:currentColor; height:9px;"></div>
  This block is surrounded by a blue border.
</div>
```

### RGB цвет

Цветовая модель RGB определяет заданный цвет в соответствии с его красными, зелёными и синими компонентами. Дополнительный Альфа-компонент представляет прозрачность цвета.

#### Синтаксис

Цвета RGB могут быть выражены как шестнадцатеричными (с префиксом #), так и функциональными (`rgb ()`, `rgba ()`) нотациями.

**Примечание:** начиная с уровня цветов CSS 4, `rgba()` является псевдонимом для `rgb()`. В браузерах, реализующих стандарт уровня 4, они принимают одни и те же параметры и ведут себя одинаково.

Шестнадцатеричное представление: `#RRGGBB[AA]`

`R` (red), `G` (green), `B` (blue), and `A` (alpha) are hexadecimal characters (0-9, A-F). `A` is optional. For example, `#ff0000` is equivalent to `#ff0000ff`. `R` (красный), G (зелёный), B (синий) и A (Альфа) являются шестнадцатеричными символами (0-9, A-F). Это не является обязательным. Например, `#ff0000` эквивалентно `#ff0000ff`.

Шестнадцатеричное представление: `#RGB[A]`

`R` (красный), `G` (зелёный), `B` (синий) и `A` (Альфа) являются шестнадцатеричными символами (0-9, A-F). Это не является обязательным. Трёхзначная нотация (`#RGB`) является более короткой версией шестизначной формы (`#RRGGBB`). Например, `#f09` имеет тот же цвет, что и `#ff0099`. Кроме того, четырёхзначная нотация RGB (`#RGB`) является более короткой версией восьмизначной формы (`#RRGGBBAA`). Например, #0f38 имеет тот же цвет, что и `#00ff3388`.

Функциональная нотация: `rgb(R, G, B[, A])` или `rgba(R, G, B, A)`

`R` (красный), `G` (зелёный) и `B` (синий) могут быть либо `<number>`s, либо `<percentage>`s, где число `255` соответствует `100%`. А (Альфа) может быть `<number>` между `0` и `1` или `<percentage>`, где число 1 соответствует `100%` (полная непрозрачность).

Функциональная нотация: `rgb(R G B[ A])` or `rgba(R G B A)`

CSS Colors Level 4 добавляет поддержку разделённых пробелами значений в функциональной нотации.

#### Пример

##### RGB варианты синтаксиса

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


```css
/\* Все эти варианты синтаксиса задают один и тот же цвет: полностью непрозрачный ярко-розовый. \*/

/\* Шестнадцатеричный синтаксис \*/
#f09
#F09
#ff0099
#FF0099

/\* Функциональный синтаксис \*/
rgb(255,0,153)
rgb(255, 0, 153)
rgb(255, 0, 153.0)
rgb(100%,0%,60%)
rgb(100%, 0%, 60%)
rgb(100%, 0, 60%) /\* Ошибка! Не смешивайте цифры и проценты. \*/
rgb(255 0 153)

/\* Шестнадцатеричный синтаксис с Альфа-значением \*/
#f09f
#F09F
#ff0099ff
#FF0099FF

/\* Функциональный синтаксис с Альфа-значением \*/
rgb(255, 0, 153, 1)
rgb(255, 0, 153, 100%)

/\* Синтаксис пробелов \*/
rgb(255 0 153 / 1)
rgb(255 0 153 / 100%)

/\* Функциональный синтаксис со значением floats \*/
rgb(255, 0, 153.6, 1)
rgb(1e2, .5e1, .5e0, +.25e2%)
```


##### RGB вариации прозрачности


```css
/\* Шестнадцатеричный синтаксис \*/
#3a30                    /\* 0% непрозрачный зелёный цвет \*/
#3A3F                    /\* полный непрозрачный зелёный цвет \*/
#33aa3300                /\* 0% непрозрачный зелёный цвет \*/
#33AA3380                /\* 50% непрозрачный зелёный цвет \*/

/\* Функциональный синтаксис \*/
rgba(51, 170, 51, .1)    /\* непрозрачный зелёный цвет на 10% \*/
rgba(51, 170, 51, .4)    /\* непрозрачный зелёный цвет на \*/
rgba(51, 170, 51, .7)    /\* непрозрачный зелёный цвет на 70% \*/
rgba(51, 170, 51,  1)    /\* полный непрозрачный зелёный цвет \*/

/\* Синтаксис пробелов \*/
rgba(51 170 51 / 0.4)    /\* непрозрачный зелёный цвет на 40%\*/
rgba(51 170 51 / 40%)    /\* непрозрачный зелёный цвет на 40% \*/

/\* Функциональный синтаксис со значением floats \*/
rgba(255, 0, 153.6, 1)
rgba(1e2, .5e1, .5e0, +.25e2%)
```

### Цвет HSL

Цветовая модель HSL определяет заданный цвет в соответствии с его компонентами оттенка, насыщенности и яркости. Дополнительный Альфа-компонент представляет прозрачность цвета.

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

#### Синтаксис

Цвета HSL выражаются через функциональные обозначения `hsl()` и `hsla()`.

**Примечание:** Начиная с уровня цветов CSS 4, `hsla()` является псевдонимом для `hsl()`. В браузерах, реализующих стандарт уровня 4, они принимают одни и те же параметры и ведут себя одинаково.

Функциональная нотация: `hsl(H, S, L[, A])` или `hsla(H, S, L, A)`

`H` (hue) - это `<угол>` цветового круга, заданного в `deg`S, `rad`s, градусах или поворотах CSS Color Module Level 4. При записи в виде unitless `<number>` он интерпретируется как Градусы, как указано в CSS Color Module Level 3. По определению, red=deg=360 град, с другими цветами, распространёнными по кругу, поэтому green=120deg град, blue=240deg град и т. д. В качестве < угла > он неявно обёртывается таким образом, что -120deg=240deg, 480deg=120deg, -1turn=1turn, и т. д.`S` (`насыщенность`) и `L` (`лёгкость`) являются процентами. `100%` насыщенность полностью насыщена, в то время как 0% полностью ненасыщен (серый). `100%` лёгкость белый, `0%` лёгкость чёрный, и `50%` лёгкость "нормально". `A` (alpha) can be a `<number>` between `0` and `1`, or a `<percentage>`, where the number `1` corresponds to `100%` (full opacity). `A` (Альфа) может быть `<number>` между `0` и `1` или `<percentage>`, где число `1` соответствует `100%` (полная непрозрачность).

Функциональная нотация: `hsl(H S L[ A])` or `hsla(H S L A)`

CSS Colors Level 4 добавляет поддержку разделённых пробелами значений в функциональной нотации.

#### Examples

##### HSL варианты синтаксиса


```css
/\* Все эти примеры указывают один и тот же цвет: лаванда. \*/
hsl(270,60%,70%)
hsl(270, 60%, 70%)
hsl(270 60% 70%)
hsl(270deg, 60%, 70%)
hsl(4.71239rad, 60%, 70%)
hsl(.75turn, 60%, 70%)

/\* Все эти примеры указывают один и тот же цвет: лаванда, которая на 15% непрозрачна. \*/
hsl(270, 60%, 50%, .15)
hsl(270, 60%, 50%, 15%)
hsl(270 60% 50% / .15)
hsl(270 60% 50% / 15%)
```


##### Полностью насыщенные цвета

| Нотация | Описание: | Итог |
| --- | --- | --- |
| `hsl(0, 100%, 50%)` | red |  |
| `hsl(30, 100%, 50%)` | orange |  |
| `hsl(60, 100%, 50%)` | yellow |  |
| `hsl(90, 100%, 50%)` | lime green |  |
| `hsl(120, 100%, 50%)` | green |  |
| `hsl(150, 100%, 50%)` | blue-green |  |
| `hsl(180, 100%, 50%)` | cyan |  |
| `hsl(210, 100%, 50%)` | sky blue |  |
| `hsl(240, 100%, 50%)` | blue |  |
| `hsl(270, 100%, 50%)` | purple |  |
| `hsl(300, 100%, 50%)` | magenta |  |
| `hsl(330, 100%, 50%)` | pink |  |
| `hsl(360, 100%, 50%)` | red |  |

##### Более светлая и более тёмная зелень

| Нотация | Описание: | Итог |
| --- | --- | --- |
| `hsl(120, 100%, 0%)` | black |  |
| `hsl(120, 100%, 20%)` |  |  |
| `hsl(120, 100%, 40%)` |  |  |
| `hsl(120, 100%, 60%)` |  |  |
| `hsl(120, 100%, 80%)` |  |  |
| `hsl(120, 100%, 100%)` | white |  |

##### Насыщенная и ненасыщенная зелень

| Нотация | Описание: | Итог |
| --- | --- | --- |
| `hsl(120, 100%, 50%)` | green |  |
| `hsl(120, 80%, 50%)` |  |  |
| `hsl(120, 60%, 50%)` |  |  |
| `hsl(120, 40%, 50%)` |  |  |
| `hsl(120, 20%, 50%)` |  |  |
| `hsl(120, 0%, 50%)` | gray |  |

##### Вариации прозрачности HSL


```css
hsla(240, 100%, 50%, .05)     /\* непрозрачный синий на 5% \*/
hsla(240, 100%, 50%, .4)      /\* непрозрачный синий на 40% \*/
hsla(240, 100%, 50%, .7)      /\* непрозрачный синий на 70% \*/
hsla(240, 100%, 50%, 1)       /\* полный непрозрачный синий \*/

/\* Синтаксис пробелов \*/
hsla(240 100% 50% / .05)      /\* непрозрачный синий на 5% \*/

/\* Процентное значение для Альфа \*/
hsla(240 100% 50% / 5%)       /\* непрозрачный синий на 5% \*/
```

### Системный цвет

Не все системные цвета поддерживаются на всех системах. 
Устарело
 для использования на общедоступных веб-страницах.

ActiveBorder

Активная граница окна.

ActiveCaption

Активный заголовок окна. Должен использоваться с текстом `CaptionText` в качестве цвета переднего плана.

AppWorkspace

Цвет фона интерфейса нескольких документов.

Background

Фон рабочего стола.

ButtonFace

Цвет фона лица для трёхмерных элементов, которые появляются 3-D из-за одного слоя окружающей границы. Следует использовать с текстом `ButtonText` цвет переднего плана.

ButtonHighlight

Цвет границы, обращённой к источнику света для 3-D элементов, которые появляются 3-D из-за этого слоя окружающей границы.

ButtonShadow

Цвет границы вдали от источника света для 3-D элементов, которые появляются 3-D из-за этого слоя окружающей границы. Цвет границы находится вдали от источника света для трёхмерных элементов, которые появляются 3-D из-за этого слоя, окружающего границу.

ButtonText

Следует использовать с `ButtonFace` или `ThreeDFace` цвет фона.

CaptionText

Текст в заголовке, поле размера и поле со стрелкой прокрутки. Следует использовать с цветом фона `ActiveCaption`.

GrayText

Серый (отключён) текст.

Highlight

Элемент(ы), выбранный в элементе управления. Следует использовать с `HighlightText` текста цветом переднего плана.

HighlightText

Текст элемента(ов), выбранного в элементе управления. Следует использовать с подсветкой цвета фона.

InactiveBorder

Граница неактивного окна.

InactiveCaption

Заголовок неактивного окна. Должен использоваться с цветом переднего плана `InactiveCaptionText`.

InactiveCaptionText

Следует использовать с `InactiveCaption` неактивным цветом фона заголовка.

InfoBackground

Цвет фона для элементов управления всплывающей подсказки. Должен использоваться с цветом переднего плана `InfoText`.

InfoText

Цвет текста элементов подсказки. Должен использоваться с и `InfoBackground` фона.

Menu

Фон меню. Должен использоваться с `MenuText` или `-moz-MenuBarText` строки меню цвет переднего плана.

MenuText

Текст в меню. Следует использовать с меню Цвет фона.

Scrollbar

Цвет фона полос прокрутки.

ThreeDDarkShadow

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

ThreeDFace

Should be used with the `ButtonText` foreground color. Цвет фона лица для трёхмерных элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы. Следует использовать с текстом кнопки цвет переднего плана.

ThreeDHighlight

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

ThreeDLightShadow

Цвет более тёмной (обычно внутренней) из двух границ, обращённых к источнику света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы.

ThreeDShadow

Цвет более светлого (как правило, внутреннего) из двух границ от источника света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы.

Window

Фон окна. Следует использовать с `WindowText` цвет переднего плана.

WindowFrame

Оконная рама

WindowText

Текст в windows. Следует использовать с цветом фона окна.

### Расширенные Цвета Системы Mozilla

* -moz-ButtonDefault
    + : Цвет границы вокруг кнопки, которые обозначают действие по умолчанию для диалогового окна.
* -moz-ButtonHoverFace
    + : Цвет фона кнопки, на которую наведён указатель мыши (который будет Трёхлинейным или лицом кнопки, когда указатель мыши не находится над ним). Следует использовать с-moz-кнопка наведения текста цвет переднего плана.
* -moz-ButtonHoverText
    + : Цвет текста кнопки, на которую наведён указатель мыши (который будет ButtonText, когда указатель мыши не находится над ним). Следует использовать с-`-moz-ButtonHoverFace background` color.
* -moz-CellHighlight
    + : Цвет фона для выбранного элемента в виджете дерево. Следует использовать с цветом переднего плана `-moz-CellHighlightText`. Смотрите также`-moz-html-CellHighlight`.
* -moz-CellHighlightText
    + : Цвет текста для выбранного элемента в дереве. Следует использовать с цветом фона `moz-CellHighlight background`. Смотрите также `-moz-html-CellHighlightText` выделения ячейки.
* -moz-Combobox
    + : цвет фона для комбинированных полей `-moz-ComboboxText`. Должен использоваться с цветом переднего плана текста-moz-Combobox. В версиях до 1.9.2 вместо этого используйте `-moz-Field`.
* -moz-ComboboxText
    + : цвет текста для комбинированных полей. Следует использовать с цветом фона `-moz-Combobox`. В версиях до 1.9.2 вместо этого используйте `-moz-FieldText`.
* -moz-Dialog
    + : Цвет фона для диалоговых окон. Должен использоваться с цветом переднего плана -`-moz-DialogText`.
* -moz-DialogText
    + : Цвет текста для диалоговых окон. Должен использоваться с цветом фона `-moz-Dialog`.
* -moz-dragtargetzone
 -moz-EvenTreeRow
    + : цвет фона для чётных строк в дереве. Должен использоваться с цветом переднего плана `-moz-FieldText`. В версиях Gecko до 1.9, используйте-moz-поле. Смотрите также `-moz-OddTreeRow`.
* -moz-Field
    + : Text field background color. Should be used with the `-moz-FieldText` foreground color. Цвет фона текстового поля. Должен использоваться с цветом переднего плана`-moz-FieldText`.
* -moz-FieldText
    + : Text field text color. Should be used with the `-moz-Field`, `-moz-EvenTreeRow`, or `-moz-OddTreeRow` background color. Текстовое поле цвет текста. Следует использовать с `-moz-Field`, `-moz-EvenTreeRow` или `-moz-OddTreeRow` цветом фона строки дерева.
* -moz-html-CellHighlight
    + : Background color for highlighted item in HTML `<select>`s. Should be used with the `-moz-html-CellHighlightText` foreground color. Prior to Gecko 1.9, use `-moz-CellHighlight`. цвет фона для выделенного элемента в HTML `<select>` s. должен использоваться с цветом переднего плана `-moz-html-CellHighlight`. До Gecko 1.9, используйте `-moz-CellHighlightText`.
* -moz-html-CellHighlightText
    + : цвет текста для `-moz-html-CellHighlight` выделенных элементов в HTML `<select>` s. должен использоваться с цветом фона. До Gecko 1.9, используйте `moz-html-CellHighlight`.
* -moz-mac-accentdarkestshadow
 -moz-mac-accentdarkshadow
 -moz-mac-accentface
 -moz-mac-accentlightesthighlight
 -moz-mac-accentlightshadow
 -moz-mac-accentregularhighlight
 -moz-mac-accentregularshadow
 -moz-mac-chrome-active
* -moz-mac-chrome-inactive
* -moz-mac-focusring
 -moz-mac-menuselect
 -moz-mac-menushadow
 -moz-mac-menutextselect
 -moz-MenuHover
    + : Цвет фона для зависших пунктов меню. Часто похожи на `Highlight`. Следует использовать с `moz-MenuHoverText` или `-moz-MenuBarHoverText` при наведении цвет текста переднего плана.
* -moz-MenuHoverText
    + : Text color for hovered menu items. Often similar to `HighlightText`. Should be used with the `-moz-MenuHover` background color. Цвет текста для зависших пунктов меню. Часто похоже на выделение текста `HighlightText`. Следует использовать с `-moz-MenuHover` наведите цвет фона.
* -moz-MenuBarText
    + : цвет текста в строках меню. Часто похоже на текст меню "`MenuText`". Должен использоваться поверх фона `Menu`.
* -moz-MenuBarHoverText
    + : Цвет для зависшего текста в строках меню. Часто похоже на `-moz-MenuHoverText` меню наведения текста. Следует использовать поверх `-moz-MenuHover` наведите фон.
* -moz-nativehyperlinktext
    + : цвет гиперссылки платформы по умолчанию.
* -moz-OddTreeRow
    + : цвет фона для нечётных строк в дереве. Должен использоваться с цветом переднего плана `-moz-FieldText`. В версиях Gecko до 1.9, используйте `-moz-Field`. Смотрите также `-moz-EvenTreeRow`.
* -moz-win-communicationstext
    + : следует использовать для текста в объектах с ``- moz-appearance`:- moz-win-communications-toolbox;`.
* -moz-win-mediatext
    + : следует использовать для текста в объектах с ``- moz-appearance`:- moz-win-media-toolbox`.
* -moz-win-accentcolor
    + : Используется для доступа к пользовательскому цвету акцента Windows 10, который можно установить в меню Пуск, панели задач, заголовках и т. д.
* -moz-win-accentcolortext
    + : Используется для доступа к цвету текста, размещённого над цветом пользовательского акцента Windows 10 в меню Пуск, панели задач, заголовках и т. д.
### Расширения Цветовых Предпочтений Mozilla

-moz-activehyperlinktext

Пользовательское предпочтение цвета текста активных ссылок. Должен использоваться с цветом фона документа по умолчанию.

-moz-default-background-color

предпочтения пользователя для цвета фона документа.

-moz-default-color

предпочтения пользователя для цвета текста.

-moz-hyperlinktext

Предпочтения пользователя для цвета текста непрошеных ссылок. Должен использоваться с цветом фона документа по умолчанию.

-moz-visitedhyperlinktext

Предпочтения пользователя для цвета текста посещённых ссылок. Должен использоваться с цветом фона документа по умолчанию.

Интерполяция
------------

В анимации и градиентах значения `<color>` интерполируются на каждый из их красных, зелёных и синих компонентов. Каждый компонент интерполируется как реальное число с плавающей запятой. Обратите внимание, что интерполяция цветов происходит в Альфа-предварительно умноженном цветовом пространстве rgba, чтобы предотвратить появление неожиданных серых цветов. В анимации, скорость интерполяции определяется функцией времени (en-US).

Соображения доступности
-----------------------

Некоторые люди с трудом различают цвета. Рекомендация WCAG 2.0 настоятельно рекомендует не использовать цвет в качестве единственного средства передачи определённого сообщения, действия или результата. Дополнительную информацию см. В разделе цвет и цветовой контраст.

Технические характеристики
--------------------------

| Specification |
| --- |
| CSS Color Module Level 4 # color-syntax |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотреть также
--------------

* Свойство `непрозрачность` позволяет определить прозрачность на уровне элемента.
* Некоторые общие свойства, которые используют этот тип данных: `цвет`, `фон`, `бордюр-колор`, `окно-тень`, `контур-цвет`, `текст-тень`
* Применение цвета к элементам HTML с помощью CSS