oklch()

HTML / CSS 🟡 Mid

Definition

Espace colorimétrique perceptuellement uniforme basé sur la luminosité (L), la chrominance (C) et la teinte (H). Modifier une dimension ne change pas la perception des autres, contrairement à HSL.

Analogie

Comme un nuancier professionnel où chaque crayon a exactement la même luminosité perçue, contrairement à HSL.

Exemple de code

:root {
  --primary: oklch(0.6 0.2 250);   /* bleu */
  --success: oklch(0.6 0.2 145);   /* vert, même luminosité */
  --danger:  oklch(0.6 0.2 25);    /* rouge, même luminosité */
}

Cas d'usage

Construire une palette de couleurs harmonieuse avec une luminosité perçue constante entre teintes.

#interview