Programmation JS : conversion de couleurs CSS

Voici quelques fonctions pour faciliter les calculs de couleurs en JavaScript.

Si vous vous sentez comme une poule qui a trouvé un couteau, la suite de l'article vous instruira peut-être.

Couleur ?

Une couleur en CSS, comme color, background-color ou border-color, se note habituellement par un nombre de 6 chiffres hexadécimaux précédés d'un dièse : #rrggbb. Chaque couple de chiffres indique le niveau, entre 00 et FF des composantes (rr = rouge, gg = vert, bb = bleu) de la couleur étudiée. Voilà le B-A-BA.

Autres notations

On peut aussi, depuis CSS3, noter une couleur rgb(rouge, vert, bleu) où rouge, vert et bleu sont trois nombres entiers compris entre 0 et 255 ou entre 0% et 100%. Ça doublonne un peu avec la notation en hexadécimal mais peut rendre service si vous n'avez pas seize doigts – pourtant bien commodes sur un clavier :-)

Il existe un autre système de trois nombres pour noter une couleur : teinte, saturation et luminosité. En CSS3 toujours cela se note hsl(h, s%, l%) où h est un nombre entre 0 et 360, s et l sont des pourcentages entre 0% et 100% .

Ces deux possibilités existent dans les navigateurs récents et dans IE depuis la version 9.

Pourquoi ces différents systèmes ?

Parce que…

1. la notation en hexa, du fait de son ancienneté, est comprise par tous les navigateurs. C'est la seule (en 2013 où IE 6, 7 et 8 ne sont pas encore morts) qu'on peut utiliser sans se poser de questions ;
2. la notation rgb(r,g,b) accepte les pourcentages, plus parlants que des nombres hexa ;
3. la notation hsl(h,s,l) est la plus proche de l'intuition : éclaircir ou assombrir une couleur, la raviver ou la délaver ne demande pas de calculs douloureux ;
4. les variantes rgba et hsla permettent d'indiquer un quatrième nombre : l'opacité (entre 0% et 100%) de la couleur concernée. Il n'y a pas d'équivalent dans la notation traditionnelle : 8 chiffres hexadécimaux au lieu de 6 provoquent une erreur et c'est tout.

Il existe encore d'autres systèmes de notation (CMY, CMYB, HSV et j'en oublie) mais, comme ils ne sont pas (encore) utilisables en CSS, je n'en parlerai pas ici.

Les fonctions JS

Les principales fonctions fournies dans le fichier sont :

colorToHex

Quand on récupère une couleur d'un élément, par element.style.color ou window.getComputedStyle ou tout autre moyen, la notation de cette couleur est à la discrétion du navigateur.
Ainsi IE renverra la couleur telle que notée dans le fichier CSS quand FF l'indiquera systématiquement sous la forme rgb(r,g,b) ou rgba(r,g,b,a). La fonction colorToHex convertit tout ça et produit un code hexa #rrggbb.

hexToRGB et hexToHSL

Convertissent un code hexa (dièse suivi de 6 chiffres) en un tableau de trois nombres représentant la couleur en RGB ou HSL

RGBToHex et HSLToHex

Font exactement l'inverse !

S'y ajoutent deux utilitaires triviaux, lisez leurs commentaires.

Petit échantillon dans ce blog

Le bloc des albums, juste avant le pied de page, se commande à la souris : plus on s'approche d'une flèche, plus elle brille, plus vite les miniatures défilent.

La couleur des flèches est notée en HSL. Teinte et saturation ne changent pas, seule la luminosité dépend directement de la vitesse de défilement, qui elle-même dépend de la position de la souris. Yavépuka…

• Présentation
• Déverminer un programme
• Tirages aléatoires
• Boucle sur un Array
• Recherche dans un Array - indexOf
• Utiliser la classe d'un élément
• Trouver un élément dans la page : getElementById - getElementsByTagName
• Trouver un élément dans la page : exploiter className
• Trouver un élément dans la page : Notions sur le DOM
• Trouver un élément dans la page : Naviguer dans le DOM
• Gestion des cookies
• Conversion de couleurs CSS