Generador de Paletas de Colores — Esquemas Armónicos desde un HEX (Gratis, CSS/Tailwind)
Ajustar color seleccionado
Exportar paleta
:root {
--color-1: #7C3BED;
--color-2: #3BACED;
--color-3: #3B53ED;
--color-4: #D53BED;
--color-5: #ED3BAC;
}Herramientas externas relacionadas
Algunos enlaces son enlaces de afiliados.
Herramientas relacionadas
Este generador de paletas de colores gratuito crea combinaciones cromáticas armónicas a partir de un color base, siguiendo la teoría del color. Escribe un código HEX, elige un color con el selector o pulsa Aleatorio; luego selecciona un esquema —complementario, análogo, triádico, tetrádico o monocromático— y obtendrás al instante una paleta equilibrada. Bloquea los colores que te gusten y regenera el resto, ajusta luminosidad y saturación con los controles deslizantes, copia cualquier HEX con un clic o exporta la paleta entera como variables CSS, colores de Tailwind o JSON. Todo funciona en tu navegador: tus colores nunca se envían a ningún servidor.
Cómo usarlo
- Escribe un código HEX (p. ej. #7C3AED) o un nombre de color CSS (p. ej. rebeccapurple) en el campo Base, usa el selector de color o pulsa Aleatorio para partir de un color al azar.
- Elige un esquema —Complementario, Análogo, Triádico, Tetrádico, Complementario dividido o Monocromático— y la paleta se actualiza al instante.
- Ajusta el número de colores (3–8) con el control deslizante.
- Haz clic en el icono de candado de cualquier color para fijarlo. Pulsa Regenerar (o la barra espaciadora fuera de un campo) para mezclar solo los desbloqueados.
- Selecciona una muestra y usa los controles de Luminosidad / Saturación para ajustarla. Cambia el ámbito a 'Todos los colores' para modificar toda la paleta en conjunto.
- Copia un HEX con el icono de copiar, o usa 'Copiar todos los HEX'. En la pestaña Exportar, elige el formato y copia o descarga.
- Usa 'Copiar URL de la paleta' para compartir esta combinación exacta.
Esquemas de color (armonía cromática)
Un esquema de color es una regla para elegir colores que se vean armoniosos juntos, basada en sus posiciones en el círculo cromático. Las relaciones de tono son la columna vertebral; las variaciones de luminosidad y saturación añaden riqueza.
Complementario
Dos colores directamente opuestos en el círculo (+180°). Alto contraste y llamativo. Ideal para acentos que destacan.
Complementario dividido
El color base más los dos vecinos de su complementario (+150°/+210°). Tensión más suave que el complementario y más fácil de equilibrar.
Análogo
Tonos adyacentes (±30°). Cohesivo y tranquilo, perfecto para fondos e historias de color naturales.
Triádico
Tres tonos equidistantes en el círculo (+120°/+240°). Equilibrado y vibrante, fuerte y versátil.
Tetrádico
Cuatro tonos a 90° formando un rectángulo. Rico y variado; requiere equilibrar cuidadosamente cálidos y fríos.
Monocromático
Variaciones de luminosidad y saturación de un solo tono. El esquema más seguro: siempre cohesivo y sin riesgos.
Consejo: si no sabes por dónde empezar, prueba Análogo o Monocromático; son los más difíciles de estropear.
Características
Generar desde un color base o aleatoriamente
Introduce cualquier HEX, nombre CSS o usa el selector para establecer un color base, y deja que el esquema genere el resto. O pulsa Aleatorio para un punto de partida completamente nuevo.
Bloquear colores y regenerar el resto
¿Encontraste un color que te gusta? Haz clic en el candado para fijarlo. Regenerar (o espacio) mezcla solo los desbloqueados: rápido para explorar variaciones.
Ajuste fino de luminosidad y saturación
Selecciona una muestra y arrastra los controles de Luminosidad o Saturación sin tocar la armonía de tonos. Usa 'Todos los colores' para desplazar toda la paleta.
Copiar HEX con un clic
Haz clic en el icono de copiar en cualquier muestra para copiar su HEX al portapapeles. Usa 'Copiar todos los HEX' para tomar todos a la vez.
Exportar a variables CSS, Tailwind o JSON
Abre la pestaña Exportar y elige tu formato. Variables CSS da un bloque :root (--color-1, --color-2…). Tailwind da un bloque theme.extend.colors listo para pegar. JSON da un array simple. Los valores de color son siempre HEX en mayúsculas, nunca con formato local.
Sugerencias de contraste y legibilidad
Cada muestra muestra si el texto blanco o negro es más legible sobre ella, la relación de contraste WCAG y una insignia de aprobado/reprobado para AA. Se muestra con color y texto, no solo con color.
Casos de uso
Definir colores de marca desde un HEX de logo
Pega el HEX principal de tu marca, elige Análogo o Complementario y obtén al instante candidatos para color de acento, fondo y texto que armonizan con tu logo.
Pegar directamente en CSS / Tailwind
Exporta como variables CSS (:root { --color-1: ... }) o bloque theme.extend.colors de Tailwind y pégalo directamente en tu código, sin conversión manual.
Verificar accesibilidad cromática
Usa las sugerencias de legibilidad de cada muestra para verificar que el texto cumple con WCAG AA (4.5:1 de contraste). Detecta colores problemáticos antes de construir.
Notas y consejos
- Los esquemas te dan un punto de partida armonioso, no un resultado garantizado. La paleta adecuada depende siempre del contexto, las proporciones y los tonos específicos que uses.
- El contraste es una guía: el cálculo WCAG es preciso, pero la legibilidad real también depende del tamaño y el peso de la fuente y los colores del entorno.
- Las paletas monocromáticas pueden parecer desaturadas en valores de luminosidad extremos; esto es normal. Mantener una saturación base moderadamente alta ayuda.
- Tus datos de color nunca se envían a un servidor. Compartir funciona codificando la paleta en la URL: solo lo que copias deliberadamente sale de tu dispositivo.
Preguntas frecuentes
- ¿Puedo generar una paleta de colores a partir de un código HEX?
- Sí. Escribe cualquier código HEX (con o sin #) en el campo Color base y la herramienta genera al instante una paleta armónica con el esquema seleccionado. También funcionan los nombres de color CSS como 'rebeccapurple'.
- ¿Qué esquemas de color puedo elegir?
- Seis: Complementario (+180°), Complementario dividido (+150°/+210°), Análogo (±30°), Triádico (+120°/+240°), Tetrádico (+90° cada uno) y Monocromático (un solo tono con luminosidad variable). Todos siguen la teoría del color estándar.
- ¿Puedo fijar un color y regenerar solo el resto?
- Sí. Haz clic en el candado de cualquier muestra para fijarla. Al pulsar Regenerar o la barra espaciadora solo se mezclan las ranuras desbloqueadas.
- ¿Puedo exportar a variables CSS, Tailwind o JSON?
- Sí. En la pestaña Exportar elige el formato: variables CSS (:root { --color-1: #...; }), configuración Tailwind (theme.extend.colors → palette: { 1: '#...', ... }) o JSON ({ "palette": ["#...", ...] }). Cada uno puede copiarse o descargarse.
- ¿Cuántos colores puede tener la paleta?
- De 3 a 8. Usa el control deslizante para elegir. Cuando el esquema tiene menos tonos clave que los solicitados, los espacios extra se rellenan con variaciones de luminosidad (tintes y sombras).
- ¿Puedo comprobar si el texto es legible sobre cada color?
- Sí. Cada muestra muestra el color de texto recomendado (blanco o negro), la relación de contraste WCAG y una etiqueta de aprobado/reprobado para AA, con texto, no solo con color.
- ¿Mis colores se envían a un servidor?
- No. Toda la generación de paleta, ajuste, cálculo de contraste y exportación ocurre enteramente en tu navegador. Tus colores nunca se suben ni se almacenan.