color

La propiedad de CSS color selecciona el valor de color de primer plano del contenido de elemento de texto y decoraciones de texto. Tambien establece el valor currentcolor que se puede usar como un valor indirecto en otras propiedades, y es el valor predeterminado para otras propiedades de color, como border-color.

Para obtener una descripción general del uso del color en HTML, consulte Aplicando color a los elementos HTML mediante CSS.

/* Valores de palabras clave */
color: currentcolor;

/* Valores <named-color> */
color: red;
color: orange;
color: tan;
color: rebeccapurple;

/* Valores <hex-color> */
color: #090;
color: #009900;
color: #090a;
color: #009900aa;

/* Valores <rgb()> */
color: rgb(34, 12, 64, 0.6);
color: rgba(34, 12, 64, 0.6);
color: rgb(34 12 64 / 0.6);
color: rgba(34 12 64 / 0.3);
color: rgb(34.0 12 64 / 60%);
color: rgba(34.6 12 64 / 30%);

/* Valores <hsl()> */
color: hsl(30, 100%, 50%, 0.6);
color: hsla(30, 100%, 50%, 0.6);
color: hsl(30 100% 50% / 0.6);
color: hsla(30 100% 50% / 0.6);
color: hsl(30.0 100% 50% / 60%);
color: hsla(30.2 100% 50% / 60%);

/* Valores Globales */
color: inherit;
color: initial;
color: unset;

Ten en cuenta que el valor debe ser un color uniforme . No puede ser un <gradient>, que es en realidad un tipo de <image>.

<div class="grid">
  <div class="col">
    <div class="cell">
      Keyword values
      <p class="c1">color: currentcolor</p>
    </div>
    <div class="cell">
      &lt;named-color&gt; values
      <p class="c2">color: red</p>
      <p class="c3">color: orange</p>
      <p class="c4">color: tan</p>
      <p class="c5">color: rebeccapurple</p>
    </div>
    <div class="cell">
      &lt;hex-color&gt; values
      <p class="c6">color: #090</p>
      <p class="c7">color: #009900</p>
      <p class="c8">color: #090a</p>
      <p class="c9">color: #009900aa</p>
    </div>
    <div class="cell">
      &lt;rgb()&gt; values
      <p class="c10">color: rgb(34, 12, 64, 0.6)</p>
      <p class="c11">color: rgba(34, 12, 64, 0.6)</p>
      <p class="c12">color: rgb(34 12 64 / 0.6)</p>
      <p class="c13">color: rgba(34 12 64 / 0.6)</p>
    </div>
    <div class="cell">
      &lt;hsl()&gt; values
      <p class="c14">color: hsl(30, 100%, 50%, 0.6)</p>
      <p class="c15">color: hsla(30, 100%, 50%, 0.6)</p>
      <p class="c16">color: hsl(30 100% 50% / 0.6)</p>
      <p class="c17">color: hsla(30 100% 50% / 0.6)</p>
    </div>
  </div>
</div>

html,body {
  height: 100%;
  box-sizing: border-box;
}

.grid {
  width: 100%;
  height: 100%;
  display: flex;
  background: #EEE;
  font: 1em monospace;
}

.col {
  display: flex;
  flex: 1 auto;
  flex-direction: column;
}

.cell {
  margin: .5em;
  padding: .5em;
  background-color: #FFF;
  overflow: hidden;
  text-align: left;
  font-style: italic;
}

p {
  font-size: 1rem;
  font-style: normal;
  padding: 0 .5em .5em;
  margin: 0;
}

p:first-child {
  padding-top: .5em;
}

/* Valores de palabras clave */
.c1 { color: currentcolor; }

/*  values */
.c2 { color: red; }
.c3 { color: orange; }
.c4 { color: tan; }
.c5 { color: rebeccapurple; }

