HSL() / HSLa() er flott for programmatiske kontroll farge

0
36

Hvis du noen gang trenger å hånd-manipulere en farge i native CSS, HSL er ganske mye den eneste måten. HSL (hsl() og hsla() funksjoner i CSS) står for kulør, metning, lysstyrke og eventuelt alpha. Vi har snakket om det før, men vi kan bryte det ned litt mer, og gjøre noen interessante ting med det.

  • Kulør: Tenk på et fargehjul. Rundt 0o og 360o er røde. 120o er der greenene og 240o er blues. Bruk alt i mellom 0-360. Verdier over og under vil være modulus 360.
  • Metning: 0% er helt umettede (gråtoner). 100% er fullt mettet, (full farge).
  • Letthet: 0% er helt mørk (svart). 100% er helt lys (hvit). 50% er gjennomsnittlig letthet.
  • alfa: Opacity/Transparency verdi. 0 er fullstendig gjennomsiktig. 1 er fullstendig ugjennomsiktig. 0.5 er 50% gjennomsiktig.

Du kan hånd-manipulere noen av de fire verdier, og har en anstendig følelse av hva som kommer til å skje. Endre fargetone for å ta en tur rundt i fargesirkelen. Endre fargemetning for å få dypere eller mer dempede farger. Endrer lysheten hovedsak bland i sort eller hvit.

Du kan ha noen psykisk koteletter med rgb(), vel vitende om at rgb(255, 0, 0) er klart rød-eller en rgb(0, 0, 0) er svart, men å manipulere dem til å komme til en lys lilla eller starte med en grønn skog og blir litt lettere er ikke akkurat mental math. Du kan selv være den smarte typen som kan identifisere farge ved Hex-koder. Spør David DeSandro på en fest en gang. Likevel, ingenting nesten like intuitiv som HSL.

De av dere som er på cutting edge kanskje husker de arbeider utkast av Farge Nivå 4 med farge () – funksjonen, og mer intuitiv sub-funksjoner. Eller, du kan bli varmt og tungt med Sass farge funksjoner eller ditt eget hjem brygge ting. Mer makt til deg!

Se Penn Sass Farge Funksjoner av Chris Coyier (@chriscoyier) på CodePen.

Jeg liker HSL når du spiller med farge i JavaScript. For eksempel, si at du ønsker å generere noen forskjellige røde toner. Du kan randomize H, S og L tett rundt noen verdier:

Se Penn Tilfeldig Reds av Chris Coyier (@chriscoyier) på CodePen.

For ikke lenge siden, jeg i utgangspunktet gjorde det samme, men rotert hue for å animere dette stargate:

Se Penn Sparklegate av Chris Coyier (@chriscoyier) på CodePen.

Hvis du er å rote med farge i JavaScript, og vil randomisering til å resultere i tiltalende farger, gi PleaseJS en spinn.

Trenger du en rask fargevelgeren? Jeg satt dette sammen for lenge siden, og jeg raskt portet over til CodePen:

Se Penn HSL Explorer ved Chris Coyier (@chriscoyier) på CodePen.

Det er også HSL fargevelgeren og Mothereffering HSL hvis du vil at valgene.

Se Penn HSL av Graham Pyne (@gpyne) på CodePen.

Ønsker du å lære mer om farger på nettet generelt? Ikke gå glipp av Sarah Drasner er En Nerd ‘ s Guide til Farger på Nettet. Massevis av gode godbiter i det å opp din forståelse av å arbeide med farge.

Se Penn HSL av Dan Wilson (@danwilson) på CodePen.

Jetpack WordPress plugin går på dette nettstedet, slår ikke bare relaterte innlegg nedenfor, men sikkerhet og sikkerhetskopiering, Markdown-støtte, søk nettstedet, kommentar form, sosiale nettverk-tilkoblinger, og mer!