Generador de paletas de colores
Generá paletas armoniosas en segundos. Elegí un esquema (análogo, complementario, triádico o monocromático), bloqueá los colores que te gusten y descargá los códigos HEX listos para usar.
Tocá una tarjeta para bloquear ese color (no cambia al regenerar). Tocá el HEX para copiarlo.
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.
Preguntas frecuentes
¿Qué es una paleta armónica?
Es un grupo de colores que comparten una relación matemática en la rueda cromática (mismo tono, tonos opuestos, separados por 120°, etc.). Eso garantiza que combinen.
¿Para qué sirve la regla 60-30-10?
60% color dominante, 30% secundario, 10% acento. Aplicarla evita interfaces planas o saturadas.
¿Cuántos colores debe tener una paleta?
Para branding, 3 a 5. Para UI completa necesitás también una escala neutral de 8-10 grises y estados (success, warning, danger).
¿Puedo descargar la paleta?
Sí. Tocá "Copiar todo" para llevar los HEX al portapapeles, o tocá cada HEX individual para copiarlo solo.