/*  valores */
.c6 { color: #090; }
.c7 { color: #009900; }
.c8 { color: #090A; }
.c9 { color: #009900AA; }

/*  valores */
.c10 { color: rgb(34, 12, 64, 0.6); }
.c11 { color: rgba(34, 12, 64, 0.6); }
.c12 { color: rgb(34 12 64 / 0.6); }
.c13 { color: rgba(34 12 64 / 0.6); }

/*  valores */
.c14 { color: hsl(30, 100%, 50%, 0.6); }
.c15 { color: hsla(30, 100%, 50%, 0.6); }
.c16 { color: hsl(30 100% 50% / 0.6); }
.c17 { color: hsla(30 100% 50% / 0.6); }

Valor inicial	Varies from one browser to another
Applies to	all elements. It also applies to `::first-letter` and `::first-line`.
Heredable	yes
Media	visual
Valor calculado	If the value is translucent, the computed value will be the `rgba()` corresponding one. If it isn't, it will be the `rgb()` corresponding one. The `transparent` keyword maps to `rgba(0,0,0,0)`.
Animation type	a color
Canonical order	el orden único no-ambigüo definido por la gramática formal

Sintaxis

La propiedad color esta especificada como un solo un valor de <color>

Valores

<color>: Establece el color de las partes textuales y decorativas del elemento.

Sintaxis formal

<color>where 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where 
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
where 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Ejemplos

Las siguientes son todas las formas de hacer que el texto de un párrafo sea rojo:

p { color: red; }
p { color: #f00; }
p { color: #ff0000; }
p { color: rgb(255,0,0); }
p { color: rgb(100%, 0%, 0%); }
p { color: hsl(0, 100%, 50%); }

/* 50% translúcido */
p { color: rgba(255, 0, 0, 0.5); } 
p { color: hsla(0, 100%, 50%, 0.5); }

Especificaciones

Especificación	Estado	Comentario
CSS Color Module Level 4 La definición de 'color' en esta especificación.	Working Draft	Agrega sintaxis sin comas para las funciones `rgb()`, `rgba()`, `hsl()`, y `hsla()`. Permite valores alfa en `rgb()` y `hsl()`, convirtiéndose `rgba()` y `hsla()` en alias (obsoletos) para ellos. Agrega una palabra clave de color `rebeccapurple`. Agrega valores de color hexadecimal de 4 y 8 dígitos, donde el último dígito representa el valor alfa. Añade las funciones `hwb()`, `device-cmyk()`, y `color()`.
CSS Transitions La definición de 'color' en esta especificación.	Working Draft	Define `color` como animable.
CSS Color Module Level 3 La definición de 'color' en esta especificación.	Recommendation	Desprecia los colores del sistema. Agrega colores SVG. Agrega las funciones `rgba()`, `hsl()`, y `hsla()`.
CSS Level 2 (Revision 1) La definición de 'color' en esta especificación.	Recommendation	Añade el color `orange` y los colores del sistema.
CSS Level 1 La definición de 'color' en esta especificación.	Recommendation	Definicion inicial.

Feature	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Soporte básico	1	12	1	Si	Si	Si
Keyword color values	1	12	1	3¹	3.5	1
RGB hexadecimal notation (`#RRGGBB`, `#RGB`)	1	12	1	3	3.5	1
RGB functional notation (`rgb()`)	1	12	1	4	3.5	1
HSL color values (`hsl()`)	1	12	1	9	9.5	3.1
Alpha color values (`rgba()`, `hsla()`)	1	12	3	9	10	3.1
`currentcolor`	1	?	1.5	9	9.5	4
`transparent`	1	?	3	9	10	3.1
`rebeccapurple`	38	?	33	11	25	Si
RGBA hexadecimal notation (`#RRGGBBAA`, `#RGBA`)	62 52²	No	49	?	39³	9.1
Space-separated functional color notations	65	?	52	?	52	?
Allow floats in `rgb()` and `rgba()`	66	?	52	?	53	?

Feature	Android webview	Chrome para Android	Edge mobile	Firefox para Android	Opera Android	iOS Safari	Samsung Internet
Soporte básico	1	18	12	4	Si	Si	Si
Keyword color values	Si	Si	Si	Si	Si	Si	Si
RGB hexadecimal notation (`#RRGGBB`, `#RGB`)	Si	Si	Si	Si	Si	Si	Si
RGB functional notation (`rgb()`)	Si	Si	Si	Si	Si	Si	Si
HSL color values (`hsl()`)	Si	Si	Si	Si	Si	Si	Si
Alpha color values (`rgba()`, `hsla()`)	Si	Si	Si	4	Si	Si	Si
`currentcolor`	?	?	?	?	?	?	?
`transparent`	?	?	?	?	?	?	?
`rebeccapurple`	Si	?	?	33	?	8	?
RGBA hexadecimal notation (`#RRGGBBAA`, `#RGBA`)	?	?	No	?	No	?	?
Space-separated functional color notations	65	65	?	52	52	?	?
Allow floats in `rgb()` and `rgba()`	66	66	?	52	53	?	?

1. Internet Explorer 8 and later support gray color keywords spelled with an e (grey, darkgrey, darkslategrey, dimgrey, lightgrey, and lightslategrey). Internet Explorer 3 to Internet Explorer 7 only support the keywords spelled with a (gray, darkgray, darkslategray, dimgray, lightgray, and lightslategray).

2. From version 52: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.

3. From version 39: this feature is behind the Enable experimental Web Platform features preference.

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	iOS Safari	Samsung Internet
Soporte básico	Chrome Soporte completo 1	Edge Soporte completo 12	Firefox Soporte completo 1	IE Soporte completo Si	Opera Soporte completo Si	Safari Soporte completo Si	WebView Android Soporte completo 1	Chrome Android Soporte completo 18	Edge Mobile Soporte completo 12	Firefox Android Soporte completo 4	Opera Android Soporte completo Si	Safari iOS Soporte completo Si	Samsung Internet Android Soporte completo Si
Keyword color values	Chrome Soporte completo 1	Edge Soporte completo 12	Firefox Soporte completo 1	IE Soporte completo 3 Notas Soporte completo 3 Notas Notas Internet Explorer 8 and later support gray color keywords spelled with an e (`grey`, `darkgrey`, `darkslategrey`, `dimgrey`, `lightgrey`, and `lightslategrey`). Internet Explorer 3 to Internet Explorer 7 only support the keywords spelled with a (`gray`, `darkgray`, `darkslategray`, `dimgray`, `lightgray`, and `lightslategray`).	Opera Soporte completo 3.5	Safari Soporte completo 1	WebView Android Soporte completo Si	Chrome Android Soporte completo Si	Edge Mobile Soporte completo Si	Firefox Android Soporte completo Si	Opera Android Soporte completo Si	Safari iOS Soporte completo Si	Samsung Internet Android Soporte completo Si
RGB hexadecimal notation (`#RRGGBB`, `#RGB`)	Chrome Soporte completo 1	Edge Soporte completo 12	Firefox Soporte completo 1	IE Soporte completo 3	Opera Soporte completo 3.5	Safari Soporte completo 1	WebView Android Soporte completo Si	Chrome Android Soporte completo Si	Edge Mobile Soporte completo Si	Firefox Android Soporte completo Si	Opera Android Soporte completo Si	Safari iOS Soporte completo Si	Samsung Internet Android Soporte completo Si
RGB functional notation (`rgb()`)	Chrome Soporte completo 1	Edge Soporte completo 12	Firefox Soporte completo 1	IE Soporte completo 4	Opera Soporte completo 3.5	Safari Soporte completo 1	WebView Android Soporte completo Si	Chrome Android Soporte completo Si	Edge Mobile Soporte completo Si	Firefox Android Soporte completo Si	Opera Android Soporte completo Si	Safari iOS Soporte completo Si	Samsung Internet Android Soporte completo Si
HSL color values (`hsl()`)	Chrome Soporte completo 1	Edge Soporte completo 12	Firefox Soporte completo 1	IE Soporte completo 9	Opera Soporte completo 9.5	Safari Soporte completo 3.1	WebView Android Soporte completo Si	Chrome Android Soporte completo Si	Edge Mobile Soporte completo Si	Firefox Android Soporte completo Si	Opera Android Soporte completo Si	Safari iOS Soporte completo Si	Samsung Internet Android Soporte completo Si
Alpha color values (`rgba()`, `hsla()`)	Chrome Soporte completo 1	Edge Soporte completo 12	Firefox Soporte completo 3	IE Soporte completo 9	Opera Soporte completo 10	Safari Soporte completo 3.1	WebView Android Soporte completo Si	Chrome Android Soporte completo Si	Edge Mobile Soporte completo Si	Firefox Android Soporte completo 4	Opera Android Soporte completo Si	Safari iOS Soporte completo Si	Samsung Internet Android Soporte completo Si
`currentcolor`	Chrome Soporte completo 1	Edge ?	Firefox Soporte completo 1.5	IE Soporte completo 9	Opera Soporte completo 9.5	Safari Soporte completo 4	WebView Android ?	Chrome Android ?	Edge Mobile ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
`transparent`	Chrome Soporte completo 1	Edge ?	Firefox Soporte completo 3	IE Soporte completo 9	Opera Soporte completo 10	Safari Soporte completo 3.1	WebView Android ?	Chrome Android ?	Edge Mobile ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
`rebeccapurple`	Chrome Soporte completo 38	Edge ?	Firefox Soporte completo 33	IE Soporte completo 11	Opera Soporte completo 25	Safari Soporte completo Si	WebView Android Soporte completo Si	Chrome Android ?	Edge Mobile ?	Firefox Android Soporte completo 33	Opera Android ?	Safari iOS Soporte completo 8	Samsung Internet Android ?
RGBA hexadecimal notation (`#RRGGBBAA`, `#RGBA`)	Chrome Soporte completo 62 Soporte completo 62 Soporte completo 52 Deshabilitado Deshabilitado From version 52: this feature is behind the `Enable experimental Web Platform features` preference. To change preferences in Chrome, visit chrome://flags.	Edge Sin soporte No	Firefox Soporte completo 49	IE ?	Opera Soporte completo 39 Deshabilitado Soporte completo 39 Deshabilitado Deshabilitado From version 39: this feature is behind the `Enable experimental Web Platform features` preference.	Safari Soporte completo 9.1	WebView Android ?	Chrome Android ?	Edge Mobile Sin soporte No	Firefox Android ?	Opera Android Sin soporte No	Safari iOS ?	Samsung Internet Android ?
Space-separated functional color notations	Chrome Soporte completo 65	Edge ?	Firefox Soporte completo 52	IE ?	Opera Soporte completo 52	Safari ?	WebView Android Soporte completo 65	Chrome Android Soporte completo 65	Edge Mobile ?	Firefox Android Soporte completo 52	Opera Android Soporte completo 52	Safari iOS ?	Samsung Internet Android ?
Allow floats in `rgb()` and `rgba()`	Chrome Soporte completo 66	Edge ?	Firefox Soporte completo 52	IE ?	Opera Soporte completo 53	Safari ?	WebView Android Soporte completo 66	Chrome Android Soporte completo 66	Edge Mobile ?	Firefox Android Soporte completo 52	Opera Android Soporte completo 53	Safari iOS ?	Samsung Internet Android ?

Leyenda

Soporte completo: Soporte completo
Sin soporte: Sin soporte
Compatibility unknown: Compatibility unknown
Ver notas de implementación.: Ver notas de implementación.
El usuario debe de habilitar explícitamente esta característica.: El usuario debe de habilitar explícitamente esta característica.

Ver también

El tipo de datos de <color>
Otras propiedades relacionadas con el color: background-color, border-color, outline-color, text-decoration-color, text-emphasis-color, text-shadow, caret-color, y column-rule-color
Aplicar color a elementos HTML usando CSS