#6D5EFC, rgb(109, 94, 252) e hsl(245, 96%, 68%) são a mesma cor. Seu navegador trata as três de forma idêntica. A escolha se resume a uma coisa: com qual delas um humano consegue trabalhar.
HEX: serve para guardar, é inútil para editar
Seis dígitos hexadecimais: dois para o vermelho, dois para o verde, dois para o azul, cada par de 00 a FF. Compacto, entendido em todo lugar e o que qualquer ferramenta de design te entrega.
A fraqueza dele é ser opaco. Olhe para #6D5EFC e tente responder: "como seria essa cor 20% mais escura?". Você não consegue, não sem antes convertê-la para outra coisa. O formato codifica a cor com perfeição e não te conta nada sobre ela.
Duas coisas que vale a pena saber: o atalho de três dígitos (#F0C = #FF00CC) só funciona quando cada par tem dois dígitos idênticos, e o CSS moderno aceita oito dígitos em que os dois últimos são o alpha — #6D5EFC80 é a mesma cor com 50% de opacidade.
RGB: os mesmos números em base dez
A mesma informação, em decimal no lugar de hexadecimal. Um pouco mais fácil de ler, um pouco mais longo de escrever e igualmente inútil quando você quer uma variação.
A vantagem histórica dele era o rgba() para transparência, mas o hexadecimal de oito dígitos e a sintaxe moderna rgb(109 94 252 / 50%) tornaram isso irrelevante. Use quando uma ferramenta ou uma linguagem te der uma cor como três números e você não quiser converter.
HSL: com esse dá para raciocinar de verdade
Três valores que correspondem ao jeito como as pessoas descrevem cor:
- Matiz, de 0 a 360° em volta de uma roda de cores. 0 é vermelho, 120 verde, 240 azul.
- Saturação, de 0 a 100%. 0 é cinza, 100 é o mais vivo que a cor chega a ser.
- Luminosidade, de 0 a 100%. 0 é preto, 100 é branco, 50 é a cor "pura".
A recompensa é que as variações viram aritmética. Quer um estado hover? Baixe a luminosidade em 8 pontos. Uma versão desabilitada? Corte a saturação. Uma escala tonal inteira para um design system? Mantenha o matiz e a saturação fixos e percorra a luminosidade de 95 até 10. É exatamente assim que a paleta do conversor de cores é gerada: entra uma cor, saem nove passos consistentes, todos com o mesmo matiz.
Tente fazer isso com hexadecimal e você vai ficar convertendo de ida e volta a cada passo.
Onde o HSL mente para você
Aqui está a pegadinha, e ela é real. Duas cores com a mesma luminosidade HSL raramente parecem igualmente brilhantes.
Amarelo com 50% de luminosidade é ofuscante. Azul com 50% de luminosidade é escuro. O mesmo número, um brilho percebido completamente diferente: a visão humana dá muito peso ao verde e quase nenhum ao azul, e a luminosidade do HSL é um simples ponto médio geométrico que não sabe nada disso.
A consequência prática: uma escala tonal gerada percorrendo a luminosidade do HSL sai desigual. Os passos são matematicamente regulares e visualmente desiguais, e você acaba corrigindo os amarelos e os azuis na mão. Todo design system construído sobre HSL tem esse problema e o resolve com ajustes manuais.
OKLCH, que resolve isso
OKLCH é um espaço de cor do CSS mais recente, construído sobre um modelo da percepção humana em vez de sobre a geometria do RGB. As mesmas três ideias — luminosidade, croma, matiz — mas aqui luminosidade significa luminosidade percebida. Valores iguais realmente parecem igualmente brilhantes em qualquer matiz.
Isso faz as escalas tonais saírem uniformes sem nenhuma correção manual, que é de longe a maior vantagem prática. Ele também alcança cores fora do gamut sRGB, então consegue expressar as cores mais vivas que as telas modernas mostram e que o hexadecimal simplesmente não consegue codificar.
Quando usar: ao montar uma paleta do zero, mirando navegadores atuais e disposto a abrir mão da familiaridade. Quando não: quando você precisa de suporte amplo em navegadores antigos, está editando uma paleta existente baseada em hexadecimal, ou seu time pensa em hexadecimal e o custo da conversão não compensa. O HSL continua sendo o meio-termo pragmático para a maioria dos projetos.
O que fazer na prática
- Guarde as cores da marca em hexadecimal. Compacto, sem ambiguidade e o que todo mundo espera.
- Construa as variações em HSL (ou OKLCH, se der). Ajustar um número ganha de converter três.
- Defina os dois como custom properties do CSS e referencie os tokens, para que trocar uma cor seja uma edição e não quarenta.
- Confira o contraste depois de cada mudança, porque mexer alguns pontos na luminosidade é exatamente o que faz um par passar de aprovado para reprovado.
Esse último item não é opcional se alguém vai ler o texto. Ajustar uma cor até ela parecer certa e publicar assim é como a web acabou cheia de texto cinza-claro que ninguém consegue ler.
O conversor de cores faz a ida e a volta nos dois sentidos: você digita um hexadecimal e recebe RGB e HSL, edita qualquer um dos três e os outros acompanham. Ele também gera a escala de luminosidade de nove passos descrita acima e mostra a razão de contraste de cada passo, então dá para ver exatamente em que ponto da escala o seu texto deixa de ser legível.
E é justamente isso que você precisa conferir antes de publicar qualquer coisa disso: de qual razão de contraste um texto legível precisa cobre os quatro limites que importam e a definição de "texto grande" que a maioria entende errado, em silêncio e a seu próprio favor.
Perguntas frequentes
Devo usar HEX, RGB ou HSL no CSS?
Guarde as cores fixas em hexadecimal, porque é compacto e universal. Use HSL quando estiver derivando variações — estados hover, estados desabilitados, escalas tonais — porque ajustar um número é muito mais fácil do que converter três.
Como converter HEX para RGB na mão?
Divida os seis dígitos em três pares e leia cada um em base 16. #6D5EFC dá 6D = 109, 5E = 94, FC = 252, ou seja, rgb(109, 94, 252).
Por que minhas cores HSL parecem desiguais com a mesma luminosidade?
Porque a luminosidade do HSL é geométrica, não perceptual. A visão humana dá muito peso ao verde e quase nenhum ao azul, então amarelo com 50% de luminosidade parece bem mais brilhante do que azul com 50%. O OKLCH resolve isso modelando a luminosidade percebida.
OKLCH é melhor que HSL?
Para montar uma paleta do zero em navegadores atuais, sim: valores iguais de luminosidade realmente parecem igualmente brilhantes, então as escalas tonais saem uniformes sem correção manual. O HSL continua sendo a escolha pragmática para suporte a navegadores antigos ou para uma paleta em hexadecimal que já existe.
O que é o hexadecimal de 8 dígitos?
Hexadecimal com dois dígitos a mais para o alpha. #6D5EFC80 é a mesma cor com aproximadamente 50% de opacidade. Todo navegador atual suporta isso, o que remove quase todo o antigo motivo para recorrer ao rgba().
Última atualização 19 de setembro de 2026