Tags Open Graph: Pareça com Profissionalidade nos Links no Slack 2

Abra qualquer base de código escrita por alguém que aprendeu CSS nas W3Schools em 2011 e você encontrará uma parede de #rrggbb valores. HEX está por toda parte — não porque seja a melhor forma para o trabalho, mas porque era a forma usada em todos os tutoriais e seletores de cores quando a maioria de nós começou a aprender CSS. Funciona ainda. Não vai desaparecer. Mas em 2026, usar HEX para tudo é como escrever JavaScript sem const porque você aprendeu em um post de blog de 2009.

Existem quatro formatos de cores que vale a pena conhecer: HEX, RGB, HSL e OKLCH. Cada um é a escolha certa em situações específicas — e errada em outras. Aqui está quando usar qual.

HEX (#rrggbb / #rrggbbaa)

O HEX codifica a cor como pares de dígitos hexadecimais: dois para vermelho, dois para verde, dois para azul. #ff5733 traduz para rgb(255, 87, 51) — um vermelho-alaranjado. Sem um seletores de cores aberto, você não consegue ler esse valor; você só precisa saber.

Existe uma abreviação: #f53 expande para #ff5533. Funciona apenas quando os dígitos em cada par são iguais. A transparência é o quarto par: #ff5733cc — onde cc é o canal alfa. Isso é aproximadamente 80% de opacidade para quem está contando em casa (0xCC / 0xFF ≈ 0.8). Totalmente válido, completamente ilegível.

Quando o HEX faz sentido

• Tokens de design provenientes de Figma ou Sketch. Os designers exportam HEX. Você cola HEX. Esse é o fluxo de trabalho. Não o impeça.
• Em qualquer lugar em que o valor seja estático e os ferramentas visuais o controlam. Se um seletores de cores do VS Code ou DevTools do navegador estiverem produzindo o valor, HEX está bem.
• Integrações de terceiros que apenas aceitam entrada em HEX.

Quando o HEX é a escolha errada

• Modificação de cores programaticamente — você não pode fazer cálculos razoáveis sobre #ff5733
• Expressar relações de tons — não há uma maneira intuitiva de derivar uma versão mais clara ou mais escura
• Construir um sistema de design com tokens semânticos

RGB / RGBA

RGB especifica os mesmos canais vermelho, verde, azul em números decimais simples. rgb(255, 87, 51) é o mesmo vermelho-alaranjado que #ff5733, mas os valores dos canais são números humanamente legíveis. A sintaxe moderna do CSS Color Level 4 elimina as vírgulas: rgb(255 87 51). A transparência é expressa com um traço: rgb(255 87 51 / 50%). O antigo rgba(255, 87, 51, 0.5) ainda funciona — os navegadores não a eliminaram e não a eliminarão.

Quando o RGB faz sentido

• Manipulação de cores em JavaScript. Quando você precisa ajustar a brilhância misturando com branco: você pode fazer cálculos diretamente nos valores dos canais.
• Canvas e WebGL. As APIs trabalham com inteiros de 0 a 255 ou floats de 0 a 1. O RGB mapeia diretamente ao que o pipeline de pixel espera.
• Quando você obtém valores dos canais a partir de um sensor de hardware ou de uma biblioteca de imagens e você não precisa converter.

Quando o RGB é a escolha errada

• Projeto de esquemas de cores — não há um modelo mental visual para o que pequenas alterações RGB parecem
• Temas de modo escuro — você precisaria recalcular todos os três canais para mudar a luminância

HSL (Tom / Saturação / Brilho)

O HSL é o primeiro formato de cor que mapeia como as pessoas pensam sobre cores. O tom é um ângulo no roda de cores (0–360°), a saturação controla a intensidade da cor (0% = cinza, 100% = puro) e o brilho controla a intensidade (0% = preto, 100% = branco). hsl(14 100% 60%) é o mesmo vermelho-alaranjado.

A vantagem prática: se você quiser uma versão mais escura de uma cor, reduza o valor de brilho. Uma versão mais suave? Reduza a saturação. Você pode derivar um conjunto completo de tons a partir de um único valor de tom. É por isso que os sistemas de propriedades personalizadas do CSS baseados em HSL são tão comuns:

:root {
  --brand-hue: 14;
  --brand-saturation: 100%;

  --brand-400: hsl(var(--brand-hue) var(--brand-saturation) 70%);
  --brand-500: hsl(var(--brand-hue) var(--brand-saturation) 60%);
  --brand-600: hsl(var(--brand-hue) var(--brand-saturation) 50%);
  --brand-700: hsl(var(--brand-hue) var(--brand-saturation) 40%);
}

A transparência funciona da mesma forma que os outros: hsl(14 100% 60% / 50%).

Existe uma limitação real com o HSL: sua escala de brilho não é perceptualmente uniforme. Duas cores com o mesmo valor de L podem parecer muito diferentes em brilho — tente hsl(60 100% 50%) (amarelo) e hsl(240 100% 50%) (azul) lado a lado. O amarelo parece muito mais brilhante, mesmo que tenham o mesmo L=50%. Isso importa para o design acessível e especialmente para gradientes.

Quando o HSL faz sentido

• Sistemas de cores e tokens de design. O padrão de paleta de único tom acima é ergonômico e legível.
• Temas de modo escuro. Mude os valores de L, mantenha tudo o resto. Funciona de forma limpa.
• Tons e tons em propriedades personalizadas do CSS — o uso para o qual foi projetado.

OKLCH — O Substituto Moderno

O OKLCH é o que o HSL deveria ter sido. Descreve a cor em três valores: Brilho (0–1), Croma (como a saturação, aproximadamente 0–0.4) e Tom (0–360°). oklch(0.65 0.18 28) é aproximadamente o mesmo vermelho-alaranjado.

A diferença chave em relação ao HSL é a uniformidade perceptual. No OKLCH, duas cores com o mesmo valor de L realmente parecem igualmente brilhantes aos olhos humanos. O amarelo em L=0.65 e o azul em L=0.65 parecerão ter a mesma luminância — diferente do HSL, onde o amarelo domina. Isso importa de duas formas específicas:

• Design acessível. Quando você calcula os ratios de contraste com base nos valores de L, eles refletem o que os usuários realmente percebem — e não apenas o que a matemática diz.
• Gradientes. Um gradiente HSL de azul para amarelo passa por uma faixa de cinza sujo no meio. O mesmo gradiente no OKLCH permanece vivo em todo o tempo porque os passos intermediários mantêm a luminância percebida constante.

Suporte nos navegadores em 2023: todos os navegadores modernos (Chrome 111+, Firefox 113+, Safari 15.4+). Sem suporte para IE11 — e ninguém que está lançando novos códigos em 2026 está alvo para IE11.

O Tailwind v4 moveu toda sua paleta de cores para OKLCH. Isso não é um detalhe de implementação pequeno — é um sinal vindo do framework mais amplamente usado do CSS que essa é a direção certa para sistemas de cores.

Se você estiver construindo ou experimentando gradientes com HSL ou OKLCH, o Gerador de Gradiente CSS no IO Tools suporta diretamente ambos os formatos — útil para ver a diferença na qualidade dos gradientes lado a lado.

Quando o OKLCH faz sentido

• Sistemas de design novos construídos do zero. Se você estiver definindo seus tokens de cores hoje, o OKLCH oferece uniformidade perceptual que o HSL não oferece.
• Interfaces com muitos gradientes. A diferença na qualidade do gradiente é visível e significativa.
• Paletas de cores acessíveis onde você precisa de ratios de contraste para refletir a percepção visual real.

A mesma cor em todos os quatro formatos

Aqui está rgb(255, 87, 51) — um vermelho-alaranjado quente — expresso em todos os formatos, com variações de 50% de transparência:

Formatar	Cor Sólida	50% Transparente
HEX	#ff5733	#ff573380
RGB	rgb(255 87 51)	rgb(255 87 51 / 50%)
HSL	hsl(14 100% 60%)	hsl(14 100% 60% / 50%)
OKLCH	oklch(0.65 0.18 28)	oklch(0.65 0.18 28 / 50%)

Observe qual você gostaria de editar manualmente se precisasse tornar a cor 20% mais escura. HEX: você abriria um seletores de cores. RGB: você faria cálculos em três valores. HSL: alteraria o valor de L de 60% para 40%. OKLCH: alteraria o valor de L de 0.65 para 0.45. As versões HSL e OKLCH expressam diretamente a intenção.

O caminho prático de migração

Não vá refatorar seus valores HEX existentes. Eles funcionam, não estão quebrados e o retorno sobre o investimento dessa mudança é essencialmente zero. Deixe-os.

Para novos projetos, aplique estas regras:

• Cores estáticas de um designer ou ferramenta de design → HEX. Cole o que Figma fornece. Nenhuma conversão necessária.
• Cores que você manipula em JavaScript ou passa para canvas/WebGL → RGB. Os cálculos baseados em canais se alinham diretamente.
• Novas propriedades personalizadas do CSS e tokens de design → HSL ou OKLCH. Você quer a capacidade de derivar tons e tons sem recalcular três valores separados.
• Novo sistema de design do zero, ou trabalho com muitos gradientes → OKLCH. A uniformidade perceptual vale a pequena curva de aprendizado para os valores de Croma.

Um padrão concreto para propriedades personalizadas do CSS em um novo projeto:

:root {
  /* Define the base in OKLCH */
  --brand: oklch(0.65 0.18 28);

  /* Derive tonal variants by adjusting L */
  --brand-light: oklch(0.78 0.14 28);
  --brand-dark:  oklch(0.48 0.20 28);
  --brand-muted: oklch(0.65 0.08 28);

  /* Transparency with the slash syntax */
  --brand-ghost: oklch(0.65 0.18 28 / 15%);
}

Isso é legível, editável sem ferramentas e produz gradientes melhores do que a abordagem equivalente em HSL.

O Resultado Final

O HEX não está errado — é apenas especializado. Está otimizado para valores que você obtém de ferramentas visuais e cola no código, e não para valores que você pensa ou modifica. O RGB é útil quando você precisa interagir com APIs de JavaScript ou canvas. O HSL ainda é uma escolha sólida para tokens de design se você estiver trabalhando em um código existente que o usa. O OKLCH é onde você quer chegar para novos sistemas de design.

A barreira para adotar HSL ou OKLCH é menor do que parece. Você não precisa migrar nada — basta começar a usá-los para o próximo conjunto de tokens que você escrever. O Seletor de Cores no IO Tools mostra qualquer cor em todos os quatro formatos simultaneamente, o que é uma referência útil quando você está convertendo valores HEX existentes para HSL ou OKLCH em um novo token.

Você também pode gostar