Ferramentas grátis de cor e design — seletores, paletas, contraste, gradientes
Trabalho prático de cor para a web: seletor de cor com HEX/RGB/HSL, geradores de paleta e gradiente, verificador de contraste WCAG para manter texto legível, simulação de daltonismo e ferramentas de sombra CSS. Feito para designers e desenvolvedores front-end que precisam do valor exato e da escolha acessível, pronto para copiar-colar.
Conversor de Cores (HEX, RGB, HSL — instantâneo)
Converta cores entre HEX, RGB e HSL com uma amostra de prévia ao vivo. Edite qualquer campo e os outros são atualizados.
Verificador de Contraste (níveis WCAG AA / AAA)
Verifique a proporção de contraste de cores entre texto e fundo. Mostra prévia ao vivo e selos de aprovação/reprovação para WCAG AA e AAA em tamanhos de texto normal e grande.
Gerador de Gradiente CSS (linear, radial, cônico)
Crie gradientes CSS visualmente: linear, radial e cônico. Múltiplas paradas de cor, controle de ângulo, presets. Copie o CSS pronto para usar.
Gerador de Paleta de Cores (5 esquemas a partir de uma cor base)
Gere paletas de cores harmoniosas a partir de uma cor base: complementar, análoga, triádica, tetrádica, monocromática. Clique em qualquer amostra para copiar o hex.
Simulador de Daltonismo — Veja as Cores como Outros Veem
Digite qualquer cor hexadecimal e veja instantaneamente como ela aparece para pessoas com deuteranopia, protanopia, tritanopia e acromatopsia. Essencial para design acessível.
Gerador de CSS Box Shadow (com prévia ao vivo)
Crie valores CSS box-shadow visualmente. Ajuste offset, blur, spread, cor, opacidade e inset. Prévia ao vivo, CSS pronto para copiar.
Localizador de nomes de cores CSS — Cor nomeada mais próxima do hex
Insira qualquer cor em hex para encontrar o nome CSS mais próximo. Veja as 5 cores nomeadas mais próximas com seus valores hex exatos e pontuação de distância.
Gerador de Tons de Cor — Estilo Tailwind CSS
Gere 11 tons e sombras (50–950) para qualquer cor, no estilo da escala Tailwind CSS. Clique em qualquer tom para copiar o código hex ou exporte todos como propriedades personalizadas CSS.