Generador de Esquema de Color (Complementario / Triádico / Análogo)

Generador de Paletas de Colores

Genera paletas de colores armoniosas utilizando la teoría del color. Elige un color base y un tipo de armonía — complementario, tríadico, análogo, complementario dividido, tetrádico o monocromático — para crear al instante una paleta equilibrada. Las muestras visuales muestran los valores hexadecimales, RGB y HSL. La verificación de contraste WCAG garantiza la accesibilidad. Exporta como propiedades personalizadas de CSS, JSON, configuración de Tailwind o variables SCSS.

Cómo Usar

Introduce un color base usando el selector de color, la entrada hexadecimal, los deslizadores RGB o los valores HSL — todas las entradas se sincronizan automáticamente. Selecciona un tipo de armonía para generar una paleta de 3-6 colores basada en las matemáticas de la teoría del color. Cada color se muestra como una muestra visual con valores hexadecimales, RGB y HSL y un botón de copia. Comprueba las relaciones de contraste WCAG con texto blanco y negro. Exporta toda la paleta en tu formato preferido.

Características

• 6 Tipos de Armonía — Complementario (180°), Tríadico (120°), Análogo (30°), Complementario Dividido (150°/210°), Tetrádico/Cuadrado (90°) y Monocromático (variaciones de saturación/luminosidad).
• Múltiples Entradas de Color — Selector de color nativo, hexadecimal (#RRGGBB), deslizadores RGB y deslizadores HSL se sincronizan en tiempo real. Cambia cualquier entrada y las demás se actualizan instantáneamente.
• Visualización de Paleta — Muestras de color grandes con valores hexadecimales, RGB y HSL para cada color. Copia con un clic cualquier valor.
• Verificación de Contraste WCAG — Cada color de la paleta muestra la relación de contraste con texto blanco y negro con insignias de aprobado/fallado AA/AAA. Asegura que tus elecciones de color cumplen los estándares de accesibilidad.
• 4 Formatos de Exportación — Propiedades personalizadas de CSS (variables :root), objeto JSON, colores de configuración de Tailwind y variables SCSS. Copia todo el bloque de exportación con un clic.
• Actualizaciones en tiempo real — La paleta se regenera instantáneamente ante cualquier cambio de entrada. No se necesita botón de generar.
• Cálculos Basados en HSL — Todos los tipos de armonía utilizan la rotación de tono HSL matemáticamente correcta, produciendo resultados precisos según la teoría del color.

Tipos de Armonía de Color

Complementario: Dos colores opuestos en la rueda de color (separados 180°). Alto contraste, vibrante. Ideal para: elementos de llamada a la acción, diseños audaces.
Tríadico: Tres colores equidistantes (separados 120°). Equilibrado, colorido. Ideal para: ilustraciones, diseños lúdicos.
Análogo: Colores adyacentes en la rueda (separados 30°). Armonioso, sereno. Ideal para: temas de naturaleza, degradados, diseños cohesivos.
Complementario Dividido: Color base + dos colores adyacentes a su complementario (150°/210°). Fuerte contraste con menos tensión. Ideal para: principiantes, paletas versátiles.
Tetrádico/Cuadrado: Cuatro colores a intervalos de 90°. Rico, diverso. Ideal para: diseños complejos con muchos elementos.
Monocromático: Un solo tono con saturación y luminosidad variables. Elegante, unificado. Ideal para: diseños minimalistas, temas de marca única.