HSL til HEX

Sammenlign HSL med HEX

CSS 3 introducerer en anden måde at definere farve ved hjælp af HSL (fra engelsk. Hue, Saturation, Lightness). er en model, hvor farve bestemmes af tre parametre: farvetone, mætning og lyshed. Lad os se på hver enkelt parameter separat. Den vigtigste fordel ved HSL er evnen til at specificere farveegenskaber uafhængigt af hinanden. Dette åbner enorme muligheder for dig. Du kan nemt gøre farven lysere, mørkere, mere mættet eller desatureret. Og samtidig bevare sin skygge. Eller omvendt - skift nuancer uden at ændre deres mætning eller lysstyrke. Ofte bruges præprocessorer til at bruge sådanne funktioner, men det er muligt uden dem. Funktionen hsl () bruges til at specificere HSL-farver. Funktionen tager tre værdier, adskilt af et komma: Farvetone, mætning og lyshed. Ved at ændre værdierne for mætning og lysstyrke kan du få tilstødende nuancer for en bestemt farve.

I de fleste tilfælde er det muligt at genkende en farve ved en hex-kode under hensyntagen til kun de første cifre i parrene. I eksemplet nedenfor er det klart, at farven er blandet med meget rødt, lidt blåt og slet ikke grønt. Forståelse af farve ved hex-kode giver en webdesigner mulighed for at navigere sidekoden hurtigere, og desuden kan du altid imponere kolleger eller klienter ved at sige Ah, hvilken vidunderlig skygge af burgunder. Du kan også let ændre lysstyrke, nuance eller mætning af en farve ved kun at redigere dens hexadecimale kode. I det første eksempel nedenfor ændres et af parene i trin på 10%, mens farveens lysstyrke øges. I det andet eksempel stiger lysstyrken, men mætningen falder. RGB-værdier kan også specificeres ved hjælp af hexadecimal (HEX) farveværdier i formen: #RRGGBB, hvor RR (rød), GG (grøn) og BB (blå) er hexadecimale værdier fra 00 til FF (det samme som decimal 0- 255). I modsætning til decimalsystemet er det hexadecimale system, som navnet antyder, baseret på tallet 16.