Paleta de colores

Una paleta de colores es un conjunto de colores seleccionados para trabajar juntos de forma armónica en un diseño. En diseño web y de interfaces, una buena paleta define la identidad visual, guía la jerarquía de contenido y garantiza la accesibilidad del producto.

Tipos de paleta según la rueda de color

La teoría del color clásica clasifica las paletas por la relación entre los matices en la rueda cromática:

Monocromática

Un único matiz en diferentes niveles de saturación y luminosidad. Es la más sencilla de controlar y genera diseños muy cohesivos.

Ejemplo: todas las variantes de azul desde hsl(220, 90%, 20%) hasta hsl(220, 90%, 90%).

Análoga

Colores contiguos en la rueda, que abarcan unos 90°. Produce paletas suaves y naturales.

Ejemplo: azul (#2563EB), azul-violeta (#6D28D9) y violeta (#9333EA).

Complementaria

Dos colores opuestos en la rueda (a 180°). Muy contrastados; el acento complementario destaca inmediatamente sobre el base.

Ejemplo: azul (#2563EB) + naranja (#EA580C).

Triádica

Tres colores equidistantes (a 120° entre sí). Rica en variedad pero exige más cuidado para no saturar el diseño.

Ejemplo: rojo (#DC2626), amarillo (#CA8A04) y azul (#2563EB).

Dividida complementaria

Toma el color base y, en lugar del complementario directo, sus dos vecinos. Menos tensión visual que la complementaria pura.

Tetrádica (cuadrada)

Cuatro colores a 90° entre sí. La paleta más compleja; requiere que al menos dos de los cuatro colores actúen como neutros.

La regla 60-30-10

Independientemente del tipo de paleta, la distribución clásica del diseño de interiores funciona igual en interfaces:

Con esta proporción, el acento capta la atención sin saturar el diseño.

Paletas en sistemas de diseño

Los sistemas de diseño modernos (Material Design, Tailwind CSS, Carbon…) van más allá de elegir tres colores: definen una escala de 10 tonos para cada color de la paleta, numerados del 50 al 950 o similar.

--blue-50:  #eff6ff   (muy claro, fondos)
--blue-100: #dbeafe
--blue-500: #3b82f6   (tono base)
--blue-700: #1d4ed8   (hover)
--blue-900: #1e3a8a   (texto oscuro)

Esto facilita generar estados (hover, focus, disabled) y temas de color (claro/oscuro) de forma sistemática. En HSL, todas estas variantes se generan ajustando únicamente la luminosidad, manteniendo fijo el matiz y la saturación.

Accesibilidad y contraste

Una paleta bonita que no supera los requisitos de contraste WCAG está incompleta. El texto sobre un fondo necesita un ratio de contraste mínimo de 4,5:1 (nivel AA) para texto normal y 3:1 para texto grande (más de 18 px en negrita o más de 24 px normal). Siempre verifica el par texto/fondo antes de dar la paleta por cerrada.

Errores habituales al elegir una paleta

• Demasiados colores de acento: si hay cuatro colores que compiten por atención, ninguno la capta.
• Paleta sin neutros: los grises y blancos son los que permiten que el resto de colores respire.
• No probar en pantallas reales: un color calibrado en Figma puede verse diferente en un monitor no calibrado o en móvil bajo luz solar directa.
• Ignorar el modo oscuro: una paleta diseñada solo para fondo claro puede ser ilegible o agresiva al invertirla. Define los roles semánticos (--color-surface, --color-text) y reasigna los valores de la escala en cada tema.