<color>

Esta tradução está incompleta. Ajude atraduzir este artigo.

Sumário

O tipo de dado CSS <color> indica uma cor no espaço sRGB. Uma cor pode ser descrita em qualquer uma destas formas:

Observe que a lista de valores de cores aceitas foi estendida à medida que a especificação evoluiu, culminando com as cores CSS3 mais recentes.

Associado à cor no espaço sRGB, um valor <color> também pode consistir de uma coordenada de valor de transparência canal-alfa, Indicando como a cor deve se composta com sua cor de fundo.

Embora os valores de cores CSS sejam definidos com precisão, eles podem aparecer de forma diferente em dispositivos de saída diferentes. A maioria deles não está calibrada e alguns navegadores não suportam o perfil de cores dos dispositivos de saída. Sem estes, a renderização de cores pode variar muito.

Nota: A recomendação WCAG 2.0 do W3C aconselha fortemente aos autores web não usarem cor como o único meio para transmitir uma mensagem específica, ação ou resultado. Alguns usuários têm problemas em distinguir cores e as informações transmitidas podem não ser compreendidas. Claro, isso não impede o uso da cor, mas o seu uso apenas como o único meio para descrever certas coisas (veja Cor e contraste de cor para mais informações).

Interpolação

Valores do tipo de dados CSS <color> podem ser interpolados para realizar animações ou para criar valores <gradient>. Nesse caso, eles são interpolados em cada um de seus componentes vermelho, verde, azul, cada um manipulado como um número real, de ponto flutuante. Observe que a interpolação de cores ocorre no espaço de cores sRGBA alfa-pré-multiplicado para evitar que cores cinzentas inesperadas apareçam. Nas animações, a velocidade da interpolação é determinada pela função de temporização associada à animação.

Valores

Existem várias maneiras de descrever um valor <color>.

Palavras-chave de cores

As palavras-chave de cor são identificadores não sensíveis a maiúsculas e minúsculas que representam uma cor específica, ex.: redbluebrown, ou lightseagreen. O nome descreve a cor, embora seja principalmente artificial. A lista de valores aceitos variou muito ao longo das diferentes especificações:

  • CSS nível 1 aceita apenas16 cores básicas, denominadas cores VGA já que foram tiradas do conjunto de cores exibíveis das placas gráficas VGA.
  • CSS nível 2 Adicionou a palavra-chave orange.
  • Desde o início, os navegadores aceitaram outras cores, principalmente a lista de cores nomeadas X11 já que alguns dos primeiros navegadores foram aplicações X11, embora com algumas diferenças. O SVG 1.0 foi o primeiro padrão a definir formalmente essas palavras-chave; As cores no CSS nível 3 também formalmente definiram essas palavras-chave. Elas são muitas vezes referidas como palavras-chave de cor estendida, cores X11 ou cores SVG.

Existem algumas restrições a serem consideradas ao usar palavras-chave:

  • Com exceção das 16 cores básicas comuns com HTML, as outras não podem ser usadas em HTML. O HTML vai converter esses valores desconhecidos com um algoritmo específico levando a cores completamente diferentes. Essas palavras-chave só devem ser usadas em SVG & CSS.
  • Palavras-chave desconhecidas tornam a propriedade CSS inválida. Propriedades inválidas sendo ignoradas, a cor não terá efeito. Esse é um comportamento diferente do HTML.
  • Nenhuma palavra-chave de core definida em CSS têm qualquer transparência — eles são cores simples, sólidas.
  • Várias palavras-chave indicam as mesmas cores:
    • darkgray / darkgrey
    • darkslategray / darkslategrey
    • dimgray / dimgrey
    • lightgray / lightgrey
    • lightslategray / lightslategrey
    • gray / grey
    • slategray / slategrey
  • Embora os nomes das palavras-chave tenham sido tomadas pelos nomes de cores X11 habituais, a cor pode divergir da cor do sistema correspondente em sistemas X11 como estes são adaptados para o hardware específico pelo fabricante.
