Overblog
Editer l'article Suivre ce blog Administration + Créer mon blog
29 septembre 2013 7 29 /09 /septembre /2013 18:38

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)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%)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…

commentaires

G
Bonjour Bren,<br /> <br /> Oui et j'ai toujours été étonnée malgré tout, ne possédant au départ aucune connaissance du JS ou autres programmations, d'arriver à réaliser dans mon blog les codes des articles dans lesquels tu<br /> ne spécifiais aucune difficulté.<br /> Le fait de dire si c'est ou non faisable pour les blogueurs lambdas évite de faire perdre un temps précieux.<br /> <br /> A lire ton prochain article avec plaisir,<br /> Merci pour ta réponse et bon dimanche.<br /> Geneviève
Répondre
G
Normal qu'un Pro appelle les Pros...<br /> A bientôt Bren,<br /> bien que je n'en fasse pas partie je reviendrai toujours lire tes articles avec le plus grand intérêt, certains m'ont été très utiles pour agencer mes blogs.<br /> <br /> Bon week end<br /> Geneviève
Répondre
B
<br /> <br /> Pardon, j'ai oublié de répondre tout de suite à ton commentaire - mea culpa, mea maxima...<br /> <br /> <br /> Je n'ai rien d'un pro, il s'en faut ! Un amateur obstiné, j'admets :-) Certains de mes articles demandent peu de connaissances préalables, d'autres placent la barre plus haut. Je l'annonce, non<br /> par élitisme mais pour éviter de noyer un visiteur non prévenu, comme je l'étais en abordant certains blogs de pros (des vrais, ceux-là !) du JavaScript.<br /> <br /> <br /> Voilà toute l'histoire...<br /> <br /> <br /> <br />
G
Je suis vraiment nulle, si j'enregistre ton fichier JS, je ne vois pas ensuite à quoi il peut me servir !<br /> Désolée mais ton savoir est trop grand pour ma petite tête.<br /> <br /> Bonne soirée Bren, @++++
Répondre
A
<br /> <br /> Ne fais aucun complexe !<br /> <br /> <br /> Ce fichier n'est pas un programme prêt à l'emploi, seulement une série de fonctions destinées à des programmeurs JavaScript s'il en passe par ici - assez peu, je le crains...<br /> <br /> <br /> Mais bon, ça m'a permis de publier au moins un article dans le mois :-)<br /> <br /> <br /> <br />
G
Merci pour cet article. Mais je vais l'ouvrir chez moi je verrai mieux l'application surtout en ce qui concerne ton fichier JS;<br /> <br /> Bien cordialement<br /> Geneviève
Répondre

Archives