01
sRGB
#A7518DExaminer le repli ↗
color-mix(in srgb, #FF5C35 50%, #4F46E5 50%)← Retour au catalogue de couleurs
Banc de comparaison d’interpolation
Mélangez deux couleurs. Obtenez quatre réponses.
Appliquez la même proportion à quatre espaces CSS. Comparez chaque résultat sur une seule échelle, puis copiez color-mix() avec un repli sRGB à six chiffres.
01 / Quatre parcours d’interpolation
Une proportion, quatre résultats.
Le repère vertical traverse toutes les échelles au même pourcentage. Les différences viennent de l’espace d’interpolation, pas d’une autre donnée d’entrée.
02
sRGB linéaire
#C252ABExaminer le repli ↗
color-mix(in srgb-linear, #FF5C35 50%, #4F46E5 50%)03
OKLab
#A6659FExaminer le repli ↗
color-mix(in oklab, #FF5C35 50%, #4F46E5 50%)04
OKLCH · arc de teinte court
#C939B0Examiner le repli ↗
color-mix(in oklch, #FF5C35 50%, #4F46E5 50%)02 / Pourquoi le milieu se déplace
Mélanger une couleur, c’est choisir des coordonnées.
L’interpolation numérique n’imite pas le mélange de peintures. Chaque espace trace un chemin différent entre les mêmes extrémités ; le milieu peut donc être plus clair, sombre, discret ou vif.
Valeurs encodées et lumière linéaire
sRGB mélange des canaux encodés, tandis que sRGB linéaire mélange la lumière. Leurs résultats à 50 % peuvent fortement différer, surtout entre le noir et le blanc.
Parcours perceptuels
OKLab interpole des coordonnées perceptuelles rectangulaires. OKLCH interpole luminosité, chroma et l’arc de teinte le plus court, ce qui peut préserver un parcours plus coloré.
Le repli en premier
L’extrait copié place un repli sRGB à six chiffres avant color-mix(). Les navigateurs compatibles appliquent la seconde déclaration.
03 / Méthode et source
Des calculs CSS déterministes.
Les couleurs sRGB opaques sont converties et interpolées selon CSS Color. Les résultats OKLab et OKLCH hors gamut sont ramenés en sRGB. Le rendu dépend aussi de l’écran, de la gestion des couleurs, des couleurs voisines et du composant final.