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>` (en-US) 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 (en-US).

#### Ejemplo


```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 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 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: 0.5em;
  padding: 0.5em;
  background-color: #fff;
  overflow: hidden;
  text-align: left;
  font-style: italic;
}

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

p:first-child {
  padding-top: 0.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 | `canvastext` |
| Applies to | all elements and text. It also applies to `::first-letter` and `::first-line`. |
| Heredable | yes |
| Valor calculado | computed color |
| Animation type | by computed value type |

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 =   
  <color>    
  
```

Ejemplos
--------

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


```css
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
----------------

| Specification |
| --- |
| CSS Color Module Level 4 # the-color-property |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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` (en-US)
* Aplicar color a elementos HTML usando CSS (en-US)