Conversor OKLCH e gerador de paletas
Converta entre OKLCH, hex, RGB e HSL e construa rampas que continuam perceptualmente uniformes porque luminosidade e croma ficam fixos enquanto o matiz gira. Cores fora do sRGB são mapeadas reduzindo croma, não recortando canais — a diferença é se o seu roxo continua roxo.
Por que a luminosidade no OKLCH significa alguma coisa
No HSL, mudar o matiz com a luminosidade fixa muda o quanto a cor parece clara: o amarelo a 50% parece muito mais claro que o azul a 50%, e por isso rampas em HSL ficam desiguais por mais cuidado que se tenha no espaçamento. O OKLab foi ajustado a dados perceptuais, então seu eixo de luminosidade acompanha o que o olho percebe. Fixe L e C, gire H, e cada amostra carrega o mesmo peso visual — é justamente por isso que se montam paletas aqui, e não no HSL.
O mapeamento de gamute é o que importa
Muitos valores OKLCH não têm equivalente em sRGB, e a solução ingênua é forçar cada canal de volta para dentro da faixa. Isso desloca o matiz de forma visível: um roxo vivo recortado canal a canal deriva para o azul. Reduzir croma mantendo luminosidade e matiz deixa a cor reconhecivelmente a mesma e tira só a saturação que a tela não podia mostrar. Esta página usa o algoritmo do CSS Color 4 — busca binária no croma, aceitando o resultado recortado assim que ele fica dentro de uma diferença quase imperceptível em relação à cor reduzida.
Conferido com uma referência
As conversões foram comparadas com uma implementação independente sobre uma grade de quatro mil cores: luminosidade e croma coincidem com diferença menor que um milionésimo, o matiz com menos de um décimo de milésimo de grau, e todo valor hex volta exatamente ao original. O mapeamento de gamut foi conferido do mesmo jeito contra quatrocentas e oitenta cores fora do gamut e, no pior caso, fica dentro de uma parte em 255. Quem lê OKLCH percebe uma matriz errada, então pareceu valer a pena dizer como isso foi verificado.
Usando a saída
As propriedades personalizadas são escritas em OKLCH com o hex ao lado, num comentário, porque é esse o par que você quer em revisão: o valor que o seu build publica e o valor que dá para colar em qualquer outra coisa. Todo navegador em uso hoje entende a sintaxe OKLCH; se você ainda suporta algum que não entende, o comentário é o seu fallback.
Perguntas frequentes
Por que o croma é limitado a 0,4?
Porque nada em sRGB chega perto. A cor mais saturada do sRGB é o azul, em torno de 0,313, e o controle vai além disso para você ver o que fica de fora e como volta mapeado.
Qual é a menor diferença perceptível aqui?
Um delta E de 0,02 em OKLab, que é o limite usado pelo CSS Color 4. Abaixo dele, recortar e reduzir croma são indistinguíveis, então o algoritmo fica com a cor recortada e mantém o croma extra.
Ele lida com P3 ou Rec2020?
Ainda não. Tudo aqui mira o sRGB, e é isso que os avisos de gamut significam. Gamuts mais amplos precisam dos próprios primários e de um segundo conjunto de matrizes.
Algo disso é enviado para algum lugar?
Não. As conversões acontecem nesta página.
Feito pela equipe GO AI. Calculadora de CSS clamp() · Verificador de contraste WCAG · Todas as ferramentas gratuitas