HSL() / HSLa() is geweldig voor de programmatische kleur controle

0
49

Als je ooit nodig hebt om de hand-het manipuleren van een kleur in oorspronkelijke CSS, HSL is vrijwel de enige manier. HSL (de hsl – () en hsla() functies in CSS) staat voor hue, saturation, lightness, en, optioneel, de alpha. We hebben eerder over gepraat, maar we breken naar beneden een beetje meer, en doe wat interessante dingen mee.

  • Tint: Denk aan een kleurenwiel. Rond 0o en 360o rood. 120o is waar greens zijn en 240o zijn blues. Gebruik iets tussen 0-360. Waarden boven en onder worden modulus 360.
  • Verzadiging: 0% is helemaal onverzadigde (grijstinten). 100% is volledig verzadigd (full color).
  • Lichtheid: 0% is het helemaal donker (zwart). 100% is volledig licht (wit). 50% is het gemiddelde licht.
  • alpha: de Opaciteit/Transparantie-waarde. 0 is volledig transparant. 1 is volledig ondoorzichtig. 0,5 is voor 50% transparant.

U kunt met de hand te manipuleren een van deze vier waarden en een behoorlijk gevoel van wat gaat gebeuren. Veranderen van de tint voor een reis rond de kleurencirkel. Verander de verzadiging om dieper of meer gedempte kleuren. Wijzig de lichtheid in wezen mix in zwart of wit.

Je zou kunnen hebben een aantal mentale karbonades met rgb(), wetende dat rgb(255, 0, 0) is duidelijk rood of rgb(0, 0, 0) is zwart, maar het manipuleren van mensen om te komen tot een licht paarse of te beginnen met een groen bos en aan een kleine aansteker is niet precies mentale wiskunde. Je zou zelfs de slimme soort die zich kan identificeren kleur door de Hex-codes. Vraag David DeSandro op een feestje ergens. Toch is niets zo intuïtief als de HSL.

Die van u op het snijvlak herinnert zich wellicht de ontwerptekst van Kleur, Niveau 4, met de kleur () – functie en meer intuïtieve sub-functies. Of, je kan je warm en zwaar met Sass kleur functies of uw eigen home-brew ding. Meer power to ya!

Zie de Pen Sass Kleur Functies van Chris Coyier (@chriscoyier) op CodePen.

Ik hou echt van de HSL-bij het spelen met kleur in JavaScript. Zeg bijvoorbeeld dat u wilt genereren een aantal verschillende rode tinten. Je zou kunnen randomiseren de H, S en L strak rond een aantal waarden:

Zie de Pen Willekeurige Rood door Chris Coyier (@chriscoyier) op CodePen.

Niet lang geleden ben ik in feite deed hetzelfde, maar geroteerd de tint te animeren deze stargate:

Zie de Pen Sparklegate door Chris Coyier (@chriscoyier) op CodePen.

Als je knoeien met kleur in JavaScript en wilt randomisatie te resulteren in aantrekkelijke kleuren, geven PleaseJS een spin.

Behoefte aan een snelle kiezen van een kleur? Ik zet deze samen eeuwen geleden en ik al snel heeft het over CodePen:

Zie de Pen HSL Explorer door Chris Coyier (@chriscoyier) op CodePen.

Er is ook de HSL-Kleurkiezer en Mothereffering HSL als u wilt dat de opties.

Zie de Pen HSL door Graham Pyne (@gpyne) op CodePen.

Wil je meer informatie over het gebruik van kleur op het web in het algemeen? Niet te missen Sarah Drasner is Een Nerd ‘ s Guide om de Kleur op het Web. Veel leuke goodies in er om je kennis van het werken met kleur.

Zie de Pen HSL van Dan Wilson (@danwilson) op CodePen.

De Jetpack WordPress plugin draait op deze site, het voeden niet alleen de gerelateerde berichten hieronder, maar de beveiliging en de back-ups, Markdown ondersteuning, site search, reactieformulier, sociale netwerk-verbindingen, en meer!