Créer de beaux dégradés CSS sans « zone morte grise »

• Lorsqu’on crée un dégradé linéaire allant du jaune au bleu, une « gray dead zone » apparaît au milieu

→ c’est parce que l’algorithme de linear-gradient en CSS détermine la valeur de couleur des pixels en calculant la moyenne mathématique en RGB

→ dans l’espace colorimétrique RGB, lorsque les valeurs RGB sont toutes identiques, on obtient toujours une couleur en niveaux de gris

• Si l’on effectue la moyenne en HSL (Hue / Saturation / Lightness), cette zone morte grise n’apparaît pas

• Mais si l’on crée simplement le dégradé en HSL, il paraît trop lumineux et trop vif, « parce qu’il ne tient pas compte de la perception humaine »

→ deux couleurs peuvent avoir la même luminosité, mais le jaune sera perçu comme plus lumineux

• C’est pourquoi l’utilisation d’un mode comme HCL, modélisé à partir de la vision humaine, peut être préférable

• Le problème, c’est qu’en CSS il n’existe pas encore de fonctionnalité permettant de spécifier des modes colorimétriques comme HSL/HCL

→ comme un dégradé CSS n’est pas limité à deux couleurs fixes, on peut contourner le problème en définissant de nombreuses couleurs, par exemple 10 ou plus

• Le Gradient Generator publié avec l’article permet de générer et d’utiliser des dégradés CSS avec des modes colorimétriques comme LRGB/HSL/HSV/HCL

[xguru]

Le contenu lié à HSL a été résumé dans un article que j’avais publié auparavant.

• HSLuv - un espace colorimétrique pensé pour les développeurs https://fr.news.hada.io/topic?id=1691