Especificação Cor Palavra-chave valores hex RGB Resultado
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 #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  
  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  

A cor rebeccapurple é equivalente à cor #639, e mais informações sobre por que foi introduzida pode ser encontrada neste post no blog Codepen por Trezy "Honoring a Great Man" (em inglês)

palavra-chave transparent

A palavra-chave transparent representa uma cor totalmente transparente, isto é, a cor vista será a cor de fundo. Tecnicamente, é um preto com canal alfa no seu valor mínimo e é um atalho para rgba(0,0,0,0).

Nota histórica
A palavra-chave transparent não era uma cor verdadeira no CSS nível 2 (Revisão 1). Era uma palavra-chave específica que poderia ser usada no lugar de um valor <color> regular em duas propriedades CSS: background e border. Ela foi adicionada essencialmente para permitir a substituição de cores sólidas herdadas.

Com o apoio da opacidade através de canais alfal, transparent foi redefinida como uma cor verdadeira no Cores CSS nível 3 permitindo seu uso em qualquer lugar onde for exigido um valor para <color>, como a propriedade color.

palavra-chave currentcolor

A palavra-chave currentcolor representa o valor calculado da propriedade color dos elementos . Ela permite que as propriedades de cor sejam herdadas por propriedades ou propriedades de elemento filho que não a herdam por padrão.

Ela também pode ser usada em propriedades que herdam o valor calculado da propriedade color do elemento e será equivalente à palavra-chave inherit nesses elementos, se houver.

Exemplo ao vivo

A cor da linha (uma div preenchida com cor) se adapta à cor de sua propriedade color, herdada de seu pai.

Exemplo 1
<div style="color:darkred">
A cor deste texto é a mesma da linha:  <div style="background:currentcolor; height:1px"></div>
 Mais algum texto.
</div> 

Exemplo 2
<div style="color:blue; border-bottom: 1px dashed currentcolor;">
A cor deste texto é a mesma da linha:  <div style="background:currentcolor; height:1px"></div>
 Mais algum texto.
</div> 

rgb()

Nota: Na especificação Módulo de cor CSS Color nível 4, a rgba() foi definida como uma função herdada com gramática e comportamento idênticos à rgb(); na verdade, um apelido. Mais para frente, ambas podem aceitar exatamente os mesmos parâmetros.

Colors can be defined using the red-green-blue (RGB) model in two ways:

Hexadecimal notation #RRGGBB, #RGB
  • "#", followed by six hexadecimal characters (0-9, A-F), where the first two digits represent the red part, the second two the green part and the last two the blue part.
  • "#", followed by three hexadecimal characters (0-9, A-F), where the first digit represents the red part, the second the green part and the last one the blue part.
