HSL() / HSLa – () är bra för programmatisk färg kontroll

0
46

Om du någonsin behöver hand-manipulera en färg i native CSS, HSL är ganska mycket det enda sättet. HSL (hsl() och hsla – () funktioner i CSS) står för nyans, mättnad, ljusstyrka och, om du vill, alpha. Vi har pratat om det innan men vi kan bryta ner det lite mer och göra en del intressanta saker med det.

  • Nyans: Tänk på ett färghjul. Runt 0o och 360 ° är röda. 120o är det där gröna och 240o är blues. Använd något i mellan 0 till 360. Värden över och under kommer att vara modul 360.
  • Mättnad: 0% är helt omättad (gråskala). 100% är mättade (fyrfärg).
  • Ljusstyrka: 0% är helt mörkt (svart). 100% är helt ljus (vit). 50% är genomsnittet lätthet.
  • alpha: Opacitet/Transparens värde. 0 är helt transparent. 1 är helt ogenomskinligt. 0.5 är 50% öppet.

Du kan hand-manipulera någon av dessa fyra värden och har en hyfsad känsla för vad som kommer att hända. Ändra nyans på att ta en tur runt färgcirkeln. Ändra mättnad för att få djupare eller mer dämpade färger. Ändra lätthet att i huvudsak blanda i svart eller vitt.

Du kanske har några psykiska kotletter med rgb(), att veta att rgb(255, 0, 0) är klart röda eller rgb(0, 0, 0) är svart, utan att manipulera dem för att få till en ljus lila eller börja med en forest green och få lite ljusare är inte precis mental matematik. Du kan även vara smart typ som kan identifiera färg med Hex-koder. Be David DeSandro på en fest någon gång. Fortfarande, inget alls lika intuitivt som HSL.

De av er i framkant kanske minns den första utkast av Färg-Nivå 4 med färg () – funktionen och mer intuitivt sub-funktioner. Eller, du kanske får en varm och tung med Sass färg funktioner eller ditt eget hem brygga sak. Mer makt till ya!

Se Pennan Sass Färg Funktioner av Chris Coyier (@chriscoyier) på CodePen.

Jag gillar verkligen HSL när du spelar med färg i JavaScript. Till exempel, säga att du vill generera några olika röda toner. Du kan slumpa H, S och L tätt kring vissa värden:

Se Pennan Slumpmässiga Reds av Chris Coyier (@chriscoyier) på CodePen.

För inte så länge sedan, jag i princip gjorde samma sak men roterad nyans för att animera denna stargate:

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

Om du jävlas med färg i JavaScript och vill randomisering till resultera i tilltalande färger, ge PleaseJS en omgång.

Behöver du en snabb färgväljare? Jag sätter detta tillsammans för länge sedan och jag snabbt flyttas det över till CodePen:

Se Pennan HSL Explorer, Chris Coyier (@chriscoyier) på CodePen.

Det är också HSL Färgväljare och Mothereffering HSL om du vill ha alternativ.

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

Vill du lära dig mer om färg på webben i allmänhet? Missa inte Sarah Drasner är En Nörd Guide till Färgen på Webben. Massor av stora godbitar i det att din förståelse av att arbeta med färg.

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

Jetpack WordPress plugin som körs på denna webbplats, driver inte bara relaterade inlägg nedan, men säkerhet och backup, Wiki-stöd, sök på sajten, kommentera form, sociala nätverk, och mycket mer!