Ferramentas de cores para web

Gere paletas, valide contraste, simule acessibilidade e transforme cores em tokens prontos para HTML, CSS e frontend.

Comece pela tarefa mais comum

Cada ferramenta funciona direto no navegador, sem cadastro. Use junto da tabela de cores, das paletas sugeridas e dos guias editoriais para decidir, testar e copiar.

18 ferramentas publicadas

Todas as ferramentas de cor

Ferramenta

Simulador de daltonismo

Veja fundo e texto ou um mock de interface como em tipos comuns de visao com alteracao de cores.

Ferramenta

Gerador de harmonia

Gere esquemas complementar, analogo, triade e tetade a partir de um hexadecimal.

Ferramenta

Teste de contraste WCAG

Compare texto e fundo para validar legibilidade e criterios WCAG em interfaces.

Ferramenta

Conversor de cor

Converta entre hex, RGB, HSL e valores uteis para CSS moderno.

Ferramenta

Mistura de cores

Combine duas cores com controle de proporcao e copie o resultado.

Ferramenta

Opacidade de cor

Transforme um hexadecimal em RGBA e HEXA com alpha.

Ferramenta

Inversor de cores

Descubra a versao invertida de qualquer cor para testes visuais.

Ferramenta

Gradiente CSS

Monte um linear-gradient com varios pontos de cor, angulo e codigo CSS.

Ferramenta

Paleta a partir de imagem

Envie uma imagem e extraia cores dominantes em hexadecimal.

Ferramenta

Texto legivel no fundo

Escolha uma cor de fundo e receba uma sugestao de texto com contraste seguro.

Ferramenta

Escala tonal

Gere tons de 50 a 900 para tokens de design system.

Ferramenta

Matriz de contraste da paleta

Cole varias cores e veja a matriz completa de contraste WCAG.

Ferramenta

Nome CSS mais proximo

Compare seu hexadecimal com nomes CSS comuns e veja o mais proximo.

Ferramenta

Comparar paletas

Compare duas paletas lado a lado por contraste, tons e equilibrio.

Ferramenta

Gerador de tema claro e escuro

Gere tokens primary, surface, texto e borda para modos claro e escuro.

Ferramenta

Checklist de acessibilidade

Receba alertas objetivos sobre texto, icones e foco com base no contraste da paleta.

Ferramenta

Simulador de componentes

Preveja botao, card, barra e formulario com exportacao JSON, CSS, Tailwind e Figma.

Ferramenta

Historico local

Veja e gerencie os ultimos testes salvos no navegador, sem login.

Proxima area Dev Tools Formatadores, validadores e conversores para desenvolvimento. Proxima area Estudos Calculadoras, treino e reforco para conteudos objetivos. Conteudo Guias editoriais Leia contexto antes de aplicar cores em interfaces.