¿Cómo especificas colores en CSS?

Question

Accepted Answer

CSS ofrece varios formatos de color. Producen los mismos colores — la elección se trata de legibilidad y si necesitas transparencia.

```css
.a { color: red; }                      /* named keyword (~150 of them) */
.b { color: #ff5733; }                  /* hex: #RRGGBB */
.c { color: #ff5733cc; }                /* hex with alpha: #RRGGBBAA */
.d { color: rgb(255 87 51); }           /* red green blue (0–255) */
.e { color: rgb(255 87 51 / 0.8); }     /* with 80% opacity */
.f { color: hsl(9 100% 60%); }          /* hue saturation lightness */
.g { color: hsl(9 100% 60% / 0.5); }    /* HSL with alpha */
```

## Por qué HSL es a menudo el más útil

HSL describe el color como **H**ue (0–360° en la rueda de color), **S**aturation y **L**ightness — lo que se corresponde con cómo los humanos piensan sobre el color, haciendo las variaciones intuitivas:

```css
:root { --brand-h: 220; }
.primary       { background: hsl(var(--brand-h) 80% 50%); }
.primary-light { background: hsl(var(--brand-h) 80% 70%); } /* just raise lightness */
.primary-dark  { background: hsl(var(--brand-h) 80% 30%); } /* just lower it */
```

Generar un matiz más claro/oscuro es trivial — cambia un número. Hacer eso con hex o rgb requiere recalcular todos los canales.

## Alpha / transparencia

```css
background: rgb(0 0 0 / 0.5); /* 50% transparent black — for overlays */
```

La sintaxis `/ alpha` (0 = transparente, 1 = opaco) es cómo haces colores semi-transparentes, útil para superponer y sombras. (Nota: `opacity` en un elemento desvanece el *elemento completo*, incluyendo hijos — los colores alpha desvanecen solo ese color.)

## Formatos modernos

```css
color: oklch(70% 0.15 220); /* perceptually-uniform; better for color systems */
```

## Por qué es importante

Conocer los formatos te permite elegir la herramienta correcta: hex/rgb para colores únicos, **HSL/OKLCH para sistemas de diseño** (fácil, variaciones de matiz intuitivas), y la sintaxis `/ alpha` para transparencia.

HSL especialmente hace que construir paletas de color consistentes y temáticas sea mucho más fácil.