Cor Com A Letra L

Entendendo as cores com a letra L no CSS

A maioria dos desenvolvedores que chega agora em tipografia ou design sistemas conhece apenas rgb() e rgba(). O problema é que essas funções limitam bastante quando você precisa de escalas de cor, transparência refinada ou quando precisa ajustar o brilho sem bagunçar a saturação. As cores que usam a letra L como primeiro parâmetro existem justamente para resolver isso. O mais conhecido é o hsl, que significa Hue, Saturation, Lightness. É basicamente uma maneira mais intuitiva de falar de cor do que tentar decorar valores RGB. Você pensa em tom primeiro, depois o quanto essa cor é vivida, e por fim quão clara ou escura ela fica. Parece óbvio, mas muita gente ainda não usa porque acha que é "menos profissional" que hex.

Por que escolher uma cor com a letra l

O hsl e suas variantes modernas (hwb, lab, lch, oklch) oferecem controle que rgb simplesmente não consegue dar. Com hsl(210, 60%, 50%) você sabe exatamente o que está criando. Com rgb(33, 110, 183) você tá adivinhando. Isso faz diferença quando você precisa criar uma paleta inteira consistente para um design system. O lab e o lch são ainda mais poderosos. Eles trabalham em um espaço de cor perceptualmente uniforme, o que significa que se você mudar o parâmetro L de 30 para 70, a cor vai clarear de forma uniforme e previsível. Em hsl, subir o lightness pode fazer a cor parecer que mudou mais rápido em alguns tons do que em outros. O oklch resolve até problemas do lab original, que tinha hue shifting em altas luminâncias.

Na prática, eu costumo começar com oklch para definir a base da paleta. O fluxo é: escolho o tom (angle), defino a saturação (chroma) e então gero variações apenas manipulando o L. Isso gera escalas de cinza colorido que realmente parecem consistentes visualmente. Funciona bem porque o olho humano percebe diferenças de luz de forma mais linear nesse espaço.

Como usar na prática

A sintaxe básica do hsl é simples: hsl(hue, saturation%, lightness%)

Onde hue é um ângulo de 0 a 360 graus (0 é vermelho, 120 é verde, 240 é azul), saturation é uma porcentagem de 0 a 100, e lightness também é porcentagem de 0 a 100. Zero lightness é preto, 100 é branco, 50 é o tom puro. Para oklch, a sintaxe é diferente:

oklch(L C H / alpha) L vai de 0 a 1 (não é porcentagem), C é o chroma que varia dependendo do tom, e H é o ângulo em graus. O alpha é opcional e funciona igual ao do rgba.

Aqui vai um exemplo real de como eu construo uma paleta. Começo com o tom base: --primary: oklch(0.65 0.25 250);

Depois as variações de escala só mudando o L: --primary-light: oklch(0.85 0.15 250);
--primary-dark: oklch(0.40 0.22 250);

Isso garante que todas as variações mantenham o mesmo carácter cromático. Com hsl, o mesmo exercício pode produar resultados onde a versão escura parece mais saturada do que a clara, só por causa de como o espaço de cor funciona.

O problema que eu encontrei (e como resolvi)

Eu estava trabalhando em um projeto onde precisávamos de tons de azul que funcionassem bem tanto em fundo branco quanto em fundo escuro. Usei oklch para gerar a paleta, e tudo parecia certo no editor de cores. Mas quando aplicamos em um tema dark mode, alguns dos azuis mais saturados ficaram praticamente invisíveis contra fundos escuros, mesmo com o L ajustado corretamente. A solução foi baixar o chroma em cerca de 20 a 30% para os tons usados em fundos escuros. O oklch permite isso facilmente — basta ajustar o C mantendo o L e o H. Não é intuitivo no início porque você tende a pensar só no L, mas o chroma influencia diretamente a visibilidade em fundos contrastantes. Agora eu sempre faço o teste de legibilidade em ambos os modos antes de considerar uma cor pronta.

Pegadinhas e limitações

O suporte do navegador para oklch é bom hoje em dia, mas se você ainda precisa sustentar IE11 ou Safari muito antigo, não vai funcionar. Nesses casos, o hsl é mais seguro, ainda que menos preciso. O lab também tem suporte razoável, mas ainda é menos amplamente adotado que oklch em navegadores modernos. Outro problema real: ferramentas de design visual. A maioria dos designers que eu conheço ainda trabalha com hex e rgb no Figma e Sketch. Passar para oklch no código pode criar um atrito porque o valor que você vê no Figma não corresponde diretamente ao que você escreve no CSS. Eu resolvi isso mantendo os valores hex como fallback no mesmo arquivo, usando @supports ou simplemente documentando a equivalência em uma tabela de referência interna.

Tem ainda o caso do chroma máximo variar por tom. Um verde pode ter um chroma máximo de 0.3 no oklch, mas um vermelho chega a 0.28. Isso significa que você não consegue simplesmente dizer "quero todos os tons com chroma 0.25" e esperar que todos sejam igualmente vibrantes. O verde vai parecer mais vivo que o vermelho. É uma limitação real do espaço de cor, não um bug. Se você precisa de saturação visual consistente entre tons diferentes, o oklch sozinho não resolve. Um recurso útil que muita gente ignora é o color-mix(). Ele permite misturar duas cores em qualquer espaço, incluindo oklch. Isso é prático para gerar variações automaticamente sem precisar calcular manualmente cada tonalidade.

Em resumo, usar cor com a letra l no CSS é uma mudança de mentalidade. Você deixa de pensar em RGB e começa a pensar em como o olho humano realmente vê cor. O aprendizado inicial é maior, mas o controle que você ganha compensa, especialmente em projetos onde consistência visual importa mais do que velocidade de prototipagem.