Generador de paletas de colores

Elige un color base y te proponemos colores que combinan con él según la teoría del color, además de una escala completa de tonos claros y oscuros (50 a 950) para usar en tu web o aplicación.

Armonías de color

Las armonías se basan en la posición de los colores en el círculo cromático. La complementaria usa el color opuesto (180°) y da el máximo contraste; la análoga, los vecinos (±30° y ±60°), que resultan tranquilos y naturales; la triádica, tres colores a 120°; la complementaria dividida, los dos vecinos del opuesto, más fácil de equilibrar que la complementaria; y la tetrádica, cuatro colores a 90°. La monocromática mantiene el tono y varía la luminosidad.

Un consejo clásico es la regla 60-30-10: un color dominante en el 60 % del diseño, uno secundario en el 30 % y un color de acento en el 10 % restante.

Escala de tonos 50-950

Los sistemas de diseño como Tailwind CSS, Material o Bootstrap usan para cada color una escala del 50 (casi blanco) al 950 (casi negro): los tonos claros sirven para fondos, los medios para botones y enlaces, y los oscuros para textos y estados activos.

Calculamos la paleta en el espacio de color OKLCH, que es perceptualmente uniforme: al girar el tono o cambiar la luminosidad, los colores conservan la misma claridad aparente, algo que no ocurre con HSL (en HSL, un amarillo y un azul con la misma «luminosidad» se ven muy distintos).