Så här manipulerar du färger i JavaScript med Chroma.js

I dagens handledningsscreencast ska jag visa dig hur man kan manipulera färger med JavaScript. Det är rätt, JavaScript. Inte CSS. Låt oss dyka in för att se vad jag pratar om!

Titta på Screencast

Vi har alla blivit vana vid idén att CSS hanterar stilar medan JavaScript används för beteende, och de två frågorna bör hållas separata. Men när det inte går att definiera stilar direkt via CSS, som när de ställs in via användarinmatning, kommer JavaScript att göra allt tungt för dig.

Chroma.js är ett litet bibliotek som kan vara en stor hjälp med att manipulera färger, så låt oss se hur du börjar använda den.

Koppla upp den

Chroma kan dras från sin repo på Github eller kopplas till från CDNJS med den här länken:

demo

Ta en titt på den snabba demo som jag byggt för att visa dig vad som är möjligt. Vi ska bygga en färgschemangenerator som tar ett inmatat färgvärde och använder det för att mata ut ett monokromatiskt system.

Om du vill följa med när jag återskapar demoen, ta tag i filen start.html (som innehåller allt utom JavaScript som vi ska skriva) och öppna det i en kodredigerare.

Börja med att lägga till följande kodstycke mellan > taggar längst ner i html-dokumentet:

 document.addEventListener ('DOMContentLoaded', funktion () var btnGenerateColorScheme = document.querySelector ('# generera-färgschema'), btnGenerateColorScale = document.querySelector ('# generera färgskala'), colorScheme = document.querySelector ('. färgordning'), colorScale = document.querySelector ('färgskala'), steg = 5, // är företrädesvis ett udda antal chromaColor, userColor, colorList, scaleColors, scaleCount, scaleList; btnGenerateColorScheme.addEventListener 'klick', funktion () ); btnGenerateColorScale.addEventListener ('klick', funktion () );); 

Detta är en stor bit, men är mycket mindre skrämmande än du kanske först tänker! Det börjar med en händelse lyssnare DOMContentLoaded vilken väntar tills dokumentet är laddat innan du utför någon av följande funktioner. 

Därefter definierar jag ett gäng variabler som vi ska använda, med början på två knappar, sedan färgschema och colorScale behållare, då steg (ett nummer vi ska använda inom kort).

Slutligen finns det två klickhändelselysare med (ännu) tomma funktioner. Vi ska börja med den första av dessa, den btnGenerateColorScheme, vilket är (överraskande) knappen som kommer att generera ett färgschema. 

btnGenerateColorScheme


Inom den tomma funktionen, mellan de krökta stagarna börjar vi med att ställa in en tom grupp som heter colorList:

// Reinitiera färglistan. colorList = [];

När en användare klickar på knappen är det första vi behöver göra att få färgen från # Användar färg inmatning.

 // Hämta färgvärdet. userColor = document.querySelector ('# user-color'). värde;

Då måste vi återställa värdena inom listan färgschema. Detta görs genom att strippa innerhtml av .färgschema element, vilket i vårt fall är en

. Här kan vi se att vi gör innerhTML lika en tom sträng.

 // Återställ innehållet i färgschemat listan. colorScheme.innerHTML = ";

Ringer Chroma

Nu för den roliga delen! Vi initierar chroma.js-biblioteket genom att ringa chroma () och passerar i en färg:

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

Vår färg är userColor, värdet vi drog från inmatningen tidigare.

Vi ska skapa ett monokromatiskt färgschema baserat på den valda färgen. Vi gör det genom att skapa en array tack vare följande för slinga:

 // Skapa ett monokromatiskt färgschema. för (var i = 0; i < steps; i++)  colorList[i] = chromaColor.darken(i); 

Denna slinga iterates över antalet steg som definieras i variabeln steg (vi ställer den till 5 tidigare, kom ihåg?) Varje gång vi repeterar, läggs en lite mörkare nyans till samlingen.

Slutligen måste vi generera några element med de fem värdena i vår array. Varje gång vi skapar en

1. element, ge det en bakgrundsfärg enligt vår colorList, lägg sedan till det färgschema.

    // Generera några element. för (var j = 0; j < colorList.length; j++)  var newItem = document.createElement('li'); newItem.style.backgroundColor = colorList[j]; colorScheme.appendChild(newItem); 

   Gjort!

   Vi har framgångsrikt byggt en färgschemangenerator som matar ut en serie block, som börjar med den valda färgen och gradvis blir mörkare.

   Vårt färgschema

   Du kanske vill förbättra detta genom att ha den valda färgen placerad mitt i intervallet med ljusare färger till vänster och mörkare färger till höger, i så fall ta en titt på videon och följ med de sista stegen. Du kan också lägga till färgdetaljer för varje block, t.ex. hex-värdet; Jag förklarar också detta i skärmen.

   Slutligen innehåller screencast också instruktioner för att bygga färgskalagenerator, så hoppa in och låt mig veta hur du går vidare!

   Ytterligare resurser

   • chroma.js på Github
   • Dess skapare @driven_by_data (Gregor Aisch) på Twitter
     
   • Startfil för denna handledning
   Webbdesign