HSL till HEX

Jämför HSL med HEX

CSS 3 introducerar ett annat sätt att definiera färg med hjälp av HSL (från engelska. Hue, Saturation, Lightness). är en modell i vilken färg bestäms av tre parametrar: nyans, mättnad och ljushet. Låt oss ta en titt på varje parameter separat. Den viktigaste fördelen med HSL är förmågan att specificera färgegenskaper oberoende av varandra. Detta öppnar enorma möjligheter för dig. Du kan enkelt göra färgen ljusare, mörkare, mer mättad eller desaturerad. Och samtidigt som skuggan bibehålls. Eller tvärtom - ändra nyanser utan att ändra mättnad eller ljusstyrka. Ofta används förprocessorer för att använda sådana funktioner, men det är möjligt utan dem. Funktionen hsl () används för att ange HSL-färger. Funktionen tar tre värden, separerade med ett komma: Nyans, mättnad och ljushet. Genom att ändra värdena på mättnad och ljusstyrka kan du få intilliggande nyanser för en viss färg.

I de flesta fall är det möjligt att känna igen en färg med en hexkod, med endast hänsyn till parens första siffror. I exemplet nedan är det tydligt att färgen blandas med mycket rött, lite blått och inget grönt alls. Att förstå färg med hex-kod gör att en webbdesigner kan navigera i sidkoden snabbare, och dessutom kan du alltid imponera på kollegor eller kunder genom att säga Ah, vilken underbar nyans av vinröd. Du kan också enkelt ändra ljusstyrka, nyans eller mättnad för en färg genom att endast redigera dess hexadecimala kod. I det första exemplet nedan ändras ett av paren i steg om 10%, medan färgens ljusstyrka ökar. I det andra exemplet stiger ljusstyrkan, men mättnaden sjunker. RGB-värden kan också anges med hexadecimala (HEX) färgvärden i formen: #RRGGBB, där RR (röd), GG (grön) och BB (blå) är hexadecimala värden från 00 till FF (samma som decimal 0- 255). Hexadecimalsystemet, i motsats till decimalsystemet, bygger, som namnet antyder, på siffran 16.