InMy.Live

Voici donc un dégradé linéaire CSS, allant du jaune pur au bleu pur :

Remarquez qu’il est un peu délavé et boueux au milieu là-bas?

C’est ce qu’Erik Kennedy a appelé la “zone morte grise”. À moins que vous ne fassiez très attention lors de la sélection des couleurs de vos dégradés, vous vous retrouverez souvent avec une section médiane désaturée dans vos dégradés CSS.

Il s’avère cependant que nous pouvons absolument éviter la zone morte grise. Dans cet article de blog, nous allons découvrir pourquoi cela se produit et comment nous pouvons utiliser la théorie des couleurs pour créer des dégradés riches, vifs et parfaitement vivants.

Vous êtes-vous déjà demandé comment le CSS linear-gradient l’algorithme fonctionne ? Comment calcule-t-il réellement la valeur de couleur spécifique pour chaque pixel le long du spectre ?

Il le calcule en prenant la moyenne mathématique pour chacun des 3 canaux de couleur : Rouge, Vert et Bleu.

Cliquez et faites glisser pour voir la répartition RVB spécifique pour chaque pixel en cours de route :

Comment utiliser: Cliquez et faites glisser pour repositionner l’indicateur, ou concentrez l’indicateur et utilisez les touches fléchées gauche/droite.

Dans l’espace colorimétrique RVB, nous créons des couleurs en mélangeant trois canaux : rouge, vert et bleu. Chaque canal a une plage de 0 à 255.

Si nous maximisons les trois canaux – 255/255/255 – nous obtenons un blanc pur. Et si on met chaque canal à 0, on obtient le noir, l’absence de toute couleur.

En fait, si les 3 canaux sont réglés sur la même valeur, le résultat sera toujours une couleur en niveaux de gris :

Dans la démo ci-dessus, nous commençons au jaune pur (255/255/0). Au fur et à mesure que nous nous déplaçons dans le dégradé, nous commençons à mélanger dans le bleu (0/0/255). Au moment où nous atteignons le centre même, nous avons mélangé la moitié du jaune et mélangé la moitié du bleu.

En d’autres termes, les trois canaux convergent vers leur valeur médiane, 127,5. Et la couleur résultante est grise.

C’est un peu bizarre pour moi que le point médian entre le bleu et le jaune soit gris. En mélangeant ensemble deux couleurs hautement saturées, on obtient une couleur totalement désaturée. Et s’il y avait un moyen de ne mélanger que le pigmentet gardez le saturation cohérent d’un bout à l’autre ?

Il existe de nombreuses façons de représenter la couleur. Jusqu’à présent, nous avons utilisé le mode R/G/B. Et, honnêtement, ce mode couleur est un peu nul. 😅

Parlons d’un mode de couleur différent : LGV.

HSL signifie Hue / Saturation / Lightness. Si vous avez déjà utilisé un sélecteur de couleurs, vous avez probablement travaillé avec ce mode de couleur.*

Voici un exemple en direct :

Voici ce que chaque valeur représente :

• Teinte contrôle ce que sera le pigment, où la couleur tombe sur la roue chromatique.

• Saturation contrôle la vivacité de la couleur.

• Légèreté contrôle le degré de clarté ou d’obscurité de la couleur.

Personnellement, je trouve que c’est un beaucoup façon plus intuitive de penser à la couleur.

Voici la chose vraiment magique: Et si, au lieu de faire la moyenne des valeurs RVB dans nos dégradés, nous faisions la moyenne des valeurs HSL ?

Eh bien, essayons:

Il n’y a plus de zone morte grise, car on ne mélange plus les valeurs R/V/B, on mélange les valeurs H/S/L.

La couleur de début et la couleur de fin partagent la même saturation et la même luminosité, et donc la seule valeur qui change est la teinte. En conséquence, nous parcourons efficacement la roue des couleurs.

Voici un autre exemple, mélangeant cette fois des couleurs avec différentes saturations et luminosités :

Et voici les mêmes couleurs, en utilisant un mélange RVB typique :

Toute une différence, non ?

Maintenant, HSL n’est pas nécessairement le meilleur mode couleur à utiliser dans toutes les situations ; il a tendance à produire des dégradés qui peuvent être trop brillants et vifs, car il ne tient pas compte de la perception humaine.

Selon le mode de couleur HSL, ces deux couleurs partagent la même « légèreté » :

Tout le monde ne voit pas la couleur de la même manière, mais la plupart des gens diront que le jaune est beaucoup plus clair que le bleu, bien qu’ils aient la même valeur de “légèreté”. Cependant, HSL ne se préoccupe pas de la façon dont les humains perçoivent les couleurs ; il est calqué sur la physique brute, l’énergie et les longueurs d’onde, etc.

