OKLCH vs HSL
Os dois formatos descrevem cores com matiz e mais dois valores. A diferença é que o OKLCH é baseado em como as pessoas enxergam a cor, e o HSL não é.
O problema da luminosidade no HSL
Defina amarelo e azul com a mesma luminosidade no HSL, e o amarelo vai parecer bem mais claro:
color: hsl(60 100% 50%); /* bright yellow */
color: hsl(240 100% 50%); /* dark blue */No OKLCH, a luminosidade corresponde muito mais ao que você vê. Cores com o mesmo valor parecem igualmente claras, então as paletas ficam mais fáceis de equilibrar.
Lado a lado
| HSL | OKLCH | |
|---|---|---|
| Luminosidade | Varia conforme o matiz | Corresponde de perto ao que as pessoas veem |
| Faixa de cores | Somente sRGB | Inclui espaços de cor mais amplos |
| Suporte em navegadores | Universal | Todos os navegadores modernos |
| Fácil de ler | Familiar | Exige um pouco de aprendizado |
Quando usar cada um
- Use OKLCH para sistemas de design, tons gerados e cores vibrantes em telas modernas.
- Use HSL para cores rápidas e pontuais, ou quando for preciso dar suporte a navegadores muito antigos.
Pronto para trocar? Converta uma cor com o Conversor HEX para OKLCH e depois siga nosso guia sobre como usar OKLCH no CSS.
Ferramentas usadas neste guia
Conversor OKLCHEscolha cores em OKLCH com luminosidade, croma e matiz e converta para HEX, RGB, HSL e OKLab.Conversor HEX para OKLCHConverta qualquer cor HEX para OKLCH em CSS moderno.Conversor de CoresConversor de cores online grátis: converta HEX em RGB, HSL, HWB, OKLCH, CMYK e nomes de cores CSS e gere uma paleta de tons de 50 a 950 em variáveis CSS.
Perguntas frequentes
O OKLCH é melhor que o HSL?
Para criar paletas, geralmente sim, porque a luminosidade dele é mais consistente. O HSL ainda funciona bem em casos simples.
Qual é a diferença entre LCH e OKLCH?
Os dois descrevem cores do mesmo jeito, mas o OKLCH usa um modelo mais novo que mantém os matizes mais estáveis quando a luminosidade muda.
