Hoe u kleuren manipuleert in JavaScript met Chroma.js

In de screencast van vandaag laat ik je zien hoe je kleuren kunt manipuleren met JavaScript. Dat klopt, JavaScript. Geen CSS. Laten we duiken om te zien waar ik het over heb!

Bekijk Screencast

 

We zijn allemaal gewend geraakt aan het idee dat CSS omgaat met stijlen, terwijl JavaScript wordt gebruikt voor gedrag en dat de twee problemen gescheiden moeten worden gehouden. Maar als het niet mogelijk is om stijlen rechtstreeks via CSS te definiëren, zoals wanneer ze via gebruikersinvoer worden ingesteld, zal JavaScript al het zware werk voor u doen.

Chroma.js is een kleine bibliotheek die een grote hulp kan zijn bij het manipuleren van kleuren, dus laten we eens kijken hoe we ermee aan de slag kunnen gaan.

Sluit hem aan

Chroma kan worden opgehaald uit zijn repository op Github, of gekoppeld aan CDNJS via deze link:

demonstratie

Bekijk de snelle demo die ik heb gemaakt om u te laten zien wat mogelijk is. We gaan een kleurenschema-generator bouwen die een ingevoerde kleurwaarde inneemt en gebruikt om een ​​monochroom schema uit te voeren.

Als je meegaat terwijl ik de demo opnieuw maak, pak dan het bestand start.html (dat alles bevat behalve het JavaScript dat we gaan schrijven) en open het in een code-editor.

Dit is wat we aan het bouwen zijn

Begin met het toevoegen van het volgende stuk code tussen de > tags onderaan het html-document:

 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, // is bij voorkeur een oneven aantal chromaColor, userColor, colorList, scaleColors, scaleCount, scaleList; btnGenerateColorScheme.addEventListener ( 'klik', functie () ); btnGenerateColorScale.addEventListener ('click', function () );); 

Dit is een groot stuk, maar is veel minder intimiderend dan je op het eerste gezicht misschien denkt! Het begint met een gebeurtenislistener DOMContentLoaded die wacht totdat het document is geladen voordat een van de volgende functies wordt uitgevoerd. 

Vervolgens definieer ik een aantal variabelen die we gaan gebruiken, te beginnen met twee knoppen en vervolgens de kleurenschema en ColorScale containers dan stappen (een nummer dat we binnenkort zullen gebruiken).

Ten slotte zijn er twee klikgebeurtenisluisteraars met (nog) lege functies. We beginnen met de eerste van deze, de btnGenerateColorScheme, wat (niet verwonderlijk) de knop is die een kleurenschema genereert. 

btnGenerateColorScheme


Binnen de lege functie, tussen de accolades, beginnen we met het instellen van een lege array met de naam colorlist:

// De kleurenlijst opnieuw initialiseren. colorList = [];

Wanneer een gebruiker op de knop klikt, is het eerste wat we moeten doen de kleur ophalen van de # User-color invoer.

 // Verkrijg de kleurwaarde. userColor = document.querySelector ('# user-color'). waarde;

Vervolgens moeten we de waarden opnieuw instellen in de lijst met kleurenschema's. Dit wordt gedaan door de innerHTML van de .kleurenschema element, wat in ons geval een

. Hier kun je zien dat we innerHTML gelijk maken aan een lege string.

 // Stel de inhoud van de lijst met kleurenschema opnieuw in. colorScheme.innerHTML = ";

Chroma aanroepen

Nu voor het leuke gedeelte! We initialiseren de chroma.js-bibliotheek door te bellen chroma () en een kleur doorgeven:

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

Onze kleur is userColor, de waarde die we eerder uit de invoer hebben getrokken.

We gaan een monochroom kleurenschema maken op basis van de gekozen kleur. We doen dit door een array te maken, dankzij het volgende voor lus:

 // Maak een monchromatisch kleurenschema. for (var i = 0; i < steps; i++)  colorList[i] = chromaColor.darken(i); 

Deze lus itereert over het aantal stappen dat in de variabele is gedefinieerd stappen (we hebben het al eerder ingesteld op 5, weet je nog?) Telkens als we het herhalen, wordt er een iets donkerdere tint aan de verzameling toegevoegd.

Ten slotte moeten we enkele elementen genereren met behulp van de vijf waarden in onze array. Elke keer dat we een

1. element, geef het een Achtergrond kleur volgens onze colorlist, voeg het dan toe aan kleurenschema.

    // Genereer enkele elementen. voor (var j = 0; j < colorList.length; j++)  var newItem = document.createElement('li'); newItem.style.backgroundColor = colorList[j]; colorScheme.appendChild(newItem); 

   Gedaan!

   We hebben met succes een kleurenschema-generator gebouwd die een reeks blokken uitvoert, beginnend met de geselecteerde kleur en geleidelijk steeds donkerder.

   Ons kleurenschema

   Je kunt dit verbeteren door de geplukte kleur in het midden van het bereik te plaatsen met lichtere kleuren links en donkerdere kleuren rechts, kijk in dat geval naar de video en volg de laatste stappen. U kunt ook kleurdetails toevoegen voor elk blok, zoals de hexadecimale waarde; Ik leg dit ook uit in de screencast.

   Ten slotte bevat de screencast ook instructies voor het bouwen van de kleurenschaalgenerator, dus spring erin en laat me weten hoe je verdergaat!

   Verdere bronnen

   • chroma.js op Github
   • De maker @driven_by_data (Gregor Aisch) op Twitter
     
   • Starterbestand voor deze zelfstudie
   Web ontwerp