Círculo cromático interativo no navegador
Use o gerador de harmonia de cores para transformar uma cor base em paleta complementar, análoga, triádica, complementar dividida ou tetrádica. Arraste o círculo, ajuste HSB, teste papéis visuais e copie CSS ou exporte um PNG identificado sem enviar dados.
Atualizado em 29 de julho de 2026
gerador de harmonia de cores
Este gerador de harmonia de cores coloca uma matiz base em um círculo de 360 graus e calcula matizes relacionados com deslocamentos explícitos. A complementar usa 180°, a análoga −40° e +40°, a triádica passos de 120°, a complementar dividida 150° e 210°, e a tetrádica passos de 90°. O gerador de harmonia de cores mantém saturação e brilho para que a primeira comparação isole a estrutura de matiz. Depois você pode copiar cada HEX, exportar variáveis CSS, salvar PNG ou enviar o primeiro par de primeiro plano e fundo ao verificador de contraste.
gerador de harmonia de cores
O gerador de harmonia de cores mostra regra, ângulos, valores e papéis previstos em vez de retornar apenas uma faixa de amostras sem nome.
gerador de harmonia de cores
Cada resultado do gerador de harmonia de cores fica marcado no mesmo círculo. Os pontos tornam visíveis os intervalos de 180°, 120°, 90° e a divisão complementar, explicando por que as cores pertencem ao mesmo sistema.
gerador de harmonia de cores
O gerador de harmonia de cores aplica o resultado a um cartão toon com superfície, cor focal, destaque e ação. É uma verificação rápida de hierarquia, não uma promessa de que toda cor gerada já esteja pronta para uso.
gerador de harmonia de cores
Copie uma cor, toda a paleta do gerador de harmonia de cores ou propriedades personalizadas CSS. O PNG identificado preserva regra e valores para revisão, moodboard ou entrega à implementação.
Círculo e paleta locais no navegador
Arraste o círculo ou edite HEX e HSB. O gerador de harmonia de cores recalcula imediatamente marcadores, amostras, papéis e exportações.
Uma base com vizinhas opostas em 150° e 210°
Verifique a hierarquia antes de levar estas cores ao desenho ou componente real.
:root {
--harmony-1: #E8335D; /* Base · 346° */
--harmony-2: #33E863; /* Apoio · 136° */
--harmony-3: #33B8E8; /* Destaque · 196° */
}A primeira amostra é enviada como primeiro plano e a última como fundo.
gerador de harmonia de cores
Um gerador de harmonia de cores se torna útil quando cada resultado do círculo leva a um papel deliberado, uma medição de contraste e um ajuste no contexto real.
gerador de harmonia de cores
Digite o HEX aprovado da marca, personagem ou interface em vez de estimar uma captura comprimida. O gerador de harmonia de cores mantém essa matiz como primeiro marcador e deriva todas as outras da mesma fonte.
gerador de harmonia de cores
Use complementar para separação forte, análoga para continuidade, triádica para três famílias equilibradas, complementar dividida para tensão controlada e tetrádica para um sistema amplo. O gerador de harmonia de cores identifica a regra exata durante a comparação.
gerador de harmonia de cores
Mantenha uma cor dominante e use as outras como apoio, destaque ou contraponto. Depois de escolher a estrutura no gerador de harmonia de cores, mude saturação e brilho para criar hierarquia em vez de dar o mesmo peso a todas as amostras.
gerador de harmonia de cores
Envie o provável par de texto e fundo do gerador de harmonia de cores ao verificador de contraste. Revise estados normal, hover, foco, seleção e desativação, pois a distância no círculo não prova legibilidade nem significado acessível.
gerador de harmonia de cores
O gerador de harmonia de cores usa deslocamentos fixos e reproduzíveis. A tabela descreve geometria, número inicial de cores, uso e risco antes de qualquer ajuste artístico.
| Regra | Deslocamentos | Bom ponto de partida | Cuidado |
|---|---|---|---|
| Complementar | 0°, 180° | Assunto focal contra ação ou alerta | Saturação igual pode gritar; escolha um lado dominante |
| Análoga | −40°, 0°, +40° | Cenas calmas, superfícies e detalhes relacionados | Matizes próximas podem exigir mais diferença de brilho |
| Triádica | 0°, 120°, 240° | Três papéis com ampla cobertura de matiz | Reduza uma ou duas cores para deixar uma protagonista |
| Complementar dividida | 0°, 150°, 210° | Uma base e dois destaques opostos menos diretos | Os destaques competem quando ocupam áreas grandes |
| Tetrádica | 0°, 90°, 180°, 270° | Sistemas, equipes, gráficos e interfaces complexas | Quatro cores fortes normalmente pedem grupos de valor |
gerador de harmonia de cores
Esta lista do gerador de harmonia de cores transforma um resultado bonito do círculo em uma paleta documentada e testável.
gerador de harmonia de cores
Este gerador de harmonia de cores separa geometria reproduzível de afirmações de acessibilidade. Os ângulos são explícitos e fontes W3C definem matiz digital e contraste.
O W3C declara diretamente o limite para texto normal:
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1
gerador de harmonia de cores
gerador de harmonia de cores
Comece com análoga para uma paleta contida ou complementar para um destaque claro. O gerador de harmonia de cores mantém a base fixa, então alternar as duas mostra a diferença. Em qualquer caso, deixe uma cor dominar e meça o par final.
O gerador de harmonia de cores calcula e mostra HSB porque Toon Tone trabalha com matiz, saturação e brilho. A matiz continua sendo um ângulo de 360 graus. Cada resultado HSB também vira HEX para uso no navegador e em ferramentas de design.
Não. Um gerador de harmonia de cores descreve relações de matiz, enquanto o contraste WCAG depende da luminância relativa de primeiro plano e fundo específicos. Meça fonte e estado reais e adicione pistas não cromáticas quando o significado depender de cor.
O monocromático muda brilho e saturação em torno de uma matiz em vez de posicionar famílias diferentes no círculo. Este gerador de harmonia de cores leva à ferramenta de tons com etapas, sombras toon, contraste, CSS e PNG.
Não. O gerador de harmonia de cores calcula ângulos e conversões na aba atual. Cópia e PNG são locais. A URL compartilhada contém o HEX base e o nome da regra, então compartilhe apenas valores que possam ser revelados.