Conversor de Cor
Converta cores entre formatos HEX, RGB e HSL instantaneamente. Visualizacao de cor, verificador de contraste WCAG e paleta gerada. Todo o processamento ocorre localmente no seu navegador.
🔒 Todo o processamento ocorre localmente no seu navegador.
Como usar este conversor de cor
- Digite uma cor em qualquer formato — HEX, RGB ou HSL — e todos os outros formatos sao atualizados instantaneamente.
- Use o seletor de cor (o quadrado abaixo da visualizacao) para selecionar visualmente qualquer cor.
- A visualizacao de contraste mostra como sua cor fica sobre fundo branco e preto, com proporcoes de contraste WCAG.
- Clique em qualquer amostra na paleta gerada para usar essa cor como base.
- Copie qualquer formato com um clique.
Sobre formatos de cor
HEX, RGB e HSL sao tres formas diferentes de representar a mesma cor. Codigos HEX sao compactos e amplamente usados em CSS e HTML. RGB nomeia explicitamente os canais vermelho, verde e azul. HSL e o mais intuitivo — aumentar a luminosidade clareara a cor.
A proporcao de contraste WCAG e critica para a acessibilidade web. O texto deve ser legivel sobre seu fundo. Esta ferramenta calcula a proporcao de contraste contra fundos brancos e pretos.
O gerador de paleta produz variacoes de cor baseadas na cor selecionada: variacoes mais claras e mais escuras, mais e menos saturadas, cores complementares e analogas.
Perguntas frequentes
O que e um codigo de cor HEX? ▼
Um codigo de cor HEX e uma representacao hexadecimal de cores RGB usada em design web. Comeca com # seguido de 6 caracteres (ou 3 para abreviacao), como #3B82F6. Cada par representa a intensidade de Vermelho, Verde e Azul. Codigos HEX sao a forma mais comum de especificar cores em CSS e HTML.
O que e cor RGB? ▼
RGB (Vermelho, Verde, Azul) e um modelo de cor aditivo onde cada cor e definida pela intensidade da luz vermelha, verde e azul. Os valores vao de 0 (nenhuma) a 255 (intensidade maxima). rgb(59, 130, 246) representa o mesmo azul que #3B82F6.
O que e cor HSL? ▼
HSL (Matiz, Saturacao, Luminosidade) e um modelo de cor mais intuitivo. Matiz e o angulo no circulo cromatico (0-360 graus), Saturacao e a intensidade da cor (0-100%), e Luminosidade e o brilho (0-100%). HSL facilita encontrar tons e sombras de uma cor.
O que e a proporcao de contraste WCAG? ▼
A proporcao de contraste WCAG mede quao distinguivel e o texto do seu fundo, de 1:1 a 21:1. WCAG 2.1 exige um minimo de 4.5:1 para texto normal. Esta ferramenta mostra a proporcao de contraste contra fundos brancos e pretos.
Como funciona o gerador de paleta? ▼
A paleta gera variacoes de cor baseadas na cor selecionada: variacoes mais claras e mais escuras, mais e menos saturadas, cores complementares e analogas. Clique em qualquer amostra para usar essa cor.
Meus dados de cor sao enviados a um servidor? ▼
Nao. Toda a conversao de cor, calculo de contraste e geracao de paleta ocorrem instantaneamente no seu navegador. Nenhum dado e enviado ou armazenado.
Qual e a diferenca entre HEX e RGB? ▼
Ambos representam a mesma cor mas em formatos diferentes. HEX usa notacao base-16. RGB usa numeros decimais (0-255) para cada canal. #FF5500 e o mesmo que rgb(255, 85, 0).