Simulador de daltonismo
Veja fundo e texto ou um mock de interface como em tipos comuns de visão com alteração de cores. Ideal antes de validar no teste de contraste.
Abrir simuladorEscolha uma ferramenta
Cada página funciona no navegador, sem cadastro. Use junto da tabela de cores, do teste de contraste e das paletas sugeridas.
Gerador de harmonia
A partir de um hexadecimal, gere esquemas complementar, análogo, tríade e tétade com amostras para copiar.
Abrir geradorConversor de cor
Converta entre hex, RGB e HSL. Inclui valores OKLCH com explicação breve para CSS moderno.
Abrir conversorMistura de cores
Combine duas cores com controle de proporcao e gere um resultado pronto para usar em elementos, botões e destaques.
Abrir misturadorOpacidade de cor
Transforme um hexadecimal em RGBA e HEXA com alpha para overlays, sombras e fundos transparentes.
Abrir opacidadeInversor de cores
Descubra a versao invertida de qualquer cor para testes de estado, contraste visual e exploracao de alternativas.
Abrir inversorGradiente CSS
Monte um linear-gradient com vários pontos de cor, ângulo e copie o código para o seu CSS.
Abrir gradientePaleta a partir de imagem
Envie uma imagem e obtenha cores dominantes em hexadecimal para inspirar o seu projeto.
Abrir extratorTexto legível no fundo
Escolha a cor de fundo e receba uma sugestão automática de cor de texto que respeita WCAG AA.
Abrir ferramentaEscala tonal
Gere tons de 50 a 900 a partir de uma cor base para criar tokens de design system e interfaces consistentes.
Abrir escalaMatriz de contraste da paleta
Cole várias cores e veja a matriz completa de contraste com indicação de pares que passam ou falham em AA.
Abrir matrizNome CSS mais próximo
Descubra o nome CSS oficial mais próximo do seu hexadecimal para facilitar protótipos e documentação rápida.
Abrir ferramentaComparar paletas
Duas paletas lado a lado: contraste entre pares, diversidade de tons e equilibrio claro e escuro.
Abrir comparadorGerador de tema claro e escuro
Gere tokens primary, surface, texto e borda para modo claro e escuro a partir de uma cor base.
Abrir geradorChecklist de acessibilidade
Alertas objetivos sobre texto, icones grandes e foco com base em relacoes de contraste da paleta.
Abrir checklistSimulador de componentes
Preview de botao, card, barra e formulario com as cores escolhidas e exportacao JSON, CSS, Tailwind e Figma na mesma pagina.
Abrir simuladorHistorico local
Veja e gerencie os ultimos testes salvos no navegador, sem login e sem enviar dados ao servidor.
Abrir historico