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