Seletor de Cor OKLCH
Escolha cores em OKLCH com sliders de luminosidade, croma e matiz, verifique o gamut sRGB e obtenha fallbacks em HEX e rgb(). Funciona totalmente no seu navegador: nada é enviado a nenhum servidor.
CSS com fallback
color: #2563eb; color: oklch(54.6% 0.215 262.9);
O que é OKLCH?
OKLCH é uma forma de descrever cores por luminosidade (L), croma (C, o quanto é colorida) e matiz (H, o ângulo no círculo cromático), construída sobre o espaço de cor OKLab para que mudanças iguais pareçam igualmente diferentes. Ao contrário do HSL, duas cores com o mesmo L realmente parecem igualmente claras, o que facilita muito raciocinar sobre paletas, estados de hover e contraste acessível. O CSS o suporta como oklch(), e ele pode descrever cores além da faixa sRGB da maioria das telas. Este seletor permite ajustar L, C e H com sliders, avisa quando uma cor fica fora do sRGB e dá fallbacks em HEX e rgb().
Exemplos
Usando cores OKLCH em CSS e em código:
/* older browsers keep the HEX line */
.button {
background: #2563eb;
background: oklch(54.6% 0.215 262.9);
}/* same lightness, different hue: an even, predictable palette */
--blue: oklch(65% 0.15 250);
--green: oklch(65% 0.15 150);
--orange: oklch(65% 0.15 60);@supports (color: oklch(0% 0 0)) {
:root { --accent: oklch(70% 0.25 150); }
}// OKLCH to OKLab, the first step of converting to sRGB
const a = c * Math.cos((h * Math.PI) / 180);
const b = c * Math.sin((h * Math.PI) / 180);Casos de uso
Montar paletas consistentes
Mantenha fixas a luminosidade e o croma e mude só o matiz para obter cores que parecem igualmente brilhantes, algo que o HSL não faz de forma confiável.
Estados de hover e pressionado
Baixe alguns pontos de L para um estado mais escuro sem o matiz se deslocar, o que acontece com frequência ao escurecer em HSL.
Cores de gamut amplo
Crie cores intensas para telas P3 em oklch() e entregue um HEX de fallback seguro para telas e navegadores que não conseguem exibi-las.
Migrar um código para CSS moderno
Converta os valores HEX existentes para oklch() um por um e mantenha o original como linha de fallback.