L’interpolation des couleurs en CSS permet de générer des couleurs intermédiaires entre deux points de couleur, offrant ainsi des palettes uniques, des dégradés fluides et des transitions harmonieuses. Cette technique est omniprésente en CSS : dans les dégradés (linear-gradient
, conic-gradient
), les animations, les transitions, les filtres, ou encore la fonction color-mix()
. Elle repose sur une syntaxe formelle, comme in <espace-couleur> <méthode-interpolation-teinte>?
, où l’on spécifie l’espace de couleur (rectangulaire : srgb
, lab
, oklab
; ou polaire : hsl
, lch
, oklch
) et la méthode d’interpolation de la teinte (shorter
, longer
, increasing
, decreasing
). Les espaces polaires, comme oklch
, se distinguent par leur représentation cylindrique (luminosité, chroma, teinte), permettant des interpolations circulaires de la teinte, à l’image d’une horloge où l’on choisit le chemin le plus court ou le plus long entre deux valeurs. Par exemple, color-mix(in lch longer hue, red, blue)
utilise un arc plus long pour mélanger les couleurs, créant des effets visuels riches. Cette approche est particulièrement utile pour concevoir des dégradés dynamiques, des animations colorées ou des mélanges de couleurs innovants, enrichissant ainsi l’expérience visuelle des sites web.
25732 shaares