Slik manipulerer du farger i JavaScript ved hjelp av Chroma.js

I dagens veiledning screencast skal jeg vise deg hvordan du kan manipulere farger med JavaScript. Det stemmer, JavaScript. Ikke CSS. La oss dykke inn for å se hva jeg snakker om!

Se Screencast

Vi har alle blitt vant til ideen om at CSS håndterer stiler mens JavaScript brukes til atferd, og de to bekymringene skal holdes skilt. Men når det ikke er mulig å definere stiler direkte via CSS, for eksempel når de er angitt via brukerinngang, vil JavaScript gjøre alt tungt løft for deg.

Chroma.js er et lite bibliotek som kan være en stor hjelp med å manipulere farger, så la oss se hvordan du kommer i gang med å bruke den.

Koble den opp

Chroma kan bli trukket fra sin repo på Github, eller knyttet til fra CDNJS ved hjelp av denne linken:

Demo

Ta en titt på den raske demoen jeg bygget for å vise deg hva som er mulig. Vi skal bygge en fargevalggenerator som tar en inntastet fargeverdi og bruker den til å utføre en monokromatisk skjema.

Hvis du vil følge med mens jeg gjenskaper demoen, ta tak i start.html-filen (som inneholder alt annet enn JavaScript vi skal skrive) og åpne det i en kodeditor.

Begynn med å legge til følgende del av koden mellom > merker nederst i html-dokumentet:

 document.addEventListener ('DOMContentLoaded', funksjon () var btnGenerateColorScheme = document.querySelector ('# generere-fargeskjema'), btnGenerateColorScale = document.querySelector ('# generere fargeskala'), colorScheme = document.querySelector ('.color-scheme'), colorScale = document.querySelector ('fargeskala'), trinn = 5, // er fortrinnsvis et oddetall chromaColor, userColor, colorList, scaleColors, scaleCount, scaleList; btnGenerateColorScheme.addEventListener 'klikk', funksjon () ); btnGenerateColorScale.addEventListener ('klikk', funksjon () );); 

Dette er en stor del, men er mye mindre skremmende enn du kanskje først tenker! Det begynner med en hendelselytter DOMContentLoaded som venter til dokumentet er lastet før du utfører noen av funksjonene som følger. 

Deretter definerer jeg en rekke variabler som vi skal bruke, starter med to knapper, deretter fargevalg og colorScale beholdere, da trinn (et nummer vi skal bruke kort tid).

Til slutt er det to klikkhendelselyttere med (ennå) tomme funksjoner. Vi skal begynne med den første av disse, den btnGenerateColorScheme, som er (overraskende) knappen som vil generere et fargevalg. 

btnGenerateColorScheme


Innenfor den tomme funksjonen, mellom de krøllete båndene, begynner vi ved å sette inn et tomt system som heter colorList:

// Reinitialiser fargelisten. colorList = [];

Når en bruker klikker på knappen, er det første vi må gjøre, fargeleggen fra # Bruker-farge inngang.

 // Få fargevarianten. userColor = document.querySelector ('# user-color'). verdi;

Da må vi nullstille verdiene i fargeskjema listen. Dette gjøres ved å strippe innerhtml av .fargevalg element, som i vårt tilfelle er en

. Her kan du se at vi gjør indreHTML lik en tom streng.

 // Nullstill innholdet i fargeskjema listen. colorScheme.innerHTML = ";

Ringer Chroma

Nå for den morsomme delen! Vi initialiserer chroma.js biblioteket ved å ringe kroma () og passerer i en farge:

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

Fargen vår er userColor, verdien vi dro fra innsatsen tidligere.

Vi skal lage en monokromatisk fargevalg basert på den valgte fargen. Vi gjør dette ved å opprette en matrise, takket være følgende til løkke:

 // Lag et monokromatisk fargeskjema. for (var i = 0; i < steps; i++)  colorList[i] = chromaColor.darken(i); 

Denne sløyfen iterates over antall trinn definert i variabelen trinn (vi setter det til 5 tidligere, husker?) Hver gang vi gjener, blir en litt mørkere nyanse lagt til samlingen.

Til slutt må vi generere noen elementer ved å bruke de fem verdiene i vårt utvalg. Hver gang vi lager en

1. element, gi det en bakgrunnsfarge ifølge vår colorList, Legg deretter det til fargevalg.

    // Generer noen elementer. for (var j = 0; j < colorList.length; j++)  var newItem = document.createElement('li'); newItem.style.backgroundColor = colorList[j]; colorScheme.appendChild(newItem); 

   Ferdig!

   Vi har vellykket bygget en fargeskjema generator som utsender en serie blokker, starter med den valgte fargen og gradvis blir mørkere.

   Vår fargeskjema

   Du vil kanskje forbedre dette ved å ha den valgte fargen plassert midt i serien med lettere farger til venstre og mørkere farger til høyre, i så fall ta en titt på videoen og følg med de siste trinnene. Du kan også legge til fargeinformasjon for hver blokk, for eksempel hex-verdien; Jeg forklarer også dette i skjermbildet.

   Til slutt inneholder screencast også instruksjoner for å bygge fargeskalegeneratoren, så hopp inn og gi meg beskjed om hvordan du går videre!

   Ytterligere ressurser

   • chroma.js på Github
   • Dens skaperen @driven_by_data (Gregor Aisch) på Twitter
     
   • Startfil for denne opplæringen
   Webdesign