Generador de paletas de colores
Introduce un color base, elige un esquema de armonía y verás las muestras al instante. Copia un código HEX suelto o toda la paleta como propiedades personalizadas de CSS.
Funciona en tu navegador: nada de lo que escribes se envía a ningún sitio.
Cómo se usa
- Escribe un código HEX o elige un color con el selector.
- Elige un esquema de armonía en la lista.
- Pulsa Copiar junto a una muestra para un solo código, o copia el bloque de variables CSS con toda la paleta.
Cómo funciona
La herramienta pasa el color base de RGB a HSL (tono, saturación, luminosidad) y gira el tono. Por ejemplo, #3366cc es hsl(220, 60%, 50%). Su complementario está a 180°: hsl(40, 60%, 50%), que es #cc9933. Los colores girados se redondean al valor RGB entero más cercano.
Ejemplo
Por defecto la herramienta parte de #3366cc con la tríada: salen #3366cc, #cc3366 y #66cc33, y el bloque CSS es --color-1: #3366cc;, --color-2: #cc3366;, --color-3: #66cc33;. Un rojo puro #ff0000 en complementario dividido da el rojo más #00ff80 y #0080ff, los dos tonos a cada lado del cian.
Consejos
- Usa un color del esquema como principal y los demás como acentos; repartirlos a partes iguales resulta recargado.
- Las paletas análogas transmiten calma; las complementarias, energía.
- Cambia el nombre de las variables según su función (
--brand, --accent) después de pegarlas.
Preguntas frecuentes
¿Cómo se calculan los colores?
El color base se pasa a HSL. Los esquemas de armonía giran el tono ángulos fijos en la rueda de color y conservan la saturación y la luminosidad, así que todos los colores son tan vivos como el base. La primera muestra de cada esquema es tu propio color base.
¿Qué diferencia hay entre tríada y tétrada?
La tríada usa tres tonos separados 120°, un conjunto equilibrado pero vivo. La tétrada usa aquí cuatro tonos en 0°, 60°, 180° y 240°, un rectángulo en la rueda: tiene dos pares complementarios y cuesta más mantenerla equilibrada.
¿Cómo funciona el esquema monocromático?
Conserva el tono y la saturación del color base y fija la luminosidad HSL en 20, 35, 50, 65 y 80 %. El color base solo aparece si su luminosidad coincide con uno de esos valores.
¿Las paletas garantizan suficiente contraste?
No. La armonía describe relaciones de tono, no legibilidad. Comprueba cada pareja de texto y fondo con el comprobador de contraste antes de usarla.