Gerador de Paleta de Cores

Gerador de paleta de cores e esquema de cores para desenvolvedores

Use este gerador de paleta de cores para transformar uma cor base opaca em um conjunto determinístico para interfaces, sites, painéis e sistemas de design. A mesma ferramenta funciona como um gerador de paleta de cores ou de esquema de cores, com sugestões de cores de primeiro plano copiáveis e uma saída pronta para desenvolvedores, em vez de um quadro de inspiração puramente decorativo.

Como criar uma paleta de cores

1. Insira uma cor base opaca em HEX, RGB ou HSL, ou escolha uma com o controle de cor nativo.
2. Escolha uma harmonia e gere uma paleta de 3, 5, 6, 10 ou 12 cores.
3. Inspecione as cores de texto sugeridas e a pré-visualização do componente, depois copie ou baixe o CSS, valores compatíveis com Tailwind ou tokens de design.

Harmonia monocromática, análoga, complementar, dividida e triádica

A harmonia de cores define as relações de matiz iniciais. A monocromática mantém um matiz, a análoga rotaciona 30 graus em cada direção, a complementar usa o matiz oposto, a complementar dividida usa rotações de 150 e 210 graus, e a triádica usa 120 e 240 graus. Cores neutras podem anular essas rotações porque alterar o matiz de uma cor com saturação zero não cria um valor HEX diferente.

Um gerador para paletas de 3, 5, 6, 10 e 12 cores

O seletor de tamanho cria paletas compactas de 3 cores, conjuntos comuns de paletas de 5 ou 6 cores e sistemas maiores de 10 ou 12 cores, sem gerar páginas separadas. Cada tamanho é um prefixo estável da mesma sequência determinística de doze cores, portanto, aumentar o tamanho mantém as cores que você já revisou.

Tons e sombras determinísticos para esquemas de cores de sites

Após as âncoras de harmonia, o gerador de matizes e sombras mistura cada âncora em direção ao branco e ao preto em etapas sRGB delimitadas. Isso oferece suporte a paletas de cores para sites, esquemas de cores da web, esquemas de cores de temas de sites e paletas de cores para painéis, sem alegar uma escala perceptualmente uniforme.

Variáveis CSS, valores de paleta do Tailwind e tokens de design

Copie propriedades personalizadas CSS, um objeto de cor compatível com o Tailwind ou tokens JSON no estilo DTCG. Cada exportação inclui a cor da paleta e sua cor de texto preta ou branca selecionada, tornando o resultado útil como uma paleta de cores CSS, gerador de cores do Tailwind, paleta de cores do Tailwind ou um gerador focado de tokens de design.

Visualizar uma paleta de cores para site ou painel

A cena de componentes atribui as cores geradas a funções ilustrativas de superfície, texto, borda, ação primária, ação secundária e status. É uma prévia rápida de implementação para uma paleta de cores de site, e não uma prova de que todo componente real, estado de interação, ícone, gráfico, gradiente ou combinação de cores adjacentes atenda aos requisitos de acessibilidade.

Orientação de cores de texto acessíveis e limitações claras

Para cada amostra de cor opaca, a ferramenta compara preto e branco e recomenda aquele que tiver a maior taxa de contraste de precisão total. Ela exibe a taxa e o resultado WCAG AA para texto normal. Esta é apenas uma orientação para o primeiro plano: o gerador não testa todos os pares da paleta, significado semântico, contraste de elementos não textuais, estados de foco ou a distinção de cores para daltônicos, portanto, não é um verificador de paleta para daltônicos. Verifique qualquer par de texto no verificador de contraste de cores e refine uma única amostra de cor no seletor de cores.

Geração de paleta privada e salvamento explícito

A geração, as prévias, os cálculos de contraste e as exportações acontecem neste navegador. Nada é salvo até que você escolha Salvar, e um instantâneo detectado nunca é aplicado sem a opção Restaurar. Cores exatas, paletas, taxas, arquivos gerados, estado salvo e valores de consulta de compartilhamento são excluídos do analytics.

Perguntas frequentes

Como crio uma paleta de cores a partir de uma única cor?

Insira uma cor base opaca, selecione uma harmonia e um tamanho, e gere a paleta. Você também pode escolher qualquer amostra de cor resultante como a próxima base e continuar refinando o esquema.

Qual harmonia de cores devo usar?

A monocromática permanece mais próxima de um único matiz, a análoga cria matizes próximos, a complementar cria um par oposto, a complementar-dividida amplia esse par, e a tríade distribui três âncoras ao redor do círculo cromático. A melhor escolha depende das funções e do conteúdo na interface real.

As tonalidades e sombras são perceptualmente uniformes?

Não. Elas são misturas sRGB determinísticas e limitadas em direção ao branco e ao preto. O gerador não alega espaçamento OKLCH ou uniformidade perceptual.

As cores de texto sugeridas são acessíveis?

A sugestão de preto ou branco exibida é a escolha de maior contraste para aquela amostra de cor individual e inclui seu resultado AA para texto normal. Você ainda precisa testar a tipografia real, os estados dos componentes, as bordas, os ícones e as combinações renderizadas.

Isso cria uma paleta de cores amigável para daltônicos?

Não por si só. Esta versão não simula deficiências de visão de cores nem testa se cada cor da paleta permanece distinguível. Use o esquema gerado como ponto de partida e verifique-o com simulação dedicada e testes de interface reais.

Minha paleta é enviada ou salva automaticamente?

Não. A geração permanece local, nada é gravado no armazenamento antes de você escolher Salvar, e o estado de compartilhamento aparece em um link somente depois que você o copia explicitamente.