<color>

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

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

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

Cинтаксис 

Для типа данных задется <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 пример

<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 #ff0000ffR (красный), 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.

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

/* Шестнадцатеричный синтаксис */
#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 вариации прозрачности
/* Шестнадцатеричный синтаксис */
#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=0 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 варианты синтаксиса
/* Все эти примеры указывают один и тот же цвет: лаванда. */
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
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
{Gecko_minversion_inline ("1.9.2")}} цвет текста для комбинированных полей. Следует использовать с цветом фона -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 настоятельно рекомендует не использовать цвет в качестве единственного средства передачи определенного сообщения, действия или результата. Дополнительную информацию см. В разделе цвет и цветовой контраст.

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

Спецификация Статус Пояснения
CSS Color Module Level 4
Определение '<color>' в этой спецификации.
Рабочий черновик Добавляет rebeccapurple, четырехзначные (#RGBA) и восьмизначные (#RRGGBBAA) шестнадцатеричные обозначения, rgba() и hsla() в качестве псевдонимов rgb () и hsl () (оба с одинаковым синтаксисом параметров), разделенные пробелами параметры функции в качестве альтернативы запятым, проценты для Альфа-значений и углы для компонента оттенка в цветах hsl ().
CSS Color Module Level 3
Определение '<color>' в этой спецификации.
Рекомендация Устаревает системные цвета. Добавляет цвета SVG и функциональные обозначения rgb(), hsl () и hsla().
CSS Level 2 (Revision 1)
Определение '<color>' в этой спецификации.
Рекомендация Добавляет orange keyword(ключевое слово) и системные цвета.
CSS Level 1
Определение '<color>' в этой спецификации.
Рекомендация Первоначальное определение. Включает в себя 16 основных ключевых слов цвета.

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
colorChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 3Opera Полная поддержка ДаSafari Полная поддержка 1WebView Android Полная поддержка 1Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
Alpha color values (rgba(), hsla())Chrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 3IE Полная поддержка 9Opera Полная поддержка 10Safari Полная поддержка 3.1WebView Android Полная поддержка ≤37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка 2Samsung Internet Android Полная поддержка Да
RGBA hexadecimal notation (#RRGGBBAA, #RGBA)Chrome Полная поддержка 62
Полная поддержка 62
Полная поддержка 52
Отключено
Отключено From version 52: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Нет поддержки НетFirefox Полная поддержка 49IE Нет поддержки НетOpera Полная поддержка 49
Полная поддержка 49
Полная поддержка 39
Отключено
Отключено From version 39: this feature is behind the Enable experimental Web Platform features preference.
Safari Полная поддержка 9.1WebView Android Полная поддержка 62
Полная поддержка 62
Полная поддержка 52
Отключено
Отключено From version 52: this feature is behind the Enable experimental Web Platform features preference.
Chrome Android Полная поддержка 62
Полная поддержка 62
Полная поддержка 52
Отключено
Отключено From version 52: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Полная поддержка 49Opera Android Полная поддержка 47
Полная поддержка 47
Полная поддержка 41
Отключено
Отключено From version 41: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS Полная поддержка 9.3Samsung Internet Android ?
currentcolorChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1.5IE Полная поддержка 9Opera Полная поддержка 9.5Safari Полная поддержка 4WebView Android Полная поддержка 37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android ? Safari iOS Полная поддержка 3.2Samsung Internet Android ?
Allow floats in rgb() and rgba()Chrome Полная поддержка 66Edge Нет поддержки НетFirefox Полная поддержка 52IE Нет поддержки НетOpera Полная поддержка 53Safari Полная поддержка 12.1WebView Android Полная поддержка 66Chrome Android Полная поддержка 66Firefox Android Полная поддержка 52Opera Android Полная поддержка 47Safari iOS Полная поддержка 12.2Samsung Internet Android ?
HSL color values (hsl())Chrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 9Opera Полная поддержка 9.5Safari Полная поддержка 3.1WebView Android Полная поддержка ≤37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка 2Samsung Internet Android Полная поддержка Да
hsl() can accept alpha valuesChrome Полная поддержка 65Edge Нет поддержки НетFirefox Полная поддержка 52IE Нет поддержки НетOpera Полная поддержка 52Safari Полная поддержка 12.1WebView Android Полная поддержка 65Chrome Android Полная поддержка 65Firefox Android Полная поддержка 52Opera Android Полная поддержка 47Safari iOS Полная поддержка 12.2Samsung Internet Android Полная поддержка 9.0
Keyword color valuesChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 3
Замечания
Полная поддержка 3
Замечания
Замечания Internet Explorer 8 and later support gray color keywords spelled with an e (grey, darkgrey, darkslategrey, dimgrey, lightgrey, and lightslategrey). Internet Explorer 3 to Internet Explorer 7 only support the keywords spelled with a (gray, darkgray, darkslategray, dimgray, lightgray, and lightslategray).
Opera Полная поддержка 3.5Safari Полная поддержка 1WebView Android Полная поддержка ≤37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка 1Samsung Internet Android Полная поддержка Да
rebeccapurpleChrome Полная поддержка 38Edge Полная поддержка 12Firefox Полная поддержка 33IE Полная поддержка 11Opera Полная поддержка 25Safari Полная поддержка 9WebView Android Полная поддержка 38Chrome Android Полная поддержка 38Firefox Android Полная поддержка 33Opera Android Полная поддержка 25Safari iOS Полная поддержка 8Samsung Internet Android Полная поддержка 3.0
rgb() can accept alpha valuesChrome Полная поддержка 65Edge Нет поддержки НетFirefox Полная поддержка 52IE Нет поддержки НетOpera Полная поддержка 52Safari Полная поддержка 12.1WebView Android Полная поддержка 65Chrome Android Полная поддержка 65Firefox Android Полная поддержка 52Opera Android Полная поддержка 47Safari iOS Полная поддержка 12.2Samsung Internet Android Полная поддержка 9.0
RGB functional notation (rgb())Chrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 4Opera Полная поддержка 3.5Safari Полная поддержка 1WebView Android Полная поддержка ≤37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка 1Samsung Internet Android Полная поддержка Да
RGB hexadecimal notation (#RRGGBB, #RGB)Chrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 3Opera Полная поддержка 3.5Safari Полная поддержка 1WebView Android Полная поддержка ≤37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка 1Samsung Internet Android Полная поддержка Да
Space-separated functional color notationsChrome Полная поддержка 65Edge Нет поддержки НетFirefox Полная поддержка 52IE Нет поддержки НетOpera Полная поддержка 52Safari Полная поддержка 12.1WebView Android Полная поддержка 65Chrome Android Полная поддержка 65Firefox Android Полная поддержка 52Opera Android Полная поддержка 47Safari iOS Полная поддержка 12.2Samsung Internet Android ?
transparentChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 3IE Полная поддержка 9Opera Полная поддержка 10Safari Полная поддержка 3.1WebView Android Полная поддержка 37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android ? Safari iOS Полная поддержка 2Samsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна
Смотрите замечания реализации.
Смотрите замечания реализации.
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.

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