Conversor de cores HEX, RGB e HSL
Digite uma cor em qualquer um dos três formatos e os outros dois se atualizam na hora. A paleta abaixo dá tons claros e escuros para montar uma escala, e o painel de contraste diz se o texto vai ficar mesmo legível sobre essa cor.
Tons claros e escuros
Contraste
Qual formato usar em cada caso
HEX é o compacto — seis caracteres, entendido em todo lugar, e é o que as ferramentas de design entregam. Serve bem para guardar uma cor de marca fixa. Onde ele falha é na hora de editar: nada em #6D5EFC diz o que vai acontecer se você quiser a mesma cor um pouco mais escura.
RGB é a mesma informação em decimal. A vantagem real dele é rgba(), que acrescenta um canal alfa para transparência — embora o CSS moderno deixe você escrever #6D5EFC80 para a mesma coisa.
HSL é o que vale a pena usar quando você monta um design system. Matiz, saturação e luminosidade correspondem à forma como as pessoas de fato descrevem cor, e isso faz com que uma paleta inteira possa ser derivada à mão: mantenha matiz e saturação fixos, percorra a luminosidade e você tem uma escala consistente. É exatamente assim que os tons claros e escuros acima são gerados.
Por que a luminosidade do HSL mente um pouco
Duas cores com a mesma luminosidade HSL raramente parecem igualmente claras. O amarelo puro a 50% de luminosidade parece visivelmente mais claro que o azul puro a 50% de luminosidade, porque a visão humana é muito mais sensível ao verde do que ao azul. O HSL trata todos os matizes como se o olho respondesse a todos da mesma forma, e não é o caso.
É isso que o OKLCH corrige. É um espaço de cor mais novo do CSS, construído sobre um modelo da percepção humana, então valores iguais de luminosidade realmente parecem igualmente claros em todos os matizes. Se você está montando uma paleta do zero hoje e só precisa dar suporte aos navegadores atuais, o OKLCH vai dar resultados mais uniformes com menos correção manual. O HSL continua sendo a escolha pragmática para compatibilidade ampla.
Como ler os números de contraste
A razão de contraste vai de 1:1 (cores idênticas) a 21:1 (preto sobre branco). Os limites de acessibilidade do WCAG são:
- 4.5:1 — o mínimo AA para o texto normal. Trate isso como o piso de qualquer coisa que você publicar.
- 3:1 — AA para o texto grande, ou seja, 24px ou mais, ou 19px ou mais quando está em negrito. Também é o mínimo para componentes de interface e indicadores de foco.
- 7:1 — AAA para o texto normal. Vale a pena mirar nisso em leituras longas, e ajuda de verdade quem tem baixa visão.
Duas coisas que a razão não te diz. Primeiro, ela não diz nada sobre daltonismo — um texto vermelho e um verde podem ter contraste excelente contra o fundo e ainda assim ser indistinguíveis entre si. Nunca use apenas o matiz para transmitir significado. Segundo, passar do limite é um piso, não uma meta: um texto exatamente em 4.5:1 está dentro da regra e continua cansativo de ler.
Perguntas frequentes
Como converto HEX para RGB à mão?
Divida os seis dígitos em três pares e leia cada um como um número na base 16. #6D5EFC dá 6D = 109, 5E = 94, FC = 252, ou seja, rgb(109, 94, 252). A ferramenta acima faz isso na hora, mas a conta é realmente simples assim.
Posso colar um hex abreviado de 3 dígitos?
Pode. #F0C é expandido para #FF00CC automaticamente, do mesmo jeito que os navegadores fazem. A forma abreviada só funciona quando cada par tem dois dígitos iguais, e é por isso que nem toda cor tem uma.
Qual razão de contraste eu preciso para passar nas verificações de acessibilidade?
No mínimo 4.5:1 para o texto normal e 3:1 para o texto grande (24px, ou 19px em negrito) para atender ao WCAG AA, que é o nível citado pela maioria das exigências legais de acessibilidade. O AAA pede 7:1 no texto normal.
Devo usar HSL ou OKLCH?
OKLCH se você só precisa dos navegadores atuais e está montando uma paleta do zero: valores iguais de luminosidade realmente parecem igualmente claros em todos os matizes, o que o HSL não consegue garantir. HSL se você precisa de suporte a navegadores antigos ou está editando uma paleta que já existe.
Por que os tons claros e escuros parecem irregulares?
Porque eles são gerados percorrendo a luminosidade do HSL, e a luminosidade do HSL não corresponde ao brilho percebido. Os passos são matematicamente uniformes, mas visualmente um pouco irregulares perto dos amarelos e dos azuis. Ajustar alguns passos a olho é prática normal.
Última atualização 19 de setembro de 2026