<Цвет> 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 | Live keyword |
---|---|---|---|---|
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.