Conversor de OKLCH e construtor de paletas
Converta entre OKLCH, hex, RGB e HSL e construa rampas que continuam perceptivamente parelhas 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: amarelo a 50% lê muito mais claro que 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 o eixo de luminosidade acompanha o que o olho relata. Fixe L e C, gire H, e cada amostra carrega o mesmo peso visual — é toda a razão para montar paletas aqui em vez de no HSL.
O mapeamento de gamute é o que importa
Muitos valores OKLCH não têm equivalente em sRGB, e o conserto ingênuo é espremer cada canal de volta para a 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 batem até a milionésima, o matiz até o décimo de milésimo de grau, e todo valor hex volta exato. O mapeamento de gamute foi conferido do mesmo jeito contra quatrocentas e oitenta cores fora do gamute e, no pior caso, fica dentro de uma parte em 255. Quem lê OKLCH percebe uma matriz errada, então pareceu justo dizer como 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 para em 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.
O que é aqui uma diferença quase imperceptível?
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, que é o que os avisos de gamute significam. Gamutes mais amplos precisam dos próprios primários e de um segundo conjunto de matrizes.
Alguma coisa disto é enviada para algum lugar?
Não. As conversões acontecem nesta página.
Feito pela equipe GO AI. Calculadora de CSS clamp() · Todas as ferramentas gratuitas