Savez-vous vraiment ce qu'est la couleur ?

Découvrez la science derrière les pixels 🎨

Julien Sulpis LyonJS #100 21/02/2025

C'est quoi la couleur ?

rgb(255, 255, 255)

1 C'est quoi la couleur ?

λ (nm)
https://blog.ophtalmique.ch/2021/03/04/cones-batonnets/
Bâtonnets Cônes
380 480 580 680 780 λ(nm)
+ =
380 480 580 680 780 λ(nm)
380 480 580 680 780 λ(nm)

La couleur est la perception visuelle de l'aspect d'une surface ou d'une lumière, basée sur la répartition spectrale de la lumière, qui stimule des cellules nerveuses situées sur la rétine nommées cônes.

Wikipédia

À quoi ça sert ?

2 Comment représenter la couleur ?

1920's

Charlie Chaplin

Charlie Chaplin
Charlot mangeant sa chaussure dans La Ruée vers l'or (1925)

1920's

Cinéma sonore

Un cadreur et un preneur de son

1920's

Cinéma en couleurs

Couleurs par le procédé Keller-Dorian Berthon

1920's

William David Wright
John Guild
580nm 1.00x 700nm + 1.00x 546.1nm + 1.00x 435.8nm

CIE 1931 RGB

R G B
580nm 0.238 0.129 0.000
620nm 0.285 0.017 0.000
mix 0.142 0.175 0.184
blanc + rouge 0.137 0.102 0.110
bleu + vert - 🤔0.029 0.168 0.182

🎅 Une nouvelle notation...

  • Pas de valeurs négatives !
  • Une des coordonnées doit représenter la luminosité perçue de la couleur
  • ...

CIE 1931 XYZ

Math to convert a color from CIE RGB to CIE XYZ

CIE 1931 XYZ

CIE 1931 XYZ

X Y Z
580nm 67.388 62.583 6.404
620nm 49.441 30.363 2.888
mix 95.047 100.000 108.883
blanc + rouge 70.870 63.274 64.969
bleu + vert 43.801 78.733 106.950

CIE 1931 XYZ

CIE 1931 XYZ

CIE 1931 XYZ

Diagramme de chromaticité CIE 1931 xy

1990's

Premiers appareil numériques personnels

Rec.709 (vidéo) ≈ sRGB (image)

sRGB / RGB

rgb(181, 36, 255)

sRGB / RGB

sRGB / HSL

hsl(280deg, 86%, 100%)

sRGB / HSL

sRGB / HSB

hsb(280deg, 86%, 100%)

sRGB / HSB

sRGB

RGB / Hexa
HSL
HSB

2010's

Des écrans plus performants

P3

P3

CSS code to display a color in P3 space

P3

  • Designers
    Configurer son logiciel pour utiliser le profil de couleur P3
    (l'inclure aussi dans les images)
  • Devs
    Préciser l'espace P3 dans ses codes couleurs

Il reste un problème... 🙄

Luminosité...

Luminosité...

Quantité de rouge / vert / bleu

hsb(0deg, 100%, 100%)

... vs Luminance

Sensation visuelle de la luminosité

3 Un espace de couleur
pour les humains

🎅 Un nouvel espace de couleurs...

  • Fidèle à la perception humaine des couleurs 🤞

CIE LAB 1976

CIE LAB 1976

CIE LCH 1976

CIE LCH 1976

sRGB / LCH
sRGB / RGB
sRGB / HSL
sRGB / HSB
sRGB / LCH

Björn Ottosson, 2020

  • LAB → OKLAB
  • LCH → OKLCH

Palettes de couleurs

Palette HSL

L S \ H 0306090120150180210240270300330
93 80 Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa
80 85 Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa
65 90 Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa
50 90 Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa
33 90 Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa
18 85 Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa
8 80 Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa

Palette HSL

Lorem ipsum
Lorem ipsum

Palette OKLCH

L C \ H 0306090120150180210240270300330
95 0.05 Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa
85 0.13 Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa
70 0.21 Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa
55 0.27 Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa
40 0.21 Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa
25 0.12 Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa
16 0.08 Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa

Palette OKLCH

Lorem ipsum
Lorem ipsum

Gradients

⚠️ Sorry, your browser doesn't support interpolation color space

rgb0, 0, 1
1, 1, 0

⚠️ Sorry, your browser doesn't support interpolation color space

rgb0, 0, 1
1, 1, 0
hsl240, 100%, 50%
60, 100%, 50%

⚠️ Sorry, your browser doesn't support interpolation color space

rgb0, 0, 1
1, 1, 0
hsl240, 100%, 50%
60, 100%, 50%
oklab45%, -0.03, -0.31
97%, -0.07, 0.2

⚠️ Sorry, your browser doesn't support interpolation color space

rgb0, 0, 1
1, 1, 0
hsl240, 100%, 50%
60, 100%, 50%
oklab45%, -0.03, -0.31
97%, -0.07, 0.2
oklch45%, 0.31, 260
97%, 0.21, 110
CSS code to choose the interpolation color space in linear gradients

Ou librairies : Color.js, Culori...

TL;DL

too long ; didn't listen

XYZ > P3 > sRGB

OKLAB / OKLCH

Julien Sulpis

@jsulpis
github X Bluesky Mastodon codesandbox shadertoy
qr code for feedback
sRGB
Display P3