Seletor de Cores OKLCH e Conversor

O que é OKLCH?

OKLCH é um espaço de cor criado por Björn Ottosson (2020) e adicionado ao CSS na especificação Color Level 4. Ele descreve uma cor com três valores intuitivos: Luminosidade (0–100%), Croma (o quanto a cor é viva, aproximadamente de 0 a 0,37 para cores de tela) e Hmatiz (um ângulo de 0 a 360°). Diferente do HSL, ele é perceptualmente uniforme: duas cores com o mesmo L realmente parecem igualmente claras para o olho humano.

Por que devs estão trocando o HSL

• Paletas previsíveis: no HSL, o amarelo com 50% de luminosidade parece muito mais claro que o azul com 50%. No OKLCH, mudar só o matiz mantém a luminosidade percebida, o que é ótimo para gerar estados de botões consistentes e escalas de design system (por isso o Tailwind CSS v4 entrega sua paleta em OKLCH).
• Cálculos de acessibilidade melhores: uma diferença fixa de luminosidade se traduz em uma diferença de contraste bastante consistente.
• Cores de gama ampla: o OKLCH consegue expressar cores Display P3 que HEX e rgb() não conseguem, então telas modernas podem exibir cores mais vibrantes.

Gamut e fallbacks

Nem toda combinação de L/C/H existe em uma tela sRGB. Quando a croma é alta demais, esta ferramenta mantém a luminosidade e o matiz e reduz a croma até a cor caber, e então entrega esse resultado como fallback HEX/RGB. No CSS, escreva o fallback primeiro e o valor OKLCH em seguida; navegadores que entendem OKLCH usam a segunda linha:

color: #e5484d;
color: oklch(63% 0.2 25);

OKLCH vs OKLab

OKLab é o mesmo espaço em coordenadas retangulares (L, a, b). Ele é ideal para misturas e gradientes — experimente o Misturador de Cores — enquanto o OKLCH é mais fácil para humanos editarem.

Também pesquisado como: seletor oklch, oklch para hex, hex para oklch, cor perceptual, seletor de cores oklch, gamut srgb, oklab, p3.

Ferramentas que combinam com: Conversor OKLCH

• Conversor de Cores — Cole qualquer cor CSS — HEX, rgb(), hsl(), hwb(), oklch() ou um nome como tomato — e veja todos os outros formatos na hora, além de uma paleta pronta de 50 a 950.
• Gerador de cores do Tailwind — Cole uma cor da marca e obtenha uma escala de tons equilibrada de 11 etapas (50 a 950) integrada ao OKLCH — com dicas de contraste e exportações para Tailwind v3, v4, CSS e SCSS.
• Conversor HEX para RGBA — Cole um código HEX, arraste o slider de opacidade e copie o CSS exato que você precisa: rgba() tradicional, rgb( / alpha) moderno ou HEX de 8 dígitos.
• Verificador de Contraste APCA — Calcule o contraste de luminosidade APCA (Lc) entre texto e fundo, veja para quais usos ele é indicado e compare com a razão clássica do WCAG 2.