Savez-vous vraiment ce qu'est la couleur ?

Découvrez la science derrière les pixels 🎨

Julien Sulpis

C'est quoi la couleur ?

rgb(255, 255, 255)

1C'est quoi la couleur ?

λ (nm)
https://blog.ophtalmique.ch/2021/03/04/cones-batonnets/
BâtonnetsCô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 ?

2Comment 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

RGB
580nm0.2380.1290.000
620nm0.2850.0170.000
mix0.1420.1750.184
blanc + rouge0.1370.1020.110
bleu + vert-🤔0.0290.1680.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

XYZ
580nm67.38862.5836.404
620nm49.44130.3632.888
mix95.047100.000108.883
blanc + rouge70.87063.27464.969
bleu + vert43.80178.733106.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é

3Un 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

LS \ H0306090120150180210240270300330
9380AaAaAaAaAaAaAaAaAaAaAaAa
8085AaAaAaAaAaAaAaAaAaAaAaAa
6590AaAaAaAaAaAaAaAaAaAaAaAa
5090AaAaAaAaAaAaAaAaAaAaAaAa
3390AaAaAaAaAaAaAaAaAaAaAaAa
1885AaAaAaAaAaAaAaAaAaAaAaAa
880AaAaAaAaAaAaAaAaAaAaAaAa

Palette HSL

Lorem ipsum
Lorem ipsum

Palette OKLCH

LC \ H0306090120150180210240270300330
950.05AaAaAaAaAaAaAaAaAaAaAaAa
850.13AaAaAaAaAaAaAaAaAaAaAaAa
700.21AaAaAaAaAaAaAaAaAaAaAaAa
550.27AaAaAaAaAaAaAaAaAaAaAaAa
400.21AaAaAaAaAaAaAaAaAaAaAaAa
250.12AaAaAaAaAaAaAaAaAaAaAaAa
160.08AaAaAaAaAaAaAaAaAaAaAaAa

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

Lead Design System Developer

www.jsulpis.dev | github Bluesky X Mastodon codesandbox shadertoy
scaleway Logo
sRGB
Display P3