Designere og webutviklere bruker ofte HEX-kode i CSS-filene sine for å fortelle hvilken farge et bestemt element skal være. Denne metoden har sine egne fordeler og mangler. Det hjelper enormt da det standardiserer hele arbeidsflyten blant forskjellige utviklere.Du kan bruke forskjellige typer skjerm med varierende fargenøyaktighet og fremdeles holde deg til den originale fargepaletten uten forvirring. Men ofte er det tungvint å bruke HEX-koder for å representere farger. Selve tallet betyr ingenting for en menneskelig utvikler, og det kan hindre kreativitet.Mens du kan bruke et mangfold av fargevelgere fra Adobe til W3Schools HTML-fargevelger, kan bytte mellom dem og redaktøren bryte konsentrasjonen og gjøre livet ditt mye vanskeligere.

For å rette opp denne situasjonen, la oss se på en fargevelger som du kan installere som et plugin til Atom Text Editor, noe som gjør hele prosessen mye jevnere.  Du må ha Atom installert på systemet ditt. Når du har installert det, kan du installere denne pakken på toppen av den. Den har mer enn 1.7 millioner nedlastinger, og det skiller seg ut, hvis du bestemmer deg for å søke via Atom Editor selv.

Installere Color Picker

Åpne opp Innstillinger [CTRL +,] i Atom Editor, og i Installere seksjon søk etter nye pakker.

Installer fargevelger (versjon 2.3.0 eller senere) og husk å gjøre det når den er installert Muliggjøre den.

Når alt er gjort. Du kan fortsette og åpne en ny tekstfil, så kan vi begynne å teste den.

Ulike fargevalgalternativer

Åpne en ny fil i Atom, og bruk den med tastebindingen [CTRL + ALT + C] hvis du er på Windows eller Linux, eller bruk [CMD + SHIFT + C] hvis du bruker Mac OSX.

Du vil se en rekke glidebrytere og forskjellige stolper til høyre. Den til høyre mest er å velge fargen som er igjen til den, er linjen som bestemmer fargenes opasitet og firkanten i midten bestemmer hvilken nyanse av en gitt farge som skal velges.

Du kan få ekstremt lys nyanse som ser hvit ut, uansett hvilket fargevalg du valgte, eller du kan velge en helt grå utgave av den eller svart. Den vanlige brukssaken innebærer å velge noe i mellom som passer til brukssaken.

For eksempel bruker folk forskjellige farger for det samme elementet for å få siden til å føles litt mer interaktiv. Hyperkoblingene kan tildeles blå farge, og når du holder musen over den, endres fargen til svart.

Opacity er enda en viktig faktor som utviklere bruker for å skjule elementer under en farget patch, og når brukeren utfører en bestemt handling, går opacity til null og elementet under blir synliggjort.

Ulike standarder

Du vil merke at fargene kan vises i forskjellige standarder, spesielt i RGB (rødgrønn og blå), HEX og HSL-formater.

La oss starte med HEX-format, siden det brukes ganske mye, i det minste på nybegynnernivå.

Det er ganske enkelt et heksadesimalt siffer (som er et nummereringssystem som går fra 0 til 9 og deretter har en representerer 10, b representerer 11 og så videre, til 15 som er representert ved hjelp av f). Velg en farge ved hjelp av fargevelgerpakken, klikk på HEX-knappen under widgeten og du vil se at den tilsvarende heksekoden for den fargen limes inn i redigeringsprogrammet ditt.

Den neste standarden bruker RGB som viser hvilken prosentandel av en farge som er rød, hvilken prosent er grønn og hvor mye som er blå.

Den samme fargen som ovenfor har RGB-representasjonen som følger

Til slutt må du vite om HSL som står for fargetone, metning og lyshet.

Hue representerer hvilken farge elementet har. Det kan variere fra rød ende av spekteret helt til blått, og det ignorerer ganske enkelt fargene som kombinasjoner av rødt, grønt og blått (i det minste fra utviklerens synspunkt).  Dette blir ofte beskrevet som et fargehjul med rødt, grønt og blått 60 grader fra hverandre, men fargevelgeren hadde åpnet det for en enkelt stolpe til høyre.

Den neste tingen å bekymre seg for er metning, som beskriver hvor intens fargen kommer til å være. Fullstendig mettede farger har ingen gråtoner, 50% mettede er lysere farger og 0% kan ikke skilles fra grå. Den firkantede plassen er perfekt for å velge dette.

Lyshet beskriver hvor lyse fargene skal vises. 100% lyse farger kan ikke skilles fra hvitt, og 0% ser helt svarte ut. For eksempel, hvis nettstedet ditt inneholder mye lesestoff, vil du ha en mindre lys løsning for å gjøre det lettere for leseren å engasjere seg. Så det er HSL.

Konklusjon

Redaktører som Atom og Visual Studio-kode har en hel etos med nyttige pakker og temaer bygget rundt seg. Fargevelger er bare et eksempel som en utvikler kan bruke til å avstå unødvendige turer til W3Schools eller Stack Overflow. Hvis du bruker fargevelger, må du fremdeles ha en fargeneøyaktig skjerm som er riktig kalibrert.

Når du har bestemt fargepaletten for prosjektet ditt, kan du imidlertid begynne å bygge prosjekter raskere og jevnere ved hjelp av pakker som Color picker.