Colores CSS

CSS ofrece múltiples formas de especificar colores, cada una con sus ventajas según el contexto. Elegir el formato correcto simplifica el mantenimiento del código, facilita los temas de color y evita errores de accesibilidad.

Formatos de color en CSS

Palabras clave (color names)

color: red;
background-color: cornflowerblue;
border-color: transparent;

CSS 4 reconoce 148 nombres, pero su uso práctico se limita a prototipos rápidos y valores especiales como transparent y currentColor. Para producción, siempre es preferible un valor explícito que no dependa de que el lector conozca el color exacto de darkslateblue.

HEX (#RRGGBB)

color: #1d4ed8;            /* azul */
background: #f5f5f5;       /* gris muy claro */
border: 1px solid #e5e7eb;

El formato más extendido en diseño web. Compacto y fácil de copiar desde cualquier herramienta de diseño. Acepta notación de 3 dígitos (#RGB), 6 dígitos (#RRGGBB) y 8 dígitos con transparencia (#RRGGBBAA). Ver el artículo de Color HEX para la referencia completa.

RGB y RGBA

color: rgb(29, 78, 216);
background: rgba(0, 0, 0, 0.5);   /* negro al 50 % */

/* CSS Color Level 4 (sin coma) */
background: rgb(0 0 0 / 50%);

Útil cuando los valores de canal se generan dinámicamente (desde JavaScript o variables CSS). Menos legible que HEX para colores fijos.

HSL y HSLA

color: hsl(220, 80%, 45%);
background: hsla(220, 80%, 45%, 0.1);

/* CSS Color Level 4 */
background: hsl(220 80% 45% / 10%);

El formato más intuitivo para crear y ajustar paletas: el matiz (H) identifica el color, la saturación (S) su viveza y la luminosidad (L) si es claro u oscuro. Para profundizar en este modelo, consulta el artículo de Color HSL.

Otros formatos modernos (CSS Color Level 4 y 5)

CSS 4 introduce oklch(), lab(), lch() y oklab(), que trabajan en espacios de color perceptualmente uniformes. oklch() es el más prometedor para diseño: permite crear escalas de color que parecen igualmente brillantes a lo largo del espectro, algo que HSL no garantiza (el amarillo puro en HSL parece mucho más brillante que el azul puro aunque ambos tengan L: 50%).

/* oklch(luminancia croma tono) */
color: oklch(0.6 0.2 250);   /* azul de luminancia media */

El soporte de oklch es amplio desde 2023 (Chrome 111+, Firefox 113+, Safari 16+).

Variables de color en CSS

Las custom properties (variables CSS) son la forma estándar de gestionar una paleta coherente:

:root {
  --color-primario: hsl(220, 80%, 45%);
  --color-primario-claro: hsl(220, 80%, 90%);
  --color-acento: hsl(40, 90%, 50%);
  --color-texto: hsl(220, 15%, 15%);
  --color-superficie: hsl(220, 15%, 98%);
}

/* Tema oscuro */
[data-theme="dark"] {
  --color-texto: hsl(220, 15%, 92%);
  --color-superficie: hsl(220, 15%, 12%);
}

Con esta estructura, cambiar el color primario de toda la web es una sola línea. Además, si defines las variables con HSL, puedes generar variantes de forma programática:

/* En lugar de --color-primario: hsl(220, 80%, 45%),
   separa el matiz como variable independiente */
:root {
  --hue: 220;
  --color-primario: hsl(var(--hue), 80%, 45%);
  --color-hover: hsl(var(--hue), 80%, 35%);
  --color-activo: hsl(var(--hue), 80%, 30%);
}

currentColor y herencia

currentColor es una palabra clave especial que toma el valor de la propiedad color del elemento actual. Es muy útil para que iconos SVG, bordes y decoraciones hereden el color del texto automáticamente:

.boton {
  color: #1d4ed8;
  border: 2px solid currentColor;  /* borde del mismo azul */
}

.boton svg {
  fill: currentColor;  /* el icono toma el color del botón */
}

Accesibilidad y elección de colores

El formato CSS no afecta el contraste, pero el valor sí. Antes de fijar cualquier par de colores texto/fondo, verifica que el ratio supera 4,5:1 para texto normal (requisito WCAG nivel AA). Además, nunca transmitas información solo mediante el color: usuarios con daltonismo (8 % de los hombres) pueden no distinguir rojo de verde. Acompaña siempre los estados de error o éxito con un icono, texto o patrón adicional. Puedes ampliar este tema en el artículo de Accesibilidad web.

Cuándo usar cada formato

La recomendación general para proyectos nuevos es usar variables CSS con HSL para los colores de paleta y HEX para valores puntuales heredados de las especificaciones de diseño. Los formatos oklch() y lch() son la dirección del estándar, pero todavía requieren fallbacks para navegadores más antiguos.