Comment manipuler les couleurs en JavaScript avec Chroma.js

Dans le screencast du tutoriel d'aujourd'hui, je vais vous montrer comment manipuler les couleurs avec JavaScript. C'est vrai, JavaScript. Pas de CSS. Let's plonger pour voir de quoi je parle!

Regarder Screencast

 

Nous nous sommes tous habitués à l'idée que CSS traite les styles alors que JavaScript est utilisé pour le comportement, et les deux préoccupations doivent rester séparées. Mais lorsqu'il n'est pas possible de définir des styles directement via CSS, tels que lorsqu'ils sont définis via une entrée utilisateur, JavaScript se chargera de tout..

Chroma.js est une petite bibliothèque qui peut être d'une grande aide pour manipuler les couleurs, voyons comment commencer à l'utiliser..

Le brancher

La chroma peut être extraite de son dépôt sur Github, ou liée à CDNJS en utilisant ce lien:

Démo

Jetez un coup d’œil à la démo rapide que j’ai construite pour vous montrer ce qui est possible. Nous allons construire un générateur de jeu de couleurs qui prend une valeur de couleur entrée et l'utilise pour produire un jeu monochromatique.

Si vous souhaitez suivre pendant que je recrée la démo, récupérez le fichier start.html (qui contient tout sauf le code JavaScript que nous allons écrire) et ouvrez-le dans un éditeur de code..

Voici ce que nous construisons

Commencez par ajouter le morceau de code suivant entre le > balises au bas du document html:

 document.addEventListener ('DOMContentLoaded', function () var btnGenerateColorScheme = document.querySelector ('# generate-color-scheme'), btnGenerateColorScale = document.querySelector ('# generate-color-scale'), colorScheme = document.querySector ('.color-scheme'), colorScale = document.querySelector ('. color-scale'), steps = 5, // est de préférence un nombre impair chromaColor, userColor, colorList, scaleColors, scaleCount, scaleList; btnGenerateColorScheme.addEventListener ( 'cliquez', fonction () ); btnGenerateColorScale.addEventListener ('cliquez', fonction () );); 

C'est un gros morceau, mais c'est beaucoup moins intimidant qu'on ne le pense au premier abord! Cela commence par un auditeur d'événement DOMContentLoaded qui attend que le document soit chargé avant d'exécuter l'une des fonctions suivantes. 

Ensuite, je définis un groupe de variables que nous allons utiliser, en commençant par deux boutons, puis le Schéma de couleur et échelle de couleurs conteneurs, puis pas (un nombre que nous utiliserons sous peu).

Enfin, il existe deux écouteurs d’événements clic avec (encore) des fonctions vides. Nous allons commencer par le premier d’entre eux, le btnGenerateColorScheme, qui est (sans surprise) le bouton qui va générer un jeu de couleurs. 

btnGenerateColorScheme


Dans la fonction vide, entre les accolades, nous allons commencer par définir un tableau vide appelé liste de couleurs:

// Réinitialise la liste de couleurs. colorList = [];

Lorsqu'un utilisateur clique sur le bouton, la première chose à faire est d'obtenir la couleur du # couleur utilisateur contribution.

 // Récupère la valeur de la couleur. userColor = document.querySelector ('# user-color'). value;

Ensuite, nous devons réinitialiser les valeurs dans la liste de couleurs. Ceci est fait en dépouillant le innerHTML du .Schéma de couleur élément, qui est dans notre cas un

. Ici vous pouvez voir que nous faisons en sorte que innerHTML soit égal à une chaîne vide.

 // Réinitialise le contenu de la liste de couleurs. colorScheme.innerHTML = ";

Appeler Chroma

Maintenant pour la partie amusante! Nous initialisons la bibliothèque chroma.js en appelant chroma () et passant dans une couleur:

 // Initialise Chroma. chromaColor = chroma (userColor);

Notre couleur est couleur utilisateur, la valeur que nous avons tirée de l'entrée précédente.

Nous allons créer un jeu de couleurs monochromatique basé sur la couleur choisie. Nous ferons cela en créant un tableau, grâce à ce qui suit pour boucle:

 // Crée un jeu de couleurs monchromatique. pour (var i = 0; i < steps; i++)  colorList[i] = chromaColor.darken(i); 

Cette boucle itère sur le nombre d'étapes défini dans la variable pas (nous l'avons réglé sur 5 plus tôt, vous vous en souvenez?) À chaque itération, une nuance légèrement plus foncée est ajoutée à la collection..

Enfin, nous devons générer des éléments en utilisant les cinq valeurs de notre tableau. Chaque fois que nous créons un

1. élément, donnez-lui un Couleur de fond selon nos liste de couleurs, puis l'ajouter à Schéma de couleur.

    // Génère des éléments. pour (var j = 0; j < colorList.length; j++)  var newItem = document.createElement('li'); newItem.style.backgroundColor = colorList[j]; colorScheme.appendChild(newItem); 

   Terminé!

   Nous avons construit avec succès un générateur de couleurs qui génère une série de blocs, en commençant par la couleur sélectionnée et en s'assombrissant progressivement..

   Notre palette de couleurs

   Vous voudrez peut-être améliorer la situation en plaçant la couleur sélectionnée au milieu de la plage, les couleurs plus claires à gauche et les couleurs plus sombres à droite. Dans ce cas, regardez la vidéo et suivez les dernières étapes. Vous pouvez également ajouter des détails de couleur pour chaque bloc, tels que la valeur hexadécimale; J'explique aussi cela dans le screencast.

   Enfin, le screencast inclut également des instructions pour la construction du générateur d’échelle de couleurs, alors sautez et laissez-moi savoir comment vous vous en sortez.!

   Ressources supplémentaires

   • chroma.js sur Github
   • Son créateur @driven_by_data (Gregor Aisch) sur Twitter
     
   • Fichier de démarrage pour ce tutoriel
   Création de sites web