Designere og nettutvikler bruker ofte hex -kode i CSS -filene sine for å fortelle hvilken farge et bestemt element kommer til å bli. Denne metoden har sine egne fordeler og mangler. Det hjelper enormt når det standardiserer hele arbeidsflyten blant forskjellige utviklere.Du kan bruke forskjellige typer visninger med varierende fargemyndighet og fremdeles holde deg til den originale fargepaletten uten noen forvirring. Men ofte er det tungvint å bruke hex -koder for å representere farger. Antallet i seg selv betyr ingenting for en menneskelig utvikler, og som kan hindre kreativiteten.Selv om du kan bruke et mangfold av fargeplukkere fra Adobe til W3Schools HTML -fargevalg, kan du bytte mellom dem og redaktøren din bryte konsentrasjonen og gjøre livet ditt mye vanskeligere.

For å avhjelpe denne situasjonen, la oss se på en fargelukker som du kan installere som en 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 spesielle pakken på toppen av den. Den har mer enn 1.7 millioner nedlastinger og det gjør at det skiller seg ut, hvis du bestemmer deg for å søke via atom -redaktøren selv.

Installere fargelukker

Åpne opp Innstillinger [Ctrl +,] i din atomredigerer, og i Installere Seksjonssøk etter nytt Pakker.

Installer fargevelger (versjon 2.3.0 eller nyere) og når det først er installert, husk å Muliggjøre den.

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

Ulike fargeplukkemuligheter

Åpne opp en ny fil inne i atom, og med det åpent bruk KeyBinding [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 barer til høyre. Den som er mest til høyre er å velge farge som er venstre til den, er baren som bestemmer opaciteten til fargen din og torget i midten bestemmer hvilken nyanse av en gitt farge som vil bli valgt.

Du kan gå ekstremt lett skygge som vil se hvitt ut uansett hva det første valget av fargen din var, eller du kan velge en helt gråtonende versjon av den eller svart. Den normale brukssaken innebærer å velge noe som passer din brukssak.

For eksempel bruker folk forskjellige farger for det samme elementet for å få nettstedet til å føle seg litt mer interaktivt. Hyperkoblingene kan tilordnes fargeblå, og når du holder musen over den, endres fargen til svart.

Opacitet er nok en viktig faktor som utviklere bruker for å skjule elementer under en farget lapp, og når brukeren utfører en viss handling, går opaciteten til null og elementet under blir synliggjort.

Forskjellige standarder

Du vil legge merke til at fargene kan vises i forskjellige standarder, spesielt i RGB (Red Green and Blue), 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 heksadesimal siffer (som er et nummereringssystem som går fra 0 til 9 og deretter har en Representere 10, b representerer 11 og så videre, til 15 som er representert ved bruk av f). Velg en farge ved hjelp av Color Picker -pakken, klikk på HEX -knappen under widgeten, og du vil se at den tilsvarende hex -koden for den fargen er limt inn i redigereren din.

Neste standard bruker RGB som viser hvilken prosent av en farge som er rød, hvilken prosent er grønn og hvor mye som er blå.

Samme farge som ovenfor har RGB -representasjonen som følger

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

Fargetone 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 beskrives ofte som et fargehjul med rødt, grønt og blått 60 grader bortsett fra hverandre, men fargelukker hadde åpnet det for en enkelt bar til høyre.

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

Letthet beskriver hvor lyse fargene kommer til å vises. 100% lysfarger kan ikke skilles fra hvite og 0% virker helt svarte. For eksempel, hvis nettstedet ditt har mye lesestoff i seg, vil du at en mindre lys løsning skal gjøre det lettere for leseren å engasjere seg. Så det er HSL.

Konklusjon

Redaktører som Atom og Visual Studio Code har en hel etos av nyttige pakker og temaer bygget rundt seg. Color Picker er bare ett eksempel som en utvikler kan bruke for å gi avkall på unødvendige turer til W3Schools eller Stack Overflow. Å bruke Color Picker krever fortsatt at du har en farge nøyaktig skjerm som er riktig kalibrert.

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