Generador de paletas de colores

Empieza por el color base, no por la paleta. El base es el color que la gente asocia con tu marca: el del logo, el del botón principal, el del enlace. Elígelo con una luminosidad media (ni casi blanco ni casi negro) porque de ahí saldrán luego los tonos claros y oscuros; si arrancas de un color extremo, media escala se te queda plana. Cuando tengas un candidato, pruébalo en contexto con Colores en vivo: ver un color aislado en un cuadrado engaña, verlo en una web completa no.

Las escalas son las que sostienen la interfaz. Un producto real no usa tres colores, usa treinta variantes de tres colores. La convención 50-950 te da ese reparto sin pensarlo: los pasos 50-200 sirven para fondos suaves, tarjetas y estados seleccionados; los 300-400 para bordes, separadores y elementos deshabilitados; el 500-600 es tu color de acción (botones, enlaces, iconos activos); y del 700 al 950 sacas textos sobre fondo claro, estados hover y superficies del modo oscuro. Exporta la escala como variables CSS o como escala de Tailwind y deja de escribir hex sueltos en cada componente.

Análoga cuando quieres calma, complementaria cuando quieres contraste. La armonía análoga toma vecinos del círculo cromático (±30°): produce paletas cohesionadas, ideales para fondos, degradados e ilustraciones donde nada debe gritar. La complementaria toma el color opuesto (180°) y sirve justo para lo contrario: destacar una sola cosa, un botón de compra, una alerta, un dato clave. La complementaria dividida suaviza ese choque y suele ser la opción más segura para una web entera; la tríada y la tétrada dan variedad para gráficas, categorías o etiquetas; y la monocromática es el atajo cuando la marca ya tiene un color fuerte y solo necesitas jerarquía.

Valida el contraste antes de maquetar, no después. Un texto necesita 4,5:1 respecto a su fondo (3:1 si es grande o va en negrita), así que decide desde el principio qué pasos de la escala llevan texto blanco y cuáles texto negro. Un truco que ahorra horas: usa el paso 600 o 700 para texto sobre fondos claros y reserva el 400-500 para superficies con texto blanco encima. Con la paleta cerrada, aplícala al resto de tu identidad — por ejemplo generando el icono del navegador con la galería de favicons SVG — y si quieres profundizar en teoría de color, tipografía y sistemas de diseño, en el blog vas encontrando guías nuevas cada semana.