Conversor de Cores 🔒 Seus dados nunca saem do seu navegador.
HEX ↔ RGB ↔ HSL, com pré-visualização e seletor de cor.
Verificador de contraste
Um pequeno jabuti xereta viu dez cegonhas felizes.
Um pequeno jabuti xereta viu dez cegonhas felizes.
Tons e matizes
Selecione um passo para carregá-lo como cor atual.
Sobre esta ferramenta
Cole uma cor em qualquer formato CSS — hex (#1e90ff ou #19f), rgb(), hsl() ou uma cor nomeada como dodgerblue — e receba todos os formatos com cópia de um clique, mais uma amostra ao vivo. HEX é o que as ferramentas de design exportam, RGB é o que canvas e APIs JS pedem, e HSL é o que humanos conseguem raciocinar (matiz, saturação, luminosidade).
A conversão usa o próprio motor CSS do navegador: tudo que é válido numa stylesheet funciona aqui. 100% no cliente.
Perguntas frequentes
Meus dados de cor são enviados para algum lugar?
Não. Cada conversão, verificação de contraste e paleta é calculada localmente no seu navegador — nada do que você insere sai do seu dispositivo.
Qual é a diferença entre HSL e HSV?
Ambos descrevem matiz e saturação, mas o terceiro valor do HSL é a luminosidade (quão perto do preto ou do branco está), enquanto o do HSV é o valor (quão perto apenas do preto, mantendo o brilho máximo no topo). O HSV costuma corresponder aos seletores de cor de ferramentas de design; o HSL costuma seguir as convenções do CSS.
Por que meu código hexadecimal tem 8 dígitos em vez de 6?
O par extra codifica o alfa (transparência) como #rrggbbaa. Ele só aparece quando a cor de entrada tem um canal alfa menor que 1 — cores totalmente opacas permanecem com 6 dígitos.
O que significam os selos AA e AAA no verificador de contraste?
São os limiares de contraste da WCAG 2: AA é o mínimo que a maioria dos sites deveria atingir (4,5:1 para texto normal, 3:1 para texto grande ou componentes de UI), AAA é a meta mais rigorosa (7:1 / 4,5:1). Um selo verde significa que seu par de primeiro plano/fundo passa nesse nível.
O que é OKLCH e por que usá-lo em vez de HSL?
O OKLCH é um espaço de cor perceptualmente uniforme — passos iguais em luminosidade ou croma parecem igualmente diferentes para o olho humano, algo que o HSL não garante. Está cada vez mais em uso no CSS moderno para criar escalas de cor e gradientes sem manchas escuras ou turvas inesperadas.