Designere og webudviklere bruger ofte HEX-kode i deres CSS-filer for at fortælle, hvilken farve et bestemt element vil være. Denne metode har sine egne fordele og mangler. Det hjælper enormt, da det standardiserer hele arbejdsgangen blandt forskellige udviklere.Du kan bruge forskellige former for skærm med varierende farvenøjagtighed og stadig holde fast i den originale farvepalet uden nogen forvirring. Men ofte er det besværligt at bruge HEX-koder til at repræsentere farver. Selve nummeret betyder intet for en menneskelig udvikler, og det kan hindre kreativitet.Mens du kan bruge en lang række farvevælgere fra Adobe til W3Schools HTML-farvevælger, kan skift mellem dem og din editor bryde koncentrationen og gøre dit liv meget vanskeligere.

For at afhjælpe denne situation, lad os se på en farvevælger, som du kan installere som et plugin til Atom Text Editor, hvilket gør hele processen meget glattere.  Du skal have Atom installeret på dit system. Når du har installeret det, kan du installere denne særlige pakke oven på den. Den har mere end 1.7 millioner downloads, og det får det til at skille sig ud, hvis du beslutter at søge via Atom Editor selv.

Installation af farvevælger

Åbn Indstillinger [CTRL +,] i din Atom Editor og i Installere sektion søg efter nyt pakker.

Installer farvevælger (version 2.3.0 eller senere), og når den er installeret, skal du huske at Aktiver det.

Når alt det er gjort. Du kan gå videre og åbne en ny tekstfil, og vi kan begynde at teste den.

Forskellige farvevalgmuligheder

Åbn en ny fil inde i Atom, og med den skal du bruge tastebindingen [CTRL + ALT + C], hvis du er på Windows eller Linux, eller brug [CMD + SHIFT + C], hvis du bruger Mac OSX.

Du vil se et antal skydere og forskellige bjælker til højre. Den ene til højre er at vælge den farve, der er tilbage til den, er bjælken, der bestemmer opaciteten af ​​din farve, og firkanten i midten bestemmer, hvilken skygge af en given farve der skal vælges.

Du kan gå i ekstrem lys skygge, der ser hvid ud, uanset hvad det oprindelige valg af din farve var, eller du kan vælge en helt nedtonet version af den eller sort. Den normale brugssag indebærer at vælge noget imellem, der passer til din brugssag.

For eksempel bruger folk forskellige farver til det samme element for at gøre webstedet lidt mere interaktivt. Hyperlinks kan tildeles farve blå, og når du holder musen over den, skifter farven til sort.

Opacitet er endnu en vigtig faktor, som udviklere bruger til at skjule elementer under en farvet patch, og når brugeren udfører en bestemt handling, går opaciteten til nul, og elementet nedenunder bliver synligt.

Forskellige standarder

Du vil bemærke, at farverne kan vises i forskellige standarder, især i RGB (rødgrøn og blå), HEX og HSL-formater.

Lad os starte med HEX-format, da det bruges ganske lidt, i det mindste på begynderniveau.

Det er simpelthen et hexadecimalt ciffer (som er et nummereringssystem, der går fra 0 til 9 og derefter har -en repræsenterer 10, b repræsenterer 11 og så videre, indtil 15, som er repræsenteret ved hjælp af f). Vælg en farve ved hjælp af farvevælgerpakken, klik på HEX-knappen under widgeten, og du vil se, at den tilsvarende hex-kode for den farve indsættes i din editor.

Den næste standard bruger RGB, som viser, hvilken procentdel af en farve der er rød, hvilken procent er grøn og hvor meget der er blå.

Den samme farve som ovenfor har RGB-repræsentationen som følger

Endelig skal du vide om HSL, der står for Hue, Saturation og Lightness.

Farvetone repræsenterer hvilken farve elementet har. Det kan variere fra rød ende af spektret til blå, og det ignorerer simpelthen farverne som kombinationer af rød, grøn og blå (i det mindste fra udviklerens synspunkt).  Dette beskrives ofte som et farvehjul med rødt, grønt og blåt 60 grader fra hinanden, men farvevælgeren havde åbnet det op til en enkelt bjælke til højre.

Den næste ting at bekymre sig om er mætning, der beskriver, hvor intens farven bliver. Helt mættede farver har ingen gråtoner, 50% mættede er lysere farver og 0% kan ikke skelnes fra grå. Det firkantede rum er perfekt til at vælge dette.

Lysstyrke beskriver, hvor lyse farverne skal vises. 100% lyse farver kan ikke skelnes fra hvide, og 0% ser helt sorte ud. For eksempel, hvis dit websted har en masse læsemateriale i sig, vil du have en mindre lys løsning for at gøre det lettere for læseren at engagere sig. Så det er HSL.

Konklusion

Redaktører som Atom og Visual Studio-kode har en hel etik med nyttige pakker og temaer bygget omkring dem. Farvevælger er kun et eksempel, som en udvikler kan bruge til at afstå unødvendige ture til W3Schools eller Stack Overflow. Brug af farvevælger kræver stadig, at du har en farvenøjagtig skærm, der er korrekt kalibreret.

Når du først har valgt farvepaletten til dit projekt, kan du dog begynde at opbygge projekter hurtigere og glattere ved hjælp af pakker som farvevælger.