Generador de paletas de colores
Genera paletas a partir de un color base: complementario, análogo, triádico, tetrádico, complementario dividido y monocromático. Copia cualquier color con un clic.
Prueba otra herramienta
Elegidas para acompañar a estaGenera paletas de colores a partir de un color base usando las relaciones clásicas de la teoría del color: complementario, análogo, triádico, tetrádico, complementario dividido y monocromático. Escribes un color en hexadecimal y obtienes las seis paletas calculadas con aritmética de matiz, no elegidas a ojo ni por un modelo. Cada color se puede copiar con un clic. Sirve para una marca, una web, una presentación o cualquier cosa que necesite más de un color que no choque. Todo se calcula en tu navegador.
Cómo usar esta herramienta
- 01Escribe el color baseEn hexadecimal, con o sin almohadilla: #3B82F6 o 3B82F6. Es el color del que sale todo lo demás.
- 02Mira las seis paletasCada una aplica una relación distinta sobre la rueda de color. No hay que elegir antes: salen todas a la vez.
- 03Copia el color que necesitesUn clic en cualquier muestra copia su valor hexadecimal, listo para pegar en CSS o en una herramienta de diseño.
¿Cuándo es útil?
- Ampliar un color de marcaTienes el color corporativo y necesitas dos o tres más que funcionen con él sin inventártelos.
- Elegir un color de acentoEl complementario del color principal es el acento clásico: el que más contrasta sin salirse del sistema.
- Construir una escala monocromáticaPara fondos, bordes y estados dentro del mismo tono, sin meter un color nuevo en la interfaz.
Ejemplos
- ComplementarioA partir de un azul, el complementario es el naranja que está justo enfrente en la rueda, a 180 grados. Es el par de máximo contraste.
- AnálogoLos dos colores vecinos, a 30 grados a cada lado. Dan una combinación tranquila, porque comparten familia con el base.
- TriádicoTres colores separados 120 grados. Da variedad manteniendo el equilibrio, y va bien cuando hacen falta tres categorías visualmente distintas.
Consejos para un mejor resultado
- El complementario no siempre va bien a partes igualesDos colores opuestos al 50 % cansan la vista. Lo habitual es usar uno como dominante y el otro solo como acento.
- La paleta no garantiza contraste accesibleDos colores pueden armonizar y ser ilegibles uno sobre otro. Pasa la combinación de texto y fondo por un verificador de contraste.
Cómo se calculan las paletas
El color base se convierte a HSL y las paletas se generan rotando el matiz un número fijo de grados, manteniendo la saturación y la luminosidad. El complementario gira 180 grados; el análogo, 30 a cada lado; el triádico, 120; el tetrádico, 90; y el complementario dividido toma los dos vecinos del complementario en lugar del complementario en sí. El monocromático no rota el matiz: varía la luminosidad. Es aritmética sobre la rueda de color, reproducible y sin ningún modelo por medio.
Cuándo usar cada relación
El complementario da el máximo contraste y funciona para un acento que tiene que destacar. El análogo es tranquilo y cohesionado, bueno para fondos y para interfaces que no quieren llamar la atención. El triádico da variedad equilibrada cuando hacen falta tres categorías distinguibles, como en un gráfico. El tetrádico ofrece dos pares complementarios y es el más difícil de equilibrar. El complementario dividido da casi el contraste del complementario con menos tensión. El monocromático no aporta color nuevo: aporta jerarquía dentro del mismo.
Armonía no es accesibilidad
Estas relaciones dicen qué colores funcionan juntos estéticamente, no cuáles se leen bien uno sobre otro. Un amarillo y un blanco pueden ser perfectamente armónicos y completamente ilegibles. Si vas a poner texto encima, comprueba la combinación concreta con un verificador de contraste contra los umbrales WCAG: son dos preguntas distintas y esta herramienta solo responde a la primera.
Privacidad
Todo el cálculo ocurre en tu navegador. El color que escribes no se envía a ningún servidor.
Preguntas frecuentes
¿Qué es un color complementario?
El que está justo enfrente en la rueda de color, a 180 grados. Es el que más contrasta con el base.
¿Qué formato de color acepta?
Hexadecimal, con o sin almohadilla: #3B82F6 o 3B82F6. Si el valor no es válido, te lo dice.
¿Cuántos colores debería usar una paleta?
Como orientación, un color dominante, uno de acento y una escala neutra suelen bastar. Más de tres colores fuertes es difícil de equilibrar.
¿Los colores de la paleta son accesibles entre sí?
No necesariamente. La armonía y el contraste son cosas distintas: comprueba las combinaciones de texto y fondo con un verificador de contraste.
¿Usa inteligencia artificial?
No. Son rotaciones fijas de matiz sobre la rueda de color, así que el mismo color base da siempre la misma paleta.