<Цвет> ^CSS

Тип значения color (от англ. colour — цвет) задает цвет из цветового пространства sRGB.

Значение цвета может включать также информацию о прозрачности — альфа-канал.

Цвет может быть описан одним из следующих способов:

Используя ключевое слово
Используя систему кубических координат RGB (через функциональные обозначения #, rgb() и rgba())
Используя систему цилиндрических координат HSL (через функциональные обозначения hsl() и hsla())

В анимациях и градиентах значения <color> интерполируются на каждом из их красных, зеленых и синих компонентов. Каждый компонент интерполируется как реальное число с плавающей запятой. Обратите внимание, что интерполяция цветов происходит в цветовом пространстве alpha-premultiplied sRGBA, чтобы предотвратить появление неожиданных серых цветов. В анимации скорость интерполяции определяется функцией синхронизации.

Наследуется:

Нет

Анимируется:

Нет

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

Синтаксис

/* These examples all specify the same color: a hot pink. */

/* Hexadecimal syntax */
#f09
#F09
#ff0099
#FF0099

/* Functional syntax */
rgb(255,0,153)
rgb(255, 0, 153)
rgb(255, 0, 153.0) /* ERROR! Don't use fractions. */
rgb(100%,0%,60%)
rgb(100%, 0%, 60%)
rgb(100%, 0, 60%) /* ERROR! Don't mix integers and percentages. */
rgb(255 0 153)

/* Hexadecimal syntax with alpha value */
#f09f
#F09F
#ff0099ff
#FF0099FF

/* Functional syntax with alpha value */
rgb(255, 0, 153, 1)
rgb(255, 0, 153, 100%)
rgb(255 0 153 / 1)
rgb(255 0 153 / 100%)

/* Hexadecimal syntax */
#3a30                    /*   0% opaque green */ 
#3A3F                    /* full opaque green */ 
#33aa3300                /*   0% opaque green */ 
#33AA3388                /*  50% opaque green */ 

/* Functional syntax */
rgba(51, 170, 51, .1)    /*  10% opaque green */ 
rgba(51, 170, 51, .4)    /*  40% opaque green */ 
rgba(51, 170, 51, .7)    /*  70% opaque green */ 
rgba(51, 170, 51,  1)    /* full opaque green */ 

/* Whitespace syntax */
rgba(51 170 51 / 0.4)    /*  40% opaque green */ 
rgba(51 170 51 / 40%)    /*  40% opaque green */ 

/* These examples all specify the same color: a lavender. */
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%)

/* These examples all specify the same color: a lavender that is 15% opaque. */
hsl(270, 60%, 50%, .15)
hsl(270, 60%, 50%, 15%)
hsl(270 60% 50% / .15)
hsl(270 60% 50% / 15%)

hsla(240, 100%, 50%, .05)     /*   5% opaque blue */ 
hsla(240, 100%, 50%, .4)      /*  40% opaque blue */ 
hsla(240, 100%, 50%, .7)      /*  70% opaque blue */ 
hsla(240, 100%, 50%, 1)       /* full opaque blue */ 

/* Whitespace syntax */
hsla(240 100% 50% / .05)      /*   5% opaque blue */ 

/* Percentage value for alpha */
hsla(240 100% 50% / 5%)       /*   5% opaque blue */

Значения

Ключевое слово

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

Примечание.

Список принятых ключевых слов сильно варьировался во всех спецификациях CSS:

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

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

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

Specification	RGB equivalent	Keyword	RGB hex value
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 элемента. Это позволяет использовать значение цвета для свойств, которые не получают его по умолчанию.

rgb() и rgba()

Цвета могут быть определены в соответствии с их красными, зелеными и синими компонентами (модель RGB) с использованием шестнадцатеричных и функциональных обозначений. Необязательный альфа-компонент представляет прозрачность.

Примечание.

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

Синтаксис

