<color>

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

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

Использование или подключённого свойства ведённого в параметр (например, blue или transparent)
Использование кубической системы координат RGB (via the #-hexadecimal or the rgb() and rgba() functional notations)
Использование цилиндрической системы координат 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. Это позволяет использовать значение 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) - это <угол> цветового круга, заданного в degS, rads, градусах или поворотах 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, чтобы предотвратить появление неожиданных серых цветов. В анимации, скорость интерполяции определяется функцией времени.

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

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

Спецификации

Specification
CSS Color Module Level 4 # color-syntax

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

BCD tables only load in the browser

Смотрите также

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

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

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

currentColor пример

Синтаксис

Пример

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

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

Синтаксис

Examples

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

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

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

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

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

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

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