oklch() / oklab() colors

Baseline 2023 (Chrome 111, Safari 15.4, Firefox 113); amplamente disponível.

Chrome 111Edge 111Safari 15.4Firefox 113

Espaços de cor perceptualmente uniformes: passos iguais de luminosidade parecem iguais, e o matiz fica constante enquanto você muda o croma. Paletas construídas em oklch são consistentes entre matizes e alcançam cores de gama ampla P3.

CSS

.fx-007 {
  display: flex;
  gap: 6px
}
.fx-007 span {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: oklch(var(--l) .17 250)
}
.fx-007 span:nth-child(1) {
  --l: .95
}
.fx-007 span:nth-child(2) {
  --l: .8
}
.fx-007 span:nth-child(3) {
  --l: .65
}
.fx-007 span:nth-child(4) {
  --l: .5
}
.fx-007 span:nth-child(5) {
  --l: .35
}

HTML

<div class="fx-007"><span></span><span></span><span></span><span></span><span></span></div>

Fallback: Forneça um hex sRGB antes da declaração oklch() para navegadores muito antigos; todos os evergreen suportam.

Fonte: developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch

Prompt

Defina o sistema de cores em oklch: `oklch(L C H)` com luminosidade de 0 a 1, croma por volta de 0.1-0.2 para cores de UI, e um matiz por cor semântica. Construa escalas tonais variando só L (ex.: .95, .85, .75 ...) mantendo C e H fixos para todos os passos parecerem uniformemente espaçados. Prefira oklch a hsl em qualquer paleta gerada.