oklch() / oklab() colors

Baseline 2023 (Chrome 111, Safari 15.4, Firefox 113); disponible de forma generalizada.

Chrome 111Edge 111Safari 15.4Firefox 113

Espacios de color perceptualmente uniformes: pasos iguales de luminosidad se ven iguales, y el tono se mantiene constante mientras cambias el croma. Las paletas construidas en oklch son consistentes entre tonos y pueden alcanzar colores de gama amplia 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: Proporciona un hex sRGB antes de la declaración oklch() para navegadores muy antiguos; todos los evergreen lo soportan.

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

Prompt

Define el sistema de color en oklch: `oklch(L C H)` con luminosidad de 0 a 1, croma en torno a 0.1-0.2 para colores de interfaz y un tono por color semántico. Construye escalas tonales variando solo L (p. ej. .95, .85, .75 ...) mientras C y H se mantienen fijos, para que todos los pasos se vean equidistantes. Prefiere oklch a hsl para cualquier paleta generada.