:root {
--color-1: #3b82f6;
--color-2: #f6af3b;
}Qué hace
El Generador de paletas de colores convierte cualquier color base en una paleta armoniosa usando las reglas clásicas de la teoría del color: complementaria, complementaria dividida, análoga, tríada, tétrada y monocromática. Elige un color, escoge una armonía y obtén un juego de muestras listo para usar con copia de un clic. Exporta la paleta completa como propiedades personalizadas CSS, un fragmento de configuración Tailwind, o JSON sin adornos. Todo se ejecuta 100% en el cliente: nada sale de tu navegador.
Cómo usarlo
- Elige un color base con la muestra de color, o escribe un valor hex (p. ej.
#3B82F6) en el campo de texto. Pulsa Randomize para lanzar una base nueva. - Escoge un esquema de armonía - Complement, Split-Complement, Analogous, Triadic, Tetradic o Monochromatic. Para Monochromatic, fija el número de Pasos (2-9).
- Haz clic en cualquier muestra para copiar su hex - el valor se muestra sobre el propio color, en negro o blanco según qué se lea mejor.
- En el panel Export, elige CSS / Tailwind / JSON y Copy export para llevarte la paleta completa de una vez.
- Pulsa Copy link para capturar una URL compartible - el color base, el esquema y el número de pasos van codificados en el enlace, así quien lo abra ve tu paleta exacta.
Ejemplos
Paleta complementaria a partir del rojo
Base #FF0000 → [ #FF0000, #00FFFF ] - rojo y cian, directamente opuestos en el círculo.
Exportación Tailwind
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
palette: {
'1': '#3b82f6',
'2': '#f59e0b',
},
},
},
},
};Exportación de variables CSS
:root {
--color-1: #3b82f6;
--color-2: #f59e0b;
}Buen saber
- Monochromatic mantiene el tono y la saturación de la base, repartiendo la luminosidad entre el número de pasos elegido - ideal para construir escalas tonales de UI.
- Privado: toda la generación ocurre localmente en tu navegador - seguro para colores de marca propietarios.
- Compartible: cada paleta tiene su propia URL - color base, armonía y número de pasos viven en el
hashhashA one-way function that maps data of any size to a fixed-length digest. Same input, same digest; any change, different digest; not reversible.
del enlace, así que guardarlo o compartirlo recarga la paleta exacta. - Formatos: hex es la fuente de la verdad; HSL se muestra como referencia y se usa internamente para los cálculos de armonía.
- Herramientas relacionadas: busca las herramientas de gradiente y contraste en Color & Design.