The three-digit RGB notation (#RGB) and the six-digit form (#RRGGBB) are equal, for example #f03 and #ff0033 represent the same color.
Functional Notation rgb(R,G,B)
"rgb", followed by three <integer> or three <percentage> values, plus an optional alpha value that specifies the transparency of the color (this can be a <number> between 0 and 1, or a <percentage>)
The integer number 255 corresponds to 100%, and to F or FF in the hexadecimal notation.
/* These examples all specify the same RGB color: */
 
#f03
#F03
#ff0033
#FF0033
rgb(255,0,51)
rgb(255, 0, 51)
rgb(255, 0, 51.2) /* ERROR! Don't use fractions, use integers */ 
rgb(100%,0%,20%)
rgb(100%, 0%, 20%)
rgb(100%, 0, 20%) /* ERROR! Don't mix up integer and percentage notation */

/* whitespace syntax */
rgb(255 0 0)

/* optional alpha value */
rgb(255,0,0,0.4)  /* 40% opaque red */ 
rgb(255,0,0,40%)  /* 40% opaque red with percentage value for alpha */ 
rgb(255 0 0 / 0.4)  /* 40% opaque red */ 
rgb(255 0 0 / 40%)  /* 40% opaque red with percentage value for alpha */ 

hsl()

Note: In the CSS Color Module Level 4 spec, hsla() has been defined as a legacy function with identical grammar and behaviour to hsl(); in effect, an alias. Going forward, both can accept exactly the same parameters.

Colors can also be defined via hue, saturation, and lightness, or HSL, by using the hsl() functional notation. The advantage of HSL over RGB is that it is far more intuitive: you can guess at the colors you want, and then tweak. It is also easier to create sets of matching colors (by keeping the hue the same and varying the lightness/darkness, and saturation).

Hue is represented as an angle of the color circle (i.e. the rainbow represented in a circle). This angle is given as a unitless <number>. By definition red=0=360, and the other colors are spread around the circle, so green=120, blue=240, etc. As an angle, it implicitly wraps around such that -120=240 and 480=120.

Saturation and lightness are represented as percentages.
100% is full saturation, and 0% is a shade of grey.
100% lightness is white, 0% lightness is black, and 50% lightness is “normal.”

hsl(0,  100%,50%)    /* red */   
hsl(30, 100%,50%)                 
hsl(60, 100%,50%)                
hsl(90, 100%,50%)                
hsl(120,100%,50%)    /* green */ 
hsl(150,100%,50%)                
hsl(180,100%,50%)                
hsl(210,100%,50%)                
hsl(240,100%,50%)    /* blue */  
hsl(270,100%,50%)                
hsl(300,100%,50%)                
hsl(330,100%,50%)                
hsl(360,100%,50%)    /* red */   

hsl(120,100%,25%)    /* dark green */  
hsl(120,100%,50%)    /* green */       
hsl(120,100%,75%)    /* light green */ 

hsl(120,100%,50%)    /* green */  
hsl(120, 67%,50%)                 
hsl(120, 33%,50%)                 
hsl(120,  0%,50%)                 

hsl(120, 60%,70%)    /* pastel green */ 

/* whitespace syntax */
hsl(120 60% 70%)  /* pastel green */ 

/* angle values for hue component; also accepts rad, grad, turn */
hsl(120deg 60% 70%)  /* pastel green */ 

/* optional alpha value */
hsl(240,100%,50%,0.05)  /* 5% opaque blue */ 
hsl(240,100%,50%,5%)  /* 5% opaque blue with percentage value for alpha */ 
hsl(240 100% 50% / 0.05) /* 5% opaque blue */ 
hsl(240 100% 50% / 5%) /* 5% opaque blue with percentage value for alpha */

rgba()

Colors can be defined in the Red-green-blue-alpha model (RGBa) in two ways:

Hexadecimal notation #RRGGBBAA and #RGBA
  • "#", followed by eight hexadecimal characters (0-9, A-F), where the first two digits represent the red part, the second two the green part, the third two the blue part and the last two the transparency.
  • "#", followed by four hexadecimal characters (0-9, A-F), where the first digit represents the red part, the second the green part, the third one the blue part and the last one the transparency.
The four-digit RGB notation (#RGBA) and the eight-digit form (#RRGGBBAA) are equal, for example, #f038 and #ff003388 represent the same color.
using the rgba() functional notation.
RGBa extends the RGB color model to include the alpha channel, allowing specification of the opacity of a color.
a means opacity: 0=transparent; 1=opaque;
#f030                /* 0% opaque red */  
#F03F                /* full opaque red */  
#ff003300            /* 0% opaque red */  
#FF003388            /* 50% opaque red */  
rgba(255,0,0,0.1)    /* 10% opaque red */  
rgba(255,0,0,0.4)    /* 40% opaque red */  
rgba(255,0,0,0.7)    /* 70% opaque red */  
rgba(255,0,0,  1)    /* full opaque red */ 

/* whitespace syntax */
rgba(255 0 0 / 0.4)  /* 40% opaque red */ 

/* percentage value for alpha */
rgba(255 0 0 / 40%)  /* 40% opaque red */ 

Note: In the CSS Color Module Level 4 spec, rgba() has been defined as a legacy function with identical grammar and behaviour to rgb(); in effect, an alias. Going forward, both can accept exactly the same parameters.

hsla()

Colors can be defined in the hue-saturation-lightness-alpha model (HSLa) using the hsla() functional notation. HSLa extends the HSL color model to include the alpha channel, allowing specification of the opacity of a color.
a means opacity: 0=transparent; 1=opaque;

hsla(240,100%,50%,0.05)   /* 5% opaque blue */   
hsla(240,100%,50%, 0.4)   /* 40% opaque blue */  
hsla(240,100%,50%, 0.7)   /* 70% opaque blue */  
hsla(240,100%,50%,   1)   /* full opaque blue */ 

/* whitespace syntax */
hsla(240 100% 50% / 0.05) /* 5% opaque blue */ 

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

/* angle values for hue component; also accepts rad, grad, turn */
hsla(240deg 100% 50% / 5%) /* 5% opaque blue */ 
hsla(240deg,100%,50%, 0.4)  /* 40% opaque blue */ 

Note: In the CSS Color Module Level 4 spec, hsla() has been defined as a legacy function with identical grammar and behaviour to hsl(); in effect, an alias. Going forward, both can accept exactly the same parameters.

System Colors

Not all system colors are supported on all systems. for use on public web pages.

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.

Mozilla System Color Extensions

-moz-ButtonDefault
The border color that goes around buttons that represent the default action for a dialog box.
-moz-ButtonHoverFace
The background color of a button that the mouse pointer is over (which would be ThreeDFace or ButtonFace when the mouse pointer is not over it). Should be used with the -moz-ButtonHoverText foreground color.
-moz-ButtonHoverText
The text color of a button that the mouse pointer is over (which would be ButtonText when the mouse pointer is not over it).  Should be used with the -moz-ButtonHoverFace background color.
-moz-CellHighlight
Background color for selected item in a tree widget.  Should be used with the -moz-CellHighlightText foreground color. See also -moz-html-CellHighlight.
-moz-CellHighlightText
Text color for a selected item in a tree. Should be used with the -moz-CellHighlight background color. See also -moz-html-CellHighlightText.
-moz-Combobox
Background color for combo-boxes.  Should be used with the -moz-ComboboxText foreground color. In versions prior to 1.9.2, use -moz-Field instead.
-moz-ComboboxText
Text color for combo-boxes. Should be used with the -moz-Combobox background color.  In versions prior to 1.9.2, use -moz-FieldText instead.
-moz-Dialog
Background color for dialog boxes.  Should be used with the -moz-DialogText foreground color.
-moz-DialogText
Text color for dialog boxes. Should be used with the -moz-Dialog background color.
-moz-dragtargetzone
-moz-EvenTreeRow
Background color for even-numbered rows in a tree.  Should be used with the -moz-FieldText foreground color. In Gecko versions prior to 1.9, use -moz-Field.  See also -moz-OddTreeRow.
-moz-Field
Text field background color.  Should be used with the -moz-FieldText foreground color.
-moz-FieldText
Text field text color. Should be used with the -moz-Field, -moz-EvenTreeRow, or -moz-OddTreeRow background color.
-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.
-moz-html-CellHighlightText
Text color for highlighted items in HTML <select>s.  Should be used with the -moz-html-CellHighlight background color. Prior to Gecko 1.9, use -moz-CellHighlightText.
-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
Background color for hovered menu items. Often similar to Highlight. Should be used with the -moz-MenuHoverText or -moz-MenuBarHoverText foreground color.
-moz-MenuHoverText
Text color for hovered menu items. Often similar to HighlightText.  Should be used with the -moz-MenuHover background color.
-moz-MenuBarText
Text color in menu bars. Often similar to MenuText. Should be used on top of Menu background.
-moz-MenuBarHoverText
Color for hovered text in menu bars. Often similar to -moz-MenuHoverText. Should be used on top of -moz-MenuHover background.
-moz-nativehyperlinktext
Default platform hyperlink color.
-moz-OddTreeRow
Background color for odd-numbered rows in a tree.  Should be used with the -moz-FieldText foreground color. In Gecko versions prior to 1.9, use -moz-Field. See also -moz-EvenTreeRow.
-moz-win-communicationstext
Should be used for text in objects with -moz-appearance: -moz-win-communications-toolbox;.
-moz-win-mediatext
Should be used for text in objects with -moz-appearance: -moz-win-media-toolbox.

Mozilla Color Preference Extensions

-moz-activehyperlinktext
User's preference for text color of active links. Should be used with the default document background color.
-moz-default-background-color
User's preference for the document background color.
-moz-default-color
User's preference for the text color.
-moz-hyperlinktext
User's preference for the text color of unvisited links. Should be used with the default document background color.
-moz-visitedhyperlinktext
User's preference for the text color of visited links. Should be used with the default document background color.

Specificações

Specificação Estado Comentário
CSS Color Module Level 4
The definition of '<color>' in that specification.
Editor's Draft Added rebeccapurple, four- (#RGBA) and eight-digit (#RRGGBBAA) hexadecimal notations, rgba() and hsla() as aliases of rgb() and hsl() (both with identical parameter syntax), space-separated function parameters rather than commas, percentages for alpha values, and angles for the hue component in hsl() colors.
CSS Color Module Level 3
The definition of '<color>' in that specification.
Recommendation Deprecated system-colors; added SVG colors; added rgba(), hsl(), hsla() functional notation.
CSS Level 2 (Revision 1)
The definition of '<color>' in that specification.
Recommendation Added the orange color and the system-colors.
CSS Level 1
The definition of '<color>' in that specification.
Recommendation Initial definition.

Compatibilidade do navegador

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
keywords colors 1.0 1.0 (1.0) 3.0 [1] 3.5 1.0 (85)
#RRGGBB, #RGB 1.0 1.0 (1.0) 3.0 3.5 1.0 (85)
rgb() 1.0 1.0 (1.0) 4.0 3.5 1.0 (85)
hsl() 1.0 1.0 (1.5) 9.0 9.5 3.1 (525)
rgba(), hsla() 1.0 3.0 (1.9) 9.0 10.0 3.1 (525)
currentcolor 1.0 1.5 (1.8) 9.0 9.5 4.0 (528)
transparent 1.0 3.0 (1.9) 9.0 [2] 10.0 3.1 (525)
rebeccapurple 38.0 33 (33) 11 25.0 7.1
#RRGGBBAA, #RGBA 52.0 49 (49) ? 39.0 9.1
rgba() and hsla() as aliases of rgb() and hsl()
Space-separated function parameters rather than commas
Percentages for alpha values
Angles for the hue component in hsl() colors.
? 52 (52) ? ? ?
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) (Yes) (Yes)
rgba(), hsla() (Yes) (Yes) (Yes) (Yes) (Yes)
rebeccapurple (Yes) 33.0 (33) ? ? 8
#RRGGBBAA, #RGBA 52.0 49.0 (49) Não suportado Não suportado ?
rgba() and hsla() as aliases of rgb() and hsl()
Space-separated function parameters rather than commas
Percentages for alpha values
Angles for the hue component in hsl() colors.
? 52.0 (52) ? ? ?

[1] The 'e'-grey colors (with an e) (grey, darkgrey, darkslategrey, dimgrey, lightgrey, lightslategrey) are only supported since IE 8.0. IE 3 to IE 7 only support the 'a' variants: gray, darkgray, darkslategray, dimgray, lightgray, lightslategray.

[2] IE 7-8 supports the transparent keyword only for background and border. color: transparent; is drawn black in IE. IE6 renders transparent borders as black, as well.

[3] This feature is supported in Chrome Canary since version 52.0.

Ver também

Etiquetas do documento e colaboradores

 Colaboradores desta página: Dianakc
 Última atualização por: Dianakc,