outils et langages numériques

1 - La couleur par mots-clés

Les couleurs nommées sont des identifiants, insensibles à la casse, qui représentent une couleur donnée, comme red pour rouge, blue pour bleu, black pour noir ou encore lightgrey pour gris clair. Bien que ces noms décrivent plus ou moins, en anglais, les couleurs auxquelles ils sont associés, leur sémantique est arbitraire et il n'y a pas de règle stricte pour déterminer un nom donné.
Bien que paraissant évidente, cette méthode est la moins utilisée des trois.

Pour identifier l'intégralité des couleurs nommées vous pouvez faire une recherche sur le web où vous trouverez pléthore de réponses mais une extension pour le navigateur Chrome nommée CSS Color Names fait aisément l'affaire !

Voici un chantillonnage de couleurs par mots-clés :

2 - La couleur hexadécimale

Ce mode colorimétrique définit les couleurs par un nombre hexadécimal (toujours précédé d'un dièse), constitué de six valeurs alphanumériques allant de 0 à 9 et de A à F, où 0 est la valeur minimale, et F la valeur maximale. Ces combinatoires s'appuient sur la juxtaposition des valeurs hexadécimales de leurs composantes rouge, verte et bleue : #RRVVBB.

Prenons un exemple simple pour illustrer ce système : #FF0000. Il s’agit là d’un rouge pur : la composante rouge est à son intensité maximale (FF), tandis que les composantes de vert et bleu sont à leur intensité minimale, c’est-à-dire nulle, représentée par 00. Notez que lorsque les composantes rouge, vert, bleu présentent individuellement les mêmes valeurs, l'écriture du code hexadécimal peut se réduire à trois unités :

Appliquons ci-dessous le principe pour définir 16 valeurs franches d'un dégradé de gris à base de noir et blanc seuls, suivies de 16 valeurs très proches (l'ensemble pouvant aller jusqu'à 256 valeurs). Pour de plus amples investigations, manipulez le sélecteur de couleurs dans Adobe Photoshop :

3 - La couleur rgb & rgba

La troisième et dernière méthode pour caractériser les couleurs est l'usage des arguments rgb (red, green, blue) qui consiste à définir les couleurs avec des valeurs décimales comprises entre 0 et 255.

Le premier argument dans la notation rgb est celle des composantes rouges de la couleur. Le deuxième argument spécifie la teneur des couleurs vertes dans la couleur désirée. Et le troisième, est l'argument des composantes bleues dans la couleur en question.

Exemple : si vous désirez que le texte de votre paragraphe soit en bleu, vous noterez color:rgb(0,0,255);. On donne comme valeur à la propriété color, rgb avec les trois valeurs décimales qui seront toutes les trois mises entre parenthèses. Les trois valeurs contenues dans les parenthèses seront séparées par une virgule.

La fonction rgba définit une couleur et son opacité à partir des trois couleurs de base (rouge, vert et bleu) et du paramètre alpha. Ce dernier définit l'opacité de la couleur, c'est à dire la possibilité de voir à travers ou non. L'argument d'opacité s'écrit avec un point entre l'unité et la décimale, exemple 60% s'écrit 0.6.

4 - Le bonus Coolors

Coolors est l'outil indispensable pour créer et collectionner (entre autres) des palettes de couleurs. Il vous permet de générer des couleurs parfaitement assorties en quelques secondes. Voilà un bon moyen de se réconcilier avec la couleur.

L'interface d'accueil du site Coolors

Vous pouvez travailler avec de nombreux espaces colorimétriques, notamment rvb, cmjn, lab, tsl et autres bibliothèques de couleurs telles que Pantone®, etc.

Ces autres atouts résident dans la possibilité, via la barre d'outils située sous le menu, d'accéder à de nombreuses options comme :

• - Créer une palette à partir d'une photographie.
• - Identifier les couleurs qui posent problème aux personnes souffrant de déficiences visuelles (achromatopsie, tritanopie [forme de daltonisme], etc.). Un univers qui devrait être davantage pris en considération par le designer graphique !
• - Identifier votre couleur sous tous les modes colorimétriques (mot-clé, hexadécimal, rvb…).
• - D'exporter votre palette sous de nombreux formats.
• - De sauvegarder votre palette.

Les outils spécifique de Coolors

Annoncé comme cela, Coolors semble réellement un outil indispensable dans le trousseau du parfait designer graphique.
Cerise sur le pancake moelleux, ce service en ligne offre (mais quelle générosité… attention si vous allez trop loin : vous payez !) des extensions pour Adobe® et Chrome, des applications iOS App et Android App et même… un plug-in pour Figma.

Les plug-ins de Coolors

Allez un p'tit pancake moelleux avec à son sommet une cerise, ça ne se refuse pas en temps de crise et d'effondrement.
Enjoy !