<color>
Тип <color>
CSS data type предоставляет цвет в цветовом спектре sRGB. В <color>
может включать значения прозрачности Альфа-канала (alpha-channel), указывающие, как цвет сочетается с его фоном.
В <color>
может быть определена любым из следующих способов can.
- Использование или подключённого свойства ведённого в параметр (например,
blue
илиtransparent
) - Использование кубической системы координат RGB (via the #-hexadecimal or the
rgb()
andrgba()
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 к своему конкретному оборудованию.
Спецификация | Эквивалент 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)
.
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 ()
) нотациями.
- Шестнадцатеричное представление:
#RRGGBB[AA]
-
R
(red),G
(green),B
(blue), andA
(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])
orrgba(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()
.
- Функциональная нотация:
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>
between0
and1
, or a<percentage>
, where the number1
corresponds to100%
(full opacity).A
(Альфа) может быть<number>
между0
и1
или<percentage>
, где число1
соответствует100%
(полная непрозрачность). - Функциональная нотация:
hsl(H S L[ A])
orhsla(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
-
Активная граница окна.
-
Активный заголовок окна. Должен использоваться с текстом
CaptionText
в качестве цвета переднего плана. - AppWorkspace
-
Цвет фона интерфейса нескольких документов.
- Background
-
Фон рабочего стола.
-
Цвет фона лица для трёхмерных элементов, которые появляются 3-D из-за одного слоя окружающей границы. Следует использовать с текстом
ButtonText
цвет переднего плана. -
Цвет границы, обращённой к источнику света для 3-D элементов, которые появляются 3-D из-за этого слоя окружающей границы.
-
Цвет границы вдали от источника света для 3-D элементов, которые появляются 3-D из-за этого слоя окружающей границы. Цвет границы находится вдали от источника света для трёхмерных элементов, которые появляются 3-D из-за этого слоя, окружающего границу.
-
Следует использовать с
ButtonFace
илиThreeDFace
цвет фона. -
Текст в заголовке, поле размера и поле со стрелкой прокрутки. Следует использовать с цветом фона
ActiveCaption
. - GrayText
-
Серый (отключён) текст.
- Highlight
-
Элемент(ы), выбранный в элементе управления. Следует использовать с
HighlightText
текста цветом переднего плана. - HighlightText
-
Текст элемента(ов), выбранного в элементе управления. Следует использовать с подсветкой цвета фона.
- InactiveBorder
-
Граница неактивного окна.
-
Заголовок неактивного окна. Должен использоваться с цветом переднего плана
InactiveCaptionText
. -
Следует использовать с
InactiveCaption
неактивным цветом фона заголовка. - InfoBackground
-
Цвет фона для элементов управления всплывающей подсказки. Должен использоваться с цветом переднего плана
InfoText
. - InfoText
-
Цвет текста элементов подсказки. Должен использоваться с и
InfoBackground
фона. -
Фон меню. Должен использоваться с
MenuText
или-moz-MenuBarText
строки меню цвет переднего плана. -
Текст в меню. Следует использовать с меню Цвет фона.
- 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.
- : Цвет текста кнопки, на которую наведён указатель мыши (который будет ButtonText, когда указатель мыши не находится над ним). Следует использовать с-
- -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
.
- : Text field background color. Should be used with the
- -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
цветом фона строки дерева.
- : Text field text color. Should be used with the
- -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
.
- : Background color for highlighted item in HTML
- -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
наведите цвет фона.
- : Text color for hovered menu items. Often similar to
- -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