Cores e acessibilidade
Parta de um HEX, compare regras de harmonia e confira o contraste do texto branco em cada amostra.
Tudo é calculado nesta aba do navegador; as cores não são enviadas.
5 de 5 cores visíveis
A cor principal da marca já existe, mas faltam cores para fundos, estados e destaques. Um gerador de paleta de cores ajuda a manter essa base enquanto você compara combinações análogas, complementares e triádicas. Diferentemente de um sorteio, o esquema de cores sai de regras definidas no círculo cromático; isso não transforma uma escolha estética em verdade matemática.
Neste gerador de paleta de cores também há uma escala de nove tons claros e escuros, a mistura proporcional de dois HEX e o contraste de cores com texto branco. Quem procura um gerador de paletas de cores pode escolher os candidatos que passam no filtro AA e levar exatamente as amostras visíveis, a escala e a mistura para o CSS.
Harmonia de matizes e leitura de texto são decisões diferentes.
O mesmo HEX pode produzir vizinhas análogas, a oposta complementar ou três pontos de uma tríade. O gerador de paleta de cores mantém a base que você escolheu em vez de trocar a cor da marca por um valor aleatório. Os nove tons continuam derivados dela.
Cada amostra mostra a razão calculada para texto branco. Ao ligar o filtro de 4,5:1, as cores que falham para texto comum saem da paleta visível e do CSS exportado. Duas cores complementares podem ter grande diferença de matiz e ainda assim oferecer contraste insuficiente para letras.
Digite três ou seis dígitos HEX ou use o seletor de cor do navegador. O exemplo parte de #3B82F6 e se atualiza após uma pausa curta. Para alterar várias opções antes de calcular, desligue a geração automática e use Ctrl ou Cmd mais Enter.
A regra análoga vem selecionada como ponto inicial mais discreto. Complementar, tríade e outras regras mudam ângulos e às vezes a quantidade de amostras. A mistura usa uma segunda cor, começa em 50% e pode variar conforme o modelo RGB ou HSL.
Olhe a razão do texto branco e a quantidade de cores visíveis antes e depois de ativar AA. O filtro pode deixar zero candidatos sem alterar a cor original. Copie um HEX ou exporte paleta visível, nove tons e mistura como variáveis CSS.
Análoga, complementar, triádica, complementar dividida, tetrádica e monocromática partem da mesma cor base. O desenho no círculo cromático muda, mas a cor inserida continua igual.
Quatro misturas rumo ao branco, a base exata e quatro rumo ao preto ajudam a testar fundos, bordas, estados de interação e texto. Esta escala usa mistura digital RGB; não promete uniformidade perceptiva.
Informe a segunda cor e escolha de 0 a 100%. RGB interpola canais; HSL percorre o arco mais curto do matiz. O resultado é HEX para tela, não uma previsão para tinta ou pigmento.
A luminância relativa dos valores sRGB finais gera a razão de contraste. O filtro esconde amostras abaixo de 4,5:1 para texto comum; ao desligá-lo você continua vendo as opções rejeitadas.
Copie ou baixe um bloco :root com as cores visíveis, todos os nove tons e a mistura. Uma amostra escondida pelo filtro não volta sem aviso na exportação.
Escolha uma cor base em HEX e uma regra de harmonia; a paleta aparece com os códigos de cada amostra. As mudanças são automáticas por padrão, mas você pode desligar essa opção e gerar manualmente.
A complementar usa o lado oposto do círculo, a análoga usa cores vizinhas e a tríade usa três posições espaçadas. Essas relações sugerem matizes; não garantem contraste suficiente para letras.
Comece com análoga para uma combinação mais próxima, complementar para um acento forte ou triádica para maior variedade. Depois confira as amostras no contexto real e o contraste do texto branco.
A cor inserida permanece no centro da regra escolhida; as demais são derivadas de posições definidas no círculo cromático. A escala de nove tons e a mistura com a segunda cor são cálculos separados.
Cada amostra exibe seu HEX e pode ser copiada. Para levar o conjunto ao projeto, copie ou baixe o bloco de variáveis CSS. O filtro AA limita quais cores principais aparecem nesse bloco.
Faltou alguma resposta sobre cores?
O gerador de paleta de cores reúne regra, contraste do branco e variáveis CSS para você usar os valores que realmente escolheu.