Heureusement, il existe d’autres modes de couleur qui faire tenir compte de la perception humaine. Par exemple, HCL est similaire à HSL, mais modélisé d’après la vision humaine :

Quel mode de couleur est le meilleur ? Eh bien, cela dépend vraiment de l’effet que vous recherchez ! J’aime expérimenter avec de nombreux modes de couleurs différents, pour trouver le meilleur pour un dégradé particulier.

J’ai de bonnes nouvelles et de mauvaises nouvelles. Commençons par les mauvaises nouvelles.

CSS ne nous donne aucun moyen de changer le mode de couleur utilisé dans les calculs de dégradé. Nous ne pouvons pas “opter” pour utiliser l’interpolation HSL pour un gradient donné, du moins pas encore. CSS Images Level 4 fournit un moyen de spécifier une “méthode d’interpolation des couleurs”, mais pour autant que je sache, elle n’est pas largement prise en charge dans les navigateurs.

Voici la bonne nouvelle, cependant : nous pouvons contourner cette limitation si nous sommes un peu sournois. 😈

Les dégradés en CSS ne doivent pas s’en tenir à seulement deux couleurs. On peut passer 3 couleurs ou 10 couleurs ou 100 couleurs.

Tout d’abord, nous devrons calculer manuellement un tas de couleurs intermédiaires. Nous le ferons en utilisant JavaScript, afin que nous puissions utiliser le mode de couleur que nous voulons (en utilisant une bibliothèque utile comme chroma.js) :

Ensuite, nous prendrons cette collection de couleurs et transmettrons chaque valeur à une fonction de dégradé CSS :

(Nous utilisons ici des dégradés linéaires, mais la même astuce fonctionne pour les dégradés radiaux et coniques !)

Mais attendez, le moteur CSS n’utilisera-t-il pas toujours l’interpolation RVB pour calculer les espaces entre chaque couleur fournie? Sauf si nous passons des centaines de couleurs, assez pour chaque pixel, nous comptons toujours sur l’interpolation RVB !

C’est vrai, mais heureusement ce n’est pas grave.

Lorsque deux couleurs sont très similaires l’une à l’autre, peu importe le mode de couleur que nous utilisons. Vous vous retrouverez avec à peu près le même dégradé. Nous n’allons pas obtenir une valeur “moyenne” très différente, peu importe la façon dont vous définissez “moyenne”.

Par exemple, voici un dégradé qui utilise deux couleurs très similaires :

Les couleurs sont si similaires qu’il n’y a vraiment aucun moyen pour l’interpolation RVB de tout gâcher.

Alors : notre astuce consiste à générer un tas de couleurs médianes en utilisant un mode de couleur personnalisé, et à les transmettre toutes à notre fonction de dégradé CSS. Le moteur CSS utilisera l’interpolation RVB, mais cela n’affectera pas le résultat final (du moins pas suffisamment pour qu’il soit perceptible par les humains).

Bon, maintenant la partie amusante. Parlons de la façon de générer ces gradients. 😄

J’ai créé un outil qui vous aidera à générer de magnifiques dégradés luxuriants que vous pourrez utiliser en CSS.

Je suis vraiment enthousiasmé par cet outil. Il utilise tout ce dont nous avons parlé dans ce billet de blog, ainsi que quelques autres astuces astucieuses (comme l’utilisation d’une courbe d’assouplissement pour contrôler le distribution de couleurs).

Ajustez les contrôles jusqu’à ce que vous aimiez le résultat, puis copiez l’extrait CSS en bas. Pour le moment, l’outil ne génère que des dégradés linéaires, mais vous pouvez copier/coller le jeu de couleurs CSS et les utiliser également dans des dégradés radiaux et coniques !

Vérifiez le ici:
joshwcomeau.com/gradient-generator

Ah, et encore une chose : Si vous avez apprécié ce style d’enseignement, avec les widgets interactifs et l’accent mis sur les premiers principes, vous adorerez mon cours CSS, CSS pour les développeurs JavaScript.

Dans mon cours, nous adoptons une approche similaire pour l’ensemble du langage CSS. Nous apprenons comment cela fonctionne sous le capot, de sorte que la langue cesse de se sentir si surprenante. Nous couvrons un tas de mises en page et d’effets courants, mais nous nous concentrons sur les idées sous-jacentes, afin que vous puissiez créer n’importe quel mise en page ou effet avec les outils que vous avez appris.

Si vous êtes intéressé, vous pouvez en savoir plus ici : https://css-for-js.dev/.

J’ai été inspiré pour construire mon générateur de dégradé après avoir vu ces deux merveilleux générateurs de dégradé :