Heks, RGB og HSL
Skriv fargen i det formatet du har, så fylles de andre ut. Alle tre feltene henger sammen.
Slik ser fargen ut
Tekst på hvitt · 3,89
Tekst på svart · 5,39
- Heks#e0521f
- RGBrgb(224, 82, 31)
- HSLhsl(16, 76%, 50%)
Kanaler
- Rødt224
- Grønt82
- Blått31
- Kulør16°
- Metning76 %
- Lyshet50 %
Lyshetsskala
Samme kulør og metning, med lysheten fra 10 til 90 %. Klikk på en rute for å velge den.
Slik fungerer det
Heks er det samme som RGB, bare skrevet med heksadesimale sifre. Hvert par med tegn står for én kanal, fra 00 til ff, altså 0 til 255.
Kortformen med tre tegn er en forkortelse der hvert tegn dobles. #f30 betyr altså #ff3300, noe som gjør at bare 4 096 av de 16,7 millioner fargene kan skrives slik.
HSL beskriver de samme fargene med kulør, metning og lyshet i stedet for tre lyskilder. Kuløren er en vinkel på fargesirkelen, der 0 er rødt, 120 grønt og 240 blått.
HSL er enklere å arbeide med når man vil ha varianter av samme farge. Behold kulør og metning og endre bare lysheten, så får du en skala som henger sammen.
Omregningen mellom RGB og HSL er nøyaktig begge veier, men avrundingen til hele grader og prosent i HSL kan flytte en kanal ett steg når man går fram og tilbake.
Slik regner verktøyet
Fra RGB til HSL deles hver kanal først på 255. Lysheten L er gjennomsnittet av den største og den minste kanalen. Metningen S er forskjellen mellom dem delt på 1 − |2L − 1|. Kuløren H avhenger av hvilken kanal som er størst, og oppgis i grader. Den andre veien brukes den samme fargesirkelen delt i seks, og kanalene rundes av til heltall. Linjene med heks, RGB og HSL viser heltall, mens lyshetsskalaen nederst regnes med de uavrundede verdiene.
Eksempel
#1e90ff er rødt 30, grønt 144 og blått 255, altså 0,118, 0,565 og 1. Størst er 1 og minst 0,118, så L = (1 + 0,118) / 2 = 0,559, eller 55,9 %. Forskjellen 0,882 delt på 1 − |2 × 0,559 − 1| = 0,882 gir S = 1, altså 100 %. Blått er størst, så H = 60 × ((0,118 − 0,565) / 0,882 + 4) = 209,6 grader.
Verktøyet skriver fargen som hsl(210, 100%, 56%). Skriver du inn den teksten, får du tilbake #1f8fff, ikke #1e90ff, fordi avrundingen til hele grader og prosent har flyttet rødt og grønt ett steg hver.
HSL-lyshet er ikke opplevd lyshet
CSS Color 4 påpeker at gult og blått begge har HSL-lysheten 50 %, men at gult ser mye lysere ut. Verktøyets egne kontrasttall viser det samme: hsl(60, 100%, 50%) gir forholdet 1,07 mot hvitt, og hsl(240, 100%, 50%) gir 8,59. Lyshetsskalaen under fargen beholder kulør og metning og endrer bare lysheten i steg på 10 prosentpoeng. Rutene henger derfor sammen i farge, men stegene ser ikke like store ut.
Det verktøyet leser
Feltene følger CSS Color 4: heks med tre, fire, seks eller åtte tegn, rgb() med tall eller prosent, der 100 % er 255, og hsl() med kuløren i grader eller i enhetene deg, rad, grad og turn. Verdiene kan skilles med komma eller mellomrom. rgb(50%, 50%, 50%) blir derfor rgb(128, 128, 128), og hsl(0.5turn, 100%, 50%) får kuløren 180 grader, altså #00ffff.
Gjennomsiktighet, i heks med fire eller åtte tegn, som fjerde verdi eller etter en skråstrek, fjernes: verktøyet regner med dekkende farge og skriver hvor stor gjennomsiktigheten var. Verdier utenfor områdene sine, som rgb(300, 0, 0), avvises slik at en skrivefeil synes, selv om CSS klemmer dem.