Cómo se construye una paleta que funciona
Una paleta de colores no se elige por gusto: se construye sobre la rueda cromática. Cada esquema es una regla geométrica que garantiza armonía visual y reduce el riesgo de elegir combinaciones que generan ruido o cansancio visual.
- Análogo: 3 colores juntos en la rueda (ej: azul, azul-verde, verde). Se siente sereno y cohesivo. Ideal para fondos, ilustraciones y marcas que buscan calma.
- Complementario: dos colores opuestos (ej: azul y naranja). Máximo contraste, perfecto para CTAs que tienen que destacar contra el fondo.
- Triádico: 3 colores separados por 120°. Vibrante pero balanceado, se usa mucho en branding moderno y diseño infantil.
- Tetrádico: 4 colores en pares complementarios. Difícil de balancear; conviene un dominante y tres acentos.
- Monocromático: mismo tono con distintos niveles de saturación y luminosidad. Sobrio, elegante, casi imposible de fallar.
La regla 60-30-10
Heredada del diseño de interiores y adoptada por la UI moderna: 60% color dominante (fondos y áreas grandes), 30% color secundario (cards, sidebars, navegación), 10% color de acento (botones primarios, links, indicadores). Si en tu interfaz el acento ocupa más del 15%, deja de ser acento y se convierte en ruido.
HEX vs RGB vs HSL: cuál usar
Los tres formatos representan el mismo color, pero sirven para cosas distintas.
HEX (#059669) es el más compacto y el estándar para
compartir colores entre diseño y desarrollo. RGB
(rgb(5, 150, 105)) permite alpha y se usa donde HEX no está soportado.
HSL (hsl(160, 94%, 30%)) es el más útil para
generar variaciones: subir o bajar la luminosidad mantiene el tono, lo que
permite construir escalas como las de Tailwind o Material partiendo de un solo color.
Accesibilidad: el contraste no es opcional
Antes de cerrar una paleta, verificá el contraste entre texto y fondo. WCAG 2.1 exige al menos 4.5:1 para texto normal y 3:1 para texto grande (nivel AA). Para AAA, 7:1 y 4.5:1 respectivamente. Una paleta hermosa que falla en contraste es inservible: excluye a usuarios con baja visión y a cualquiera que use el sitio bajo sol directo.
Cómo aplicar una paleta a una interfaz real
- Definí el primario. El color que más representa tu marca. No empieces por el secundario.
- Construí una escala neutra de 8-10 grises. No son negros mezclados con blanco: tienen un tinte sutil hacia tu primario.
- Sumá estados: success (verde), warning (ámbar), danger (rojo), info (azul). Estos son convenciones; respetalas.
- Probá la paleta con texto y bordes, no solo con bloques de color planos. Lo que se ve hermoso en swatches puede chocar en un párrafo.
- Documentá los nombres y los usos. Una paleta sin guía termina en cada equipo eligiendo "el verde que les parece".
Paletas que no fallan
Si dudás, mirá referencias: Stripe, Linear, Vercel y Notion construyen paletas con un primario, una escala fría de grises y muy pocos acentos. La sobriedad envejece mejor que la moda. Antes de elegir cinco colores vibrantes, preguntate cuántos realmente vas a usar en producción.