Generador de Paleta de Colores
El generador de paletas de colores crea una paleta de 5 colores a partir de cualquier color base usando armonías de la teoría del color (complementaria, triádica, análoga, complementaria dividida, tetrádica o monocromática) y la exporta como propiedades personalizadas de CSS.
Acerca de esta herramienta
El generador de paletas de colores crea una paleta de 5 colores a partir de cualquier color base usando armonías de la teoría del color (complementaria, triádica, análoga, complementaria dividida, tetrádica o monocromática) y la exporta como propiedades personalizadas de CSS.
Cómo se usa
- Elige un color base con el selector de color.
- Escoge un tipo de armonía, como complementaria o triádica.
- Revisa las cinco muestras generadas.
- Haz clic en Copiar como variables CSS para pegar la paleta en tu hoja de estilos.
Datos útiles
- Los colores complementarios están a 180° en el círculo cromático; los triádicos están separados 120°.
- Las paletas análogas usan tonos vecinos (a unos 30° de distancia) y suelen transmitir calma y cohesión.
- La complementaria dividida combina un tono base con los dos tonos a cada lado de su complementario (±30°), lo que aporta contraste con menos tensión.
- Las paletas monocromáticas mantienen un solo tono y solo varían la saturación y la luminosidad.
- El generador trabaja en HSL, que rota el tono sin cambiar la luminosidad del color.
Funciona por completo en tu navegador: nada de lo que introduces se sube ni se guarda.
Preguntas frecuentes
¿Qué es una paleta de colores complementarios?
Una paleta complementaria combina un tono con el que está justo enfrente en el círculo cromático (a 180°), como el azul y el naranja. Es la armonía que da el mayor contraste.
¿Cuántos colores debe tener la paleta de un sitio web?
La mayoría de las interfaces usan un color principal, uno o dos de acento y un conjunto de neutros. Una armonía de cinco colores es un buen punto de partida que puedes recortar o ampliar con tintes y sombras.
¿Qué diferencia hay entre triádica y tetrádica?
La triádica usa tres tonos separados uniformemente 120°. La tetrádica usa cuatro tonos separados 90°, formando un cuadrado en el círculo, lo que resulta más rico pero más difícil de equilibrar.
¿Puedo usar la paleta en CSS o Tailwind?
Sí. Copia la paleta como propiedades personalizadas de CSS y úsalas con var(), o pega los valores hex en los colores de tu tema de Tailwind.