Come manipolare i colori in JavaScript Utilizzando Chroma.js

Nel video screencast di oggi ti mostrerò come manipolare i colori con JavaScript. Proprio così, JavaScript. Non CSS. Entriamo per vedere di cosa sto parlando!

Guarda Screencast

 

Ci siamo abituati all'idea che i CSS gestiscono gli stili mentre JavaScript è usato per il comportamento, e le due preoccupazioni dovrebbero essere mantenute separate. Ma quando non è possibile definire gli stili direttamente tramite CSS, come quando sono impostati tramite l'input dell'utente, JavaScript farà tutto il lavoro pesante per te.

Chroma.js è una piccola libreria che può essere di grande aiuto con la manipolazione dei colori, quindi vediamo come iniziare a usarlo.

Aggancialo

Chroma può essere estratto dal suo repository su Github, o collegato a CDNJS usando questo link:

dimostrazione

Dai un'occhiata alla demo rapida che ho creato per mostrarti cosa è possibile. Stiamo per costruire un generatore di combinazioni di colori che prende un valore di colore immesso e lo utilizza per generare uno schema monocromatico.

Se vuoi seguire mentre ricreavo la demo, prendi il file start.html (che contiene tutto tranne il codice JavaScript che andremo a scrivere) e aprilo in un editor di codice.

Ecco cosa stiamo costruendo

Inizia aggiungendo il seguente blocco di codice tra il > tag nella parte inferiore del documento html:

 document.addEventListener ('DOMContentLoaded', function () var btnGenerateColorScheme = document.querySelector ('# generate-color-scheme'), btnGenerateColorScale = document.querySelector ('# generate-color-scale'), colorScheme = document.querySelector ('.color-scheme'), colorScale = document.querySelector ('. color-scale'), steps = 5, // è preferibilmente un numero dispari chromaColor, userColor, colorList, scaleColors, scaleCount, scaleList; btnGenerateColorScheme.addEventListener ( 'click', function () ); btnGenerateColorScale.addEventListener ('click', function () );); 

Questo è un grosso pezzo, ma è molto meno intimidatorio di quanto si possa pensare inizialmente! Inizia con un listener di eventi DOMContentLoaded che attende il caricamento del documento prima dell'esecuzione di una delle funzioni che seguono. 

Successivamente definisco un gruppo di variabili che useremo, iniziando con due pulsanti, quindi il combinazione di colori e ColorScale contenitori, quindi passaggi (un numero che useremo a breve).

Infine, ci sono due listener di eventi click con (ancora) funzioni vuote. Stiamo per iniziare con il primo di questi, il btnGenerateColorScheme, che è (non sorprendentemente) il pulsante che genererà una combinazione di colori. 

btnGenerateColorScheme


All'interno della funzione vuota, tra le parentesi graffe, inizieremo impostando una matrice vuota chiamata colorList:

// Reinizializza la lista dei colori. colorList = [];

Quando un utente fa clic sul pulsante, la prima cosa che dobbiamo fare è ottenere il colore dal # User-colore ingresso.

 // Ottieni il valore del colore. userColor = document.querySelector ('# user-color'). value;

Quindi dobbiamo reimpostare i valori all'interno dell'elenco delle combinazioni di colori. Questo è fatto spogliando il innerHTML del .combinazione di colori elemento, che è nel nostro caso un

. Qui puoi vedere che stiamo rendendo l'innerHTML uguale a una stringa vuota.

 // Ripristina il contenuto della lista di combinazioni di colori. colorScheme.innerHTML = ";

Chiamando Chroma

Adesso per la parte divertente! Inizializziamo la libreria chroma.js chiamando chroma () e passando in un colore:

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

Il nostro colore è UserColor, il valore estratto dall'input prima.

Creeremo uno schema di colori monocromatico basato sul colore scelto. Lo faremo creando un array, grazie a quanto segue per ciclo continuo:

 // Crea uno schema di colori monocromatico. per (var i = 0; i < steps; i++)  colorList[i] = chromaColor.darken(i); 

Questo ciclo esegue un'iterazione sul numero di passaggi definiti nella variabile passaggi (lo impostiamo su 5 in precedenza, ricorda?) Ogni volta che iteriamo, viene aggiunta una sfumatura leggermente più scura alla collezione.

Infine, dobbiamo generare alcuni elementi usando i cinque valori nel nostro array. Ogni volta che creiamo a

1. elemento, dargli un colore di sfondo secondo il nostro colorList, quindi aggiungilo a combinazione di colori.

    // Genera alcuni elementi. per (var j = 0; j < colorList.length; j++)  var newItem = document.createElement('li'); newItem.style.backgroundColor = colorList[j]; colorScheme.appendChild(newItem); 

   Fatto!

   Abbiamo creato con successo un generatore di combinazioni di colori che emette una serie di blocchi, iniziando dal colore selezionato e gradualmente diventando più scuro.

   La nostra combinazione di colori

   Potresti voler migliorare questo aspetto posizionando il colore selezionato al centro dell'intervallo con colori più chiari a sinistra e colori più scuri a destra, nel qual caso dai un'occhiata al video e segui i passaggi finali. Puoi anche aggiungere dettagli di colore per ogni blocco, come il valore esadecimale; Lo spiego anche nello screencast.

   Infine, lo screencast include anche le istruzioni per la creazione del generatore di scale cromatiche, quindi entra e fammi sapere come vai avanti!

   Ulteriori risorse

   • chroma.js su Github
   • Il suo creatore @driven_by_data (Gregor Aisch) su Twitter
     
   • File di avvio per questo tutorial
   Web design