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} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <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`)	63 52²	No	49	?	39³	9.1
Space-separated functional color notations	65	?	52	?	52	?
Allow floats in `rgb()` and `rgba()`	67	?	52	?	?	?

Feature	Android webview	Chrome para Android	Edge mobile	Firefox para Android	Opera Android	iOS Safari	Samsung Internet
Soporte básico	1	1	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	?	?	?	52	?	?	?
Allow floats in `rgb()` and `rgba()`	67	67	?	52	?	?	?

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	Soporte completo 1	Soporte completo 12	Soporte completo 1	Soporte completo Si	Soporte completo Si	Soporte completo Si	Soporte completo 1	Soporte completo 1	Soporte completo 12	Soporte completo 4	Soporte completo Si	Soporte completo Si	Soporte completo Si
Keyword color values	Soporte completo 1	Soporte completo 12	Soporte completo 1	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`).	Soporte completo 3.5	Soporte completo 1	Soporte completo Si	Soporte completo Si	Soporte completo Si	Soporte completo Si	Soporte completo Si	Soporte completo Si	Soporte completo Si
RGB hexadecimal notation (`#RRGGBB`, `#RGB`)	Soporte completo 1	Soporte completo 12	Soporte completo 1	Soporte completo 3	Soporte completo 3.5	Soporte completo 1	Soporte completo Si	Soporte completo Si	Soporte completo Si	Soporte completo Si	Soporte completo Si	Soporte completo Si	Soporte completo Si
RGB functional notation (`rgb()`)	Soporte completo 1	Soporte completo 12	Soporte completo 1	Soporte completo 4	Soporte completo 3.5	Soporte completo 1	Soporte completo Si	Soporte completo Si	Soporte completo Si	Soporte completo Si	Soporte completo Si	Soporte completo Si	Soporte completo Si
HSL color values (`hsl()`)	Soporte completo 1	Soporte completo 12	Soporte completo 1	Soporte completo 9	Soporte completo 9.5	Soporte completo 3.1	Soporte completo Si	Soporte completo Si	Soporte completo Si	Soporte completo Si	Soporte completo Si	Soporte completo Si	Soporte completo Si
Alpha color values (`rgba()`, `hsla()`)	Soporte completo 1	Soporte completo 12	Soporte completo 3	Soporte completo 9	Soporte completo 10	Soporte completo 3.1	Soporte completo Si	Soporte completo Si	Soporte completo Si	Soporte completo 4	Soporte completo Si	Soporte completo Si	Soporte completo Si
`currentcolor`	Soporte completo 1	?	Soporte completo 1.5	Soporte completo 9	Soporte completo 9.5	Soporte completo 4	?	?	?	?	?	?	?
`transparent`	Soporte completo 1	?	Soporte completo 3	Soporte completo 9	Soporte completo 10	Soporte completo 3.1	?	?	?	?	?	?	?
`rebeccapurple`	Soporte completo 38	?	Soporte completo 33	Soporte completo 11	Soporte completo 25	Soporte completo Si	Soporte completo Si	?	?	Soporte completo 33	?	Soporte completo 8	?
RGBA hexadecimal notation (`#RRGGBBAA`, `#RGBA`)	Soporte completo 63 Soporte completo 63 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.	Sin soporte No	Soporte completo 49	?	Soporte completo 39 Deshabilitado Soporte completo 39 Deshabilitado Deshabilitado From version 39: this feature is behind the `Enable experimental Web Platform features` preference.	Soporte completo 9.1	?	?	Sin soporte No	?	Sin soporte No	?	?
Space-separated functional color notations	Soporte completo 65	?	Soporte completo 52	?	Soporte completo 52	?	?	?	?	Soporte completo 52	?	?	?
Allow floats in `rgb()` and `rgba()`	Soporte completo 67	?	Soporte completo 52	?	?	?	Soporte completo 67	Soporte completo 67	?	Soporte completo 52	?	?	?

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