Шестнадцатеричное обозначение: #RRGGBB[AA] — 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 (#RGBA) представляет собой более короткую версию восьмизначной формы (#RRGGBBAA). Например, #0f38 имеет тот же цвет, что и #00ff3388.
Функциональная нотация: rgb(R, G, B [, A]) или rgba(R, G, B, A) — R (красный), G (зеленый) и B (синий) могут быть либо <integer>, либо <percent>, где число 255 соответствует 100%. A (альфа) может быть <число> между 0 и 1 или <процент>, где число 1 соответствует 100% (полная непрозрачность).

hsl() и hsla()

Цвета могут быть определены в соответствии с их оттенком, насыщенностью и яркостью (модель HSL) с помощью функциональных обозначений hsl() и hsla(). Одним из преимуществ HSL над RGB является то, что он более интуитивно понятен: вы можете догадаться о желаемом цвете и откорректировать его оттуда. Также легче создать набор совпадающих цветов (например, сохраняя оттенок одинаковым, изменяя яркость / темноту и насыщенность).

Примечание

В стандарте CSS Colors Level 4, hsla() является псевдонимом для hsl(). В браузерах, реализующих стандарт уровня 4, они принимают одни и те же параметры и ведут себя одинаково.

Синтаксис

Функциональная нотация: hsl(H, S, L [, A]) или hsla(H, S, L, A) — H (оттенок) представляет собой <угол> цветового круга, заданного в градусах, радах, градусах или витках. При написании как <number>, оно интерпретируется как градусы. По определению, красный = 0deg = 360deg, другие цвета распространяются по кругу, поэтому зеленый = 120deg, синий = 240deg и т. д. В качестве <угла> он неявно обертывается вокруг так, что -120deg = 240deg, 480deg = 120deg, -1turn = 1turn и т. д. S (насыщенность) и L (яркость) являются процентами. 100% насыщенность полностью насыщена, а 0% — ненасыщенный (серый). 100%-ная яркость белого цвета, 0% - черная, а 50% - нормальная. A (альфа) может быть <число> между 0 и 1 или <процент>, где число 1 соответствует 100% (полная непрозрачность).

Системные цвета

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

ActiveBorder — Active window border.
ActiveCaption — Active window caption. Should be used with CaptionText as foreground color.
AppWorkspace — Background color of multiple document interface.
Background — Desktop background.
ButtonFace — Face background color for 3-D elements that appear 3-D due to one layer of surrounding border. Should be used with the ButtonText foreground color.
ButtonHighlight — The color of the border facing the light source for 3-D elements that appear 3-D due to that layer of surrounding border.
ButtonShadow — The color of the border away from the light source for 3-D elements that appear 3-D due to that layer of surrounding border.
ButtonText — Text on push buttons. Should be used with the ButtonFace or ThreeDFace background color.
CaptionText — Text in caption, size box, and scrollbar arrow box. Should be used with the ActiveCaption background color.
GrayText — Grayed (disabled) text.
Highlight — Item(s) selected in a control. Should be used with the HighlightText foreground color.
HighlightText — Text of item(s) selected in a control. Should be used with the Highlight background color.
InactiveBorder — Inactive window border.
InactiveCaption — Inactive window caption. Should be used with the InactiveCaptionText foreground color.
InactiveCaptionText — Color of text in an inactive caption. Should be used with the InactiveCaption background color.
InfoBackground — Background color for tooltip controls. Should be used with the InfoText foreground color.
InfoText — Text color for tooltip controls. Should be used with the InfoBackground background color.
Menu — Menu background. Should be used with the MenuText or -moz-MenuBarText foreground color.
MenuText — Text in menus. Should be used with the Menu background color.
Scrollbar — Background color of scroll bars.
ThreeDDarkShadow — The color of the darker (generally outer) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
ThreeDFace — The face background color for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Should be used with the ButtonText foreground color.
ThreeDHighlight — The color of the lighter (generally outer) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
ThreeDLightShadow — The color of the darker (generally inner) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
ThreeDShadow — The color of the lighter (generally inner) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
Window — Window background. Should be used with the WindowText foreground color.
WindowFrame — Window frame.
WindowText — Text in windows. Should be used with the Window background color.

В начало

<Цвет> CSS