Gerador de Paletas de Cores & Harmonias

Gerador de Paletas de Cores & Harmonias

Gere esquemas e harmonias de paletas de cores instantaneamente. Crie paletas complementares, análogas, triádicas e meio-complementares com verificação de contraste WCAG em tempo real e exportação CSS.

Predefinições
Controles de Âncora e Harmonia
#0F172A
Modulação de Saturação0%
Temperatura de Cor0°
Motor Cromático Pronto
Delta E (ΔE) 0%Slots de Cor 5
Âncora Primária
#0F172A
RGB15, 23, 42
HSL222°, 47%, 11%
OKLCH0.208, 0.04, 266°
Luminosidade0.0088
Acorde Harmônico 1
#C0B8DB
RGB192, 184, 219
HSL254°, 33%, 79%
OKLCH0.8, 0.05, 296°
Luminosidade0.506
Acorde Harmônico 2
#D8B69F
RGB216, 182, 159
HSL24°, 42%, 74%
OKLCH0.8, 0.051, 56°
Luminosidade0.5056
Acorde Harmônico 3
#BCC29E
RGB188, 194, 158
HSL70°, 23%, 69%
OKLCH0.8, 0.049, 115°
Luminosidade0.5174
Acorde Harmônico 4
#A0C3DA
RGB160, 195, 218
HSL204°, 44%, 74%
OKLCH0.799, 0.05, 237°
Luminosidade0.5157
Contraste Médio WCAG4.43:1|Pontuação106
5 amostras
Regra AtivaSPLIT-COMPLEMENTARY
Contraste Médio4.43:1
Modelo de CorOKLCH (266°)
Status de SegurançaZero Servidor (100% Local)

Processamento no Cliente

Cálculo de alta performance executado inteiramente na memória do navegador.

Zero Envio ao Servidor

Todos os dados permanecem estritamente locais, sem qualquer comunicação externa.

Exportação Pronta para Produção

Formatos de saída limpos e otimizados, prontos para implantação imediata.

ToolsAA•Utilitários web 100% privados no cliente
Referência técnica e guia de arquitetura

Gerador de Paleta de Cores & Harmonias — Guia de referência

Gere esquemas de harmonia e paletas de cores instantaneamente. Crie paletas complementares, análogas, triádicas e complementares divididas com checagem de contraste WCAG em tempo real e exportação CSS.

Gerador de Paleta de Cores & Harmonias — Guia de referência — Arquitetura em memória do lado do cliente e fluxo de dados
Gerador de Paleta de Cores & Harmonias — Guia de referência — Arquitetura em memória do lado do cliente e fluxo de dados

Parâmetros-chave e controles

Ângulo de Matiz Base (θ)Ângulo Cromático CIE [0° – 360°]

Posição angular no círculo cromático contínuo de 360 graus CIE/Munsell que determina o comprimento de onda espectral primário (0° Vermelho, 60° Amarelo, 120° Verde, 180° Ciano, 240° Azul, 300° Magenta). Avaliado em tempo trigonométrico O(1) como a coordenada de origem para rotações harmônicas no runtime isolado V8 do navegador.

Padrão: 240° (Azul Royal)
Deslocamento Angular Geométrico (Δθ)Intervalo Trigonométrico de Corda

Deslocamento angular geométrico que estabelece topologias clássicas de harmonia: Complementar (180°), Triádica (120° / 240°), Análoga (±30° / ±60°), Complementar Dividida (150° / 210°) e Tetrádica (60° / 180° / 240°). Calculado em módulo 360° via rotação matemática pura, com zero dependências externas.

Padrão: 180° (Complementar)
Luminosidade Perceptual (L*)CIE L* / OKLCH L [0.00 – 1.00]

Escala de brilho perceptualmente uniforme de 0.0 (preto de absorção absoluta) a 1.0 (branco difuso puro). Previne picos perceptuais espúrios de luminosidade no amarelo/azul inerentes ao HSL puro, assegurando que cores com valores L idênticos compartilhem a mesma percepção humana de brilho em todas as matizes.

Padrão: 0.55
Croma / Saturação (C*)OKLCH Chroma [0.00 – 0.37] / Métrica de Pureza

Distância radial do eixo neutro acromático cinza em direção ao locus espectral. Altos valores de croma (>0.20 em OKLCH, >80% em sRGB) induzem fadiga ocular e cromoestereopsia; superfícies de UI acessíveis exigem croma moderado (<0.08), enquanto controles interativos miram em 0.12–0.18.

Padrão: 75% (0.18 OKLCH)
Luminância Relativa WCAG (Y)Razão Fotométrica Linearizada [0.00 – 1.00]

Brilho fotométrico linearizado calculado como Y = 0.2126R_lin + 0.7152G_lin + 0.0722B_lin segundo W3C WCAG 2.1 §1.4.3. Governa a razão de contraste (L1 + 0.05) / (L2 + 0.05), exigindo ≥4.5:1 para texto padrão (AA) e ≥7.0:1 para legibilidade aprimorada (AAA).

Padrão: 0.21
Motor de Transformação de Espaço de CorIEC 61966-2-1 sRGB ↔ OKLCH / Display-P3

Pipeline de transformação matricial no cliente que executa convoluções de matriz 3x3: expansão gama [0, 255] ➔ sRGB linear ➔ CIE XYZ (iluminante D65) ➔ espaço de cones LMS ➔ coordenadas polares OKLCH. Executa em complexidade de tempo determinística O(1) no isolamento de execução do navegador sem telemetria de servidor.

Padrão: OKLCH (W3C Color 4)

Dicas profissionais e melhores práticas

Derrote a Distorção Perceptual de Helmholtz-Kohlrausch

A matemática convencional do HSL trata o amarelo 100% saturado (L=50%) e o azul 100% saturado (L=50%) como tendo a mesma luminosidade, mas a resposta fotópica do olho humano percebe o amarelo como substancialmente mais brilhante. Sempre alterne para o espaço de cor perceptual OKLCH ao balancear a legibilidade do texto contra amostras de fundo; valores idênticos de L em OKLCH garantem brilho percebido uniforme ao longo de todos os 360 graus de matiz.

Evite Vibração Cromática com Pontes Neutras

Posicionar cores complementares de alta saturação (como vermelho puro #FF0000 e ciano puro #00FFFF) lado a lado dispara inibição lateral fisiológica, conflito de acomodação visual e fadiga ocular. Insira uma ponte neutra (um tom com Croma < 0.02 ou uma superfície escura com L < 0.20, assegurando uma diferença de luminância ΔY ≥ 0.30) entre pares complementares saturados.

Aplique a Regra de Distribuição 60-30-10 no Design

Nunca distribua as cores de uma paleta harmônica em proporções iguais. Aplique 60% da área visual à cor neutra/superfície dominante, 30% ao matiz estrutural secundário da marca e reserve os 10% restantes estritamente para a cor de ação/acento complementar (botões, badges, estados ativos).

Valide Conflitos de Daltonismo (CVD)

Aproximadamente 8% dos homens e 0,5% das mulheres apresentam deuteranopia ou protanopia. Paletas complementares de vermelho e verde colapsam em tons indistinguíveis de marrom-amarelado sob visão dicromática. Sempre assegure uma diferença mínima de luminância de 3.0:1 entre estados críticos de status, não dependendo apenas do matiz da cor, e reforce com tipografia ou ícones conforme a WCAG 2.1 SC 1.4.1.

Colete Entropia de Hardware da Web Crypto API para Paletas Exploratórias

O Math.random() padrão baseia-se em motores PRNG pseudoaleatórios suscetíveis à recuperação de estado e agrupamento modular em torno de quadrantes de matiz populares. Para gerar paletas exploratórias sem viés estatístico, extraia entropia de hardware via Web Crypto API usando window.crypto.getRandomValues(new Uint32Array(1)) / 4294967296 * 360, garantindo distribuição uniforme por todo o espectro CIE de 360°.

Armadilhas comuns e solução de problemas

⚠️A paleta complementar gerada falha no contraste WCAG AA contra fundos brancos ou escuros

Matizes complementares compartilham tensão cromática, não compatibilidade de luminância. Ajuste o controle deslizante de luminosidade perceptual (L*) da cor de destaque em primeiro plano para ≤0.35 para fundos brancos, ou para ≥0.75 para fundos escuros de carvão, atingindo a razão obrigatória de 4.5:1.

⚠️Etapas intermediárias de gradiente e cores análogas parecem opacas, sujas ou acinzentadas

A interpolação RGB linear corta diretamente o núcleo dessaturado do cilindro de cores. Alterne o espaço de cálculo do gerador de sRGB/HSL para OKLCH; isso curva a interpolação através de croma percebido constante e elimina zonas mortas acinzentadas.

⚠️As cores sofrem desvio ou corte ao exportar CSS para Display P3 de ampla gama ou imprimir em CMYK

Valores sintéticos de RGB com alto croma (como cianos e verdes neon) caem fora do triângulo sRGB ou da gama de impressão CMYK. Use a chave de blindagem contra clipping de gama (Gamut Clipping Armor) para fixar os valores no sRGB padrão [0, 255] ou visualize os tokens CSS equivalentes para ampla gama Display P3 com color(display-p3 r g b).

⚠️Paletas triádicas e tetrádicas parecem caóticas e visualmente sobrecarregadas em cards de UI

Saturação uniforme em 3 ou 4 matizes díspares gera pontos focais concorrentes. Mantenha apenas um matiz dominante em alta saturação (>70%) e deliberadamente dessature as harmonias secundárias e terciárias para 20-35% de croma para atuarem como tons de suporte.

Perguntas frequentes (FAQ)

Como calcular matematicamente harmonias de cores complementares, triádicas e análogas?▼

Harmonias de cores são calculadas convertendo valores sRGB em coordenadas polares (Matiz θ de 0° a 360°, Saturação, Luminosidade). A harmonia complementar soma 180° (θ + 180° mod 360°). A harmonia triádica rotaciona em incrementos de 120° (θ + 120°, θ + 240°). A harmonia análoga calcula matizes adjacentes em ±30° e ±60° (θ ± 30° mod 360°). A harmonia complementar dividida toma o matiz base θ e o combina com dois ângulos adjacentes ao seu complemento direto: θ + 150° e θ + 210°. Todas as transformações são executadas em complexidade de tempo computacional O(1).

Qual é a razão de contraste mínima da WCAG exigida para textos de botões e cores de fundo acessíveis?▼

Sob o nível AA da WCAG 2.1, textos de corpo padrão e rótulos de botões abaixo de 18pt regular (ou abaixo de 14pt negrito) exigem uma razão de contraste mínima de 4.5:1 contra o fundo. Textos grandes (≥18pt regular ou ≥14pt negrito) e componentes essenciais de interface gráfica (como bordas de botões, contornos de campos de formulário e indicadores de abas ativas) exigem razão mínima de 3.0:1. O nível AAA eleva a exigência para texto padrão para 7.0:1 e para texto grande para 4.5:1.

Qual é a diferença entre mistura de cores em HSL e harmonia de cores perceptual em OKLCH?▼

O HSL (Hue, Saturation, Lightness) é uma transformação cilíndrica simples do sRGB bruto que desconsidera a sensibilidade da retina humana, fazendo com que o amarelo (50% de luminosidade) pareça muito mais brilhante que o azul (50% de luminosidade). O OKLCH é baseado nos modelos de cor perceptual CIECAM02 e CAM16 desenvolvidos por Björn Ottosson; ele desacopla luminosidade percebida (L), croma (C) e matiz (h) de forma uniforme, garantindo que duas cores com valores L idênticos compartilhem exatamente o mesmo brilho percebido em todos os 360 graus do círculo de matizes.

Por que cores complementares parecem sujas ou vibram quando posicionadas lado a lado?▼

A vibração visual (cromoestereopsia) ocorre quando cores complementares de alta saturação com luminância idêntica disparam sinais conflitantes em cones adjacentes da retina sem contraste de luminância suficiente, fazendo com que a borda óptica pareça oscilar. A aparência acinzentada ou suja ocorre durante o alpha-blending linear em RGB porque os valores intermediários perdem croma percebido em direção ao centro escuro do cubo RGB. A solução requer adicionar uma diferença de luminância (ΔL ≥ 0.3) ou uma linha divisória neutra.

A geração de paletas de cores nesta ferramenta envia códigos hexadecimais de marcas privadas para servidores externos?▼

Não; todas as conversões matemáticas de espaço de cor (sRGB, CIE XYZ, OKLCH, Display-P3), fórmulas de contraste WCAG e simulações de daltonismo executam 100% no lado do cliente dentro da máquina virtual JavaScript V8 isolada do seu navegador. Nenhum código hex, valor de cor ou recurso de marca enviado trafega pela rede, assegurando telemetria zero no servidor, funcionamento offline completo e isolamento total de dados em conformidade com padrões de segurança corporativos.

Ferramentas e utilitários relacionados

Todas as ferramentas →
Gerador Glassmorphism CSS & Vidro FoscoDesign

Gere código CSS moderno de glassmorphism e vidro fosco com ajustes em tempo real de desfoque backdrop-filter, opacidade, borda e sombra. Copie HTML e CSS limpos.

Abrir ferramenta→
Comprimir Imagens & Reduzir FotosDesign

Comprima imagens online sem perda de qualidade. Reduza tamanhos de JPG, PNG e WebP direto no navegador, sem upload para servidores, com ajuste exato de KB e exportação em lote ZIP.

Abrir ferramenta→
Gerador Interativo de Gradientes CSS Lineares e RadiaisDesign

Todo processamento e conversão acontecem exclusivamente na memória do seu navegador sem envio para servidores.

Abrir ferramenta→
Gerador de Sombras CSS em Camadas (Box Shadow)Design

Crie sombras CSS multicamadas ultra-realistas com elevação óptica, relevo interno, dispersão e exportação rápida para Tailwind, CSS e React.

Abrir ferramenta→
Gerador de CSS Clip-Path de Polígonos e Máscaras VetoriaisDesign

Desenhe caminhos de recorte geométricos responsivos e máscaras vetoriais SVG com vértices interativos arrastáveis e CSS em tempo real.

Abrir ferramenta→
Gerador Interativo de Layout CSS GridDesign

Criador visual de CSS Grid bidimensional. Projete layouts responsivos com unidades fr, funções minmax(), espaçamentos e exporte CSS, Tailwind ou React JSX limpo.

Abrir ferramenta→