Gerador de Esquema de Cores (Complementar / Triádico / Análogo)

Gerador de Esquemas de Cores

Gere paletas de cores harmoniosas usando a teoria das cores. Escolha uma cor base e um tipo de harmonia — complementar, triádica, análoga, complementar dividida, tetrádica ou monocromática — para criar instantaneamente uma paleta equilibrada. Amostras visuais mostram valores hexadecimais, RGB e HSL. A verificação de contraste WCAG garante a acessibilidade. Exporte como propriedades personalizadas CSS, JSON, configuração Tailwind ou variáveis SCSS.

Como usar

Insira uma cor base usando o seletor de cores, entrada hexadecimal, controles deslizantes RGB ou valores HSL — todas as entradas são sincronizadas automaticamente. Selecione um tipo de harmonia para gerar uma paleta de 3-6 cores com base na matemática da teoria das cores. Cada cor é exibida como uma amostra visual com valores hexadecimais, RGB e HSL e um botão de cópia. Verifique as proporções de contraste WCAG em relação a texto branco e preto. Exporte toda a paleta no formato de sua preferência.

Características

• 6 Tipos de Harmonia — Complementares (180°), Triádicas (120°), Análogas (30°), Complementares Divididas (150°/210°), Tetrádicas/Quadradas (90°) e Monocromáticas (variações de saturação/luminosidade).
• Múltiplas Entradas de Cor — Seletor de cores nativo, hexadecimal (#RRGGBB), controles deslizantes RGB e controles deslizantes HSL sincronizam em tempo real. Altere qualquer entrada e todas as outras são atualizadas instantaneamente.
• Exibição Visual da Paleta — Grandes amostras de cores com valores hexadecimais, RGB e HSL para cada cor. Cópia com um clique em qualquer valor.
• Verificação de Contraste WCAG — Cada cor da paleta mostra a proporção de contraste em relação a texto branco e preto com selos de aprovação/reprovação AA/AAA. Garante que suas escolhas de cores atendam aos padrões de acessibilidade.
• 4 Formatos de Exportação — Propriedades personalizadas CSS (variáveis :root), objeto JSON, cores de configuração Tailwind e variáveis SCSS. Copie todo o bloco de exportação com um clique.
• Atualizações em Tempo Real — A paleta é regenerada instantaneamente em qualquer alteração de entrada. Não é necessário botão de gerar.
• Cálculos Baseados em HSL — Todos os tipos de harmonia usam rotação de matiz HSL matematicamente correta, produzindo resultados precisos de acordo com a teoria das cores.

Tipos de Harmonia de Cores

Complementares: Duas cores opostas na roda de cores (a 180° de distância). Alto contraste, vibrantes. Ideal para: elementos de chamada para ação, designs ousados.
Triádicas: Três cores igualmente espaçadas (a 120° de distância). Equilibradas, coloridas. Ideal para: ilustrações, designs lúdicos.
Análogas: Cores adjacentes na roda (a 30° de distância). Harmoniosas, serenas. Ideal para: temas da natureza, gradientes, designs coesos.
Complementares Divididas: Cor base + duas cores adjacentes à sua complementar (150°/210°). Contraste forte com menos tensão. Ideal para: iniciantes, paletas versáteis.
Tétradicas/Quadradas: Quatro cores em intervalos de 90°. Ricas, diversas. Ideal para: designs complexos com muitos elementos.
Monocromáticas: Matiz único com saturação e luminosidade variáveis. Elegantes, unificadas. Ideal para: designs minimalistas, temas de marca única.