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.

Compatibilidad de navegadores

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome para Android	Firefox para Android	Opera para Android	Safari en iOS	Samsung Internet
`color`	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 1	Chrome Android Soporte completo 18	Firefox Android Soporte completo 4	Opera Android Soporte completo 10.1	Safari iOS Soporte completo 1	Samsung Internet Android Soporte completo 1.0

Leyenda

Soporte completo: Soporte completo

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