Variables CSS para color: cómo crear un sistema de color escalable

1. Qué son las variables CSS y por qué son esenciales para el color

Las variables CSS (oficialmente llamadas custom properties) son valores que defines una vez y puedes reutilizar en cualquier parte de tu hoja de estilos. Se declaran con dos guiones seguidos del nombre y se usan dentro de la función var():

:root {
  --color-primary: #3A86FF;
  --color-accent: #FF6B35;
  --color-text: #1a1a1a;
}

.button {
  background-color: var(--color-primary);
  color: var(--color-text);
}

La ventaja inmediata: si necesitas cambiar el color principal de tu web, cambias un solo valor y el cambio se aplica en todos los elementos que usan esa variable. Sin variables, tendrías que buscar y reemplazar el código HEX en decenas de lugares.

2. Tokens primitivos y tokens semánticos

Hay dos niveles de variables de color que conviene separar claramente:

Tokens primitivos son los colores en bruto de tu paleta, sin asignarles un rol:

:root {
  --blue-300: #93c5fd;
  --blue-500: #3b82f6;
  --blue-700: #1d4ed8;
  --gray-50:  #f9fafb;
  --gray-900: #111827;
}

Tokens semánticos asignan esos colores primitivos a roles concretos en la interfaz:

:root {
  --color-background: var(--gray-50);
  --color-text-primary: var(--gray-900);
  --color-brand: var(--blue-500);
  --color-brand-hover: var(--blue-700);
}

Separar los dos niveles tiene una ventaja clave: cuando cambias de paleta, solo actualizas los tokens semánticos para que apunten a los nuevos primitivos. El resto del CSS no cambia.

3. Variables CSS para dark mode

Las variables CSS hacen que implementar dark mode sea mucho más limpio. Solo redefines las variables semánticas dentro de la media query prefers-color-scheme: dark:

:root {
  --color-background: #ffffff;
  --color-text-primary: #1a1a1a;
  --color-brand: #3b82f6;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #121212;
    --color-text-primary: #f0f0f0;
    --color-brand: #60a5fa;
  }
}

Todo el CSS que usa var(--color-background) se actualiza automáticamente en ambos modos sin necesidad de tocar ningún otro archivo.

4. Convenciones de nomenclatura recomendadas

Una buena convención de nombres es casi tan importante como los propios colores. Estos patrones funcionan bien:

• Por función: --color-background, --color-text, --color-border, --color-interactive. Muy descriptivo y fácil de entender para cualquier persona del equipo.
• Por escala numérica: --blue-100 a --blue-900 siguiendo el modelo de Tailwind. Útil para los tokens primitivos.
• Mixto: primitivos con escala numérica y semánticos con nombre funcional. Es la estructura más profesional y la que mejor escala en proyectos grandes.

Lo más importante es ser consistente. Un sistema de variables inconsistente es casi tan problemático como no tener variables.

5. Obtener los valores correctos para tus variables

Antes de definir tus variables necesitas tener claros los códigos exactos de tu paleta. El Convertidor de Color;Code te permite obtener el mismo color en HEX, RGB y HSL simultáneamente.

HSL es especialmente útil en variables CSS porque facilita crear variantes dentro del propio CSS. Si defines tu color base como --hue-primary: 214, puedes construir toda la escala manipulando solo la luminosidad con hsl(var(--hue-primary), 80%, 45%).

Verifica también que las combinaciones cumplan los ratios de contraste con el Test de contraste antes de fijarlos como tokens definitivos.

Qué hacer ahora

1. Define tu paleta completa con el Generador de paletas y anota los códigos HEX de cada color.
2. Convierte esos HEX a HSL con el Convertidor si vas a trabajar con variables HSL.
3. Crea tus tokens primitivos (escala de colores) y semánticos (roles) siguiendo la estructura de esta guía.
4. Declara todos en :root y redefine los semánticos en @media (prefers-color-scheme: dark) si implementas dark mode.

Sigue aprendiendo sobre color y desarrollo web en las guías de Color;Code.