<color>

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

Resumen

El tipo de datos CSS <color> denota un color en el sRGB color space. Un color puede ser descrito en cualquiera de las siguiente maneras:

  • usando una palabra clave.
  • Usando el sistema  RGB cubic-coordinate  (usando  #-hexadecimal o las notaciones funcionales rgb() y rgba() )
  • Usando el sistema HSL cylindrical-coordinate  (usando las notaciones funcionales hsl() y hsla() )

Destacar que la lista de valores de color aceptados ha ido creciendo conforme la especificación evolucionaba, para acabar con la lista de colores de CSS3.

Asociado con el color en el espacio sRGB, un valor <color> también consiste de una coordenada alpha-channel o valor de transparencia, indicando cómo se debe composite o mezclar el color con su color de fondo.

Aunque los valores de colores en CSS son definidos de manera precisa existe la posibilidad de que parezcan distintos en dispositivos diferentes. La mayoría de ellos no están calibrados y algunos navegadores no soportan los color profile de algunos dispositivos de salidas. En esta situación el color puede variar bastante.

Notas: La recomendación WCAG 2.0 de la W3C aconseja a los autores web de manera clara que no usen  color como el único medido para especificar una información, acción o resultado concreto. Algunos usuarios tienen problemas para diferenciar colores y existe la posibilidad de que la información transmitida no sea captada. Por supuesto esto no impide que se use el color, sólo su uso como único medio para describir alguna información.

Interpolación

Los valores del tipo de datos CSS <color> pueden ser interpolados para lograr animaciones o para crear valores <gradient>. En este caso son interpolados en cada uno de sus componentes rojo, verde y azul, conteniendo, cada uno de ellos, un número decimal con coma flotante.  Destacar que la interpolación del color sucede en el alpha-premultiplied sRGBA color space para evitar que aparezcan grises inesperados. En las animaciones, la velocidad de la interpolación viene determinada por la timing function asociada con la animación.

Valores

Hay varias formas de describir un valor <color>.

Palabras clave de Colores

Las palabras clave de colores son identificadores, en los que no hay distinción entre mayúsculas y minúsculas y que sirven para representar un color concreto, por ejemplo red, blue, brown, lightseagreen. El nombre describe el color aunque es mayormente artificial. La lista de valores válidos cambia un montón de una especificación a otra:

  • CSS Nivel 1 sólo acepta 16 colores básicos, los llamados colores VGA ya que son tomados de los colores que son capaces de mostrar las trajetas gráficas VGA.
  • CSS Nivel 2 añadió la palabra clave orange.
  • Desde el principio los navegadores aceptarons otros colores, sobre todo la lista de colores X11 con unas pocas diferencias. ya que, los primeros navegadores, eran en su mayoría aplicaciones X11. SVG 1.0  fué el primer estándar  que definió formalmente estas palabras clave. Con frecuencia nos referimos a ello como la lista extendida de colores , los colores X11 o los colores SVG.

Hay algunas advertencias a tener en cuenta al usar las palabras clave relativas a colores:

  • A excepción de los 16 colores básicos, que son comunes en HTML, los otros no pueden ser usados en HTML. HTML convertirá estos valores desconocidos usando un algoritmo específico y se obtendrá colores totalmente diferentes. Estas palabras clave deberían sólo usarse en SGV y CSS.
  • Colores desconocidos hacen que la propiedad CSS sea declarada inválida. Las propiedades inválidas son ignoradas y , por tanto, el color no tendrá efecto. Esto es un comportamiento diferente al del HTML
  • Ninguna palabra clave de color tiene transparencia en CSS, son colores planos y sólidos.
  • Algunas referencian el mismo color:
    • darkgray / darkgrey
    • darkslategray / darkslategrey
    • dimgray / dimgrey
    • lightgray / lightgrey
    • lightslategray / lightslategrey
    • gray / grey
    • slategray / slategrey
  • Aunque las palabras clave de colores han sitdo tomadas de los nombres de colores usuales en X11, el color puede ser ligeramente diferente al color en X11 ya que son adaptados por el fabricante para un hardware específico.
Especificación Color Palabra Clave Valor RGB hexadecimal Muestra
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 #ffe4c4  
  blueviolet #8a2be2  
  brown #a52a2a  
  burlywood #deb887  
  cadetblue #5f9ea0  
  chartreuse #7fff00  
  chocolate #d2691e  
  coral #ff7f50  
  cornflowerblue #6495ed  
  cornsilk #fff8dc  
  crimson #dc143c  
  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  

El color rebeccapurple es equivalente al color  #639, y se puede encontrar información adicional sobre por qué fue introducidoa en el blog Codepen blog en un post realizado por Trezy "Honoring a Great Man."

Palabra clave transparent

La palaba transparent representa un color totalmente transparente, es decir, el color que veremos será el colore de fondo. Técnicamente es un color negro con un valor mínimo en el canal alfa y la manera de representarlo es rgba(0,0,0,0).

Nota histórica
La palabra clave transparent no fue  un color en CSS hasta CSS Nivel 2 (Revisión 1). Podía ser usada en lugar de un valor <color> regular en dos propiedades CSS: backgroundborder. En esencia fue añadida para permitir sobreescribir valores sólidos heredados.

Con el soporte de la opacidad que nos proporcionan los alpha channels, transparent fue redefinido como un color verdadero más en CSS Nivel 3 permitiendo su use en cualquier sitio donde de requiera un valor<color> , como la propiedad color.

Palabra clave currentColor

La palabra clave currentColor representa el valor calculado para la la propiedad del elemento color . Permite hacer que las propiedades de color sean heredadas por los elementos hijo, que no lo hacen por defecto.

También puede ser usada en propiedades que heredan el valor calculado de la propiedad del elemento color, en este caso, será equivalente a la plabara clave inherit en estos elementos, si es que la hubiera.

Ejemplo

El color de la una line (un div relleno de color) se adpata al color de su propiedad  {Cssxref("color")}} , heredada de su padre.

Live example 1
<div style="color:darkred">
 EL color de este texto es el mismo que el de la línea  <div style="background:currentcolor; height:1px"></div>
 Algo más de texto
</div> 

Live example 2
<div style="color:blue; border-bottom: 1px dashed currentcolor;">
 El color de este texto es el mimso que el color de la línea:
  <div style="background:currentcolor; height:1px"></div>
 Algo más de texto.
</div> 

rgb()

Los colores puede ser definidos usando el modelo RGB (rojo-verde-azul) de dos maneras:ways:

Notación Hexadecimal #RRGGBB ay #RGB
  • "#", seguido de seis caracteres hexadecimales (0-9, A-F).
  • "#", seguido de tres caracteres hexadecimales (0-9, A-F).
La notación de tres dígitos (#RGB) y la de seis (#RRGGBB) son iguales.
Por ejemplo,  #f03 y #ff0033 representan el mismo color.
Notación funcional rgb(R,G,B)
"rgb", seguido por tres valores  <integer> o tres  <percentage> values.
El número entero 255 representa el 100%, y F o FF en notación hexadecimal.
/* Todos estos ejemplos son el mismo color RGB: */
 
 #f03
 #F03
 #ff0033
 #FF0033
 rgb(255,0,51)
 rgb(255, 0, 51)
 rgb(255, 0, 51.2) /* ERROR! No uses número decimales , usa enteros*/ 
 rgb(100%,0%,20%)
 rgb(100%, 0%, 20%)
 rgb(100%, 0, 20%) /* ERROR! No mezcles notaciones de enteros y de porcentajes*/

hsl()

Los colores también puede ser definidos usando el modelo  tono(hue) - saturación(saturation) - brillo (lightness) (HSL) con la notación funcional hsl(). La ventaja del modelo HSL sobre el modelo RGB es que es mucho más intuitivo: puedes adivinar los colores que tu quieres y, luego, modificarlos. Es también más fácil crear conjuntos de coloroes (manteniendo el tono (hue)  igual y modificando el brillo y la satuación).

El tono (Hue)  se representacomo un ángulo del círculo de color. (por así decir el arco iris representado en un círculo). El ángulo se proporciona como un  <number> sin unidades.Por definición rojo=0=360, y los demas colores están dispersos por el círculo, verde=120, azul=240, etc. Al ser un ánguilo implítamente -120=240 y 480=120.

La saturación y el brillo son representados por porcentajes.
100%  es saturacion completa, y 0% es una sombra de gris..
100% brillo es blanco, 0%  negro, y 50% es brillo "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 */ 

rgba()

Podemos definir los colores con el modelo Rojo (red)- Verde(green)- Azul (blue)- alpha (RGBa) usando la notación funcional rgba(). RGBa amplia el modelo RGA añadiendo un canal alfa, permitiendo de esta manera especificar la opacidad de un color.
a representa opacidad: 0=transparente; 1=opaco;

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 */ 

hsla()

Podemos definir los colores usando el modelo saturación tono (hue) - (saturation) - brillo (lightness)  (HSLa) usando lla notación funcional hsla(). HSLa amplía el modelo HSL incluyendo el canal alfa, permitiendo de esta manera especificar la opacidad de un color.
a es la opacidad: 0=transparente; 1=opaco;

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 */ 

Colores de Sistema

No todos los colores de sistema son soportados por todos los sistemas.  para usar en páginas web públicas..

ActiveBorder
Borde de la ventana activa
ActiveCaption
Título de la ventana activa. Deb usarse con CaptionText como color de fondo
AppWorkspace
Color de fondo para el interfaz de múltiples documentos.
Background
Fondo de escritorio.
ButtonFace
Color de fondo frontal para elementos 3-D que parecen 3-D debido a una capa del borde próximo. Debe usar con el color de frente ButtonText .
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
Gris para el texto deshabilitado:
Highlight
Elemento(s) seleccionados en un control. Debe ser usado con el color de frente HighlightText.
HighlightText
Texto de los elemento(s) seleccionados en un control. Debe usar con el color de fondo Highlight.
InactiveBorder
Borde de ventana inactivo.
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
Color de foBackground 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
Fondo del menú. Debe ser usado Menu background. Should be used with the MenuText or  -moz-MenuBarText foreground color.
MenuText
Texto en el menú. Debe ser usado Text in menus. Should be used with the Menu background color.
Scrollbar
Color de fondo para las barras de scroll.
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
Fondo de las ventanas. Debe usarse con el color de frente WindowText.
WindowFrame
Marco de ventana
WindowText
Texto en las ventanas.Debe usarse con el color de fono de ventana.

Extensiones de Mozilla al Sistema de Colores

-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
Color de fondo para cuadros de diálogo. Debe usarse con el color de frente -moz-DialogText
-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.

Extensiones de Mozilla a las Preferencias de Color

-moz-activehyperlinktext
Preferencias de usuario para el color de texto de los enlaces activos. Debe ser usado con el color de fondo por defecto del documento.
-moz-default-background-color
Preferencias de usuario  para el color de fondo del documento.
-moz-default-color
Preferencias de usuario para el color del texto.
-moz-hyperlinktext
Preferencias de usuario para el color del texto de los enlaces sin visitar. Debe ser usado con el color de fondo por defecto del documento.
-moz-visitedhyperlinktext
Preferencias de usuario para el color del texto de los enlaces ya visitados. Debe ser usado con el color de fondo por defecto del documento.

Especificaciones

Especificación Estado Comentario
CSS Color Module Level 4
The definition of '<color>' in that specification.
Editor's Draft Añadido el color rebeccapurple.
CSS Color Module Level 3
The definition of '<color>' in that specification.
Recommendation Colores de sistema depreciados; añadidos colores SVG; añadidos las notaciones funcionales rgba(), hsl(), hsla().
CSS Level 2 (Revision 1)
The definition of '<color>' in that specification.
Recommendation Añadidos el naranja y los colores de sistema.
CSS Level 1
The definition of '<color>' in that specification.
Recommendation Definición Inicial

Compatibilidad con los distintos navegadores

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
palabras clave de colores 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() 1.0 3.0 (1.9) 9.0 10.0 3.1 (525)
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
Característica Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Soporte básico ? ? ? ? ?
rgba() ? ? ? ? (Yes)
rebeccapurple (Yes) 33.0 (33) ? ? 8

[1] Los colores  'e'-grey (con una e) (grey, darkgrey, darkslategrey, dimgrey, lightgrey, lightslategrey)sólo son soportados a partir de IE 8.0. De IE 3 a IE 7 sólo son soportados las variantes con 'a': gray, darkgray, darkslategray, dimgray, lightgray, lightslategray.

[2] IE 7-8 soporta la palabra clave transparent sólo para  backgroundborder. color: transparent; es equivalente a negro en IE. IE6 renderiza también como negro los bordes transparentes.

Ver además

Etiquetas y colaboradores del documento

 Colaboradores en esta página: Simplexible, pekechis
 Última actualización por: Simplexible,