Hex, RGB och HSL
Skriv färgen i det format du har, så fylls de andra i. Alla tre fälten hänger ihop.
Så ser färgen ut
Text på vitt · 3,89
Text på svart · 5,39
- Hex#e0521f
- RGBrgb(224, 82, 31)
- HSLhsl(16, 76%, 50%)
Kanaler
- Rött224
- Grönt82
- Blått31
- Nyans16°
- Mättnad76 %
- Ljushet50 %
Ljushetsskala
Samma nyans och mättnad, med ljusheten från 10 till 90 %. Klicka på en ruta för att välja den.
Så fungerar det
Hex är samma sak som RGB, bara skrivet med hexadecimala siffror. Varje par tecken står för en kanal, från 00 till ff, alltså 0 till 255.
Kortformen med tre tecken är en förkortning där varje tecken dubbleras. #f30 betyder alltså #ff3300, vilket gör att bara 4 096 av de 16,7 miljoner färgerna kan skrivas så.
HSL beskriver samma färger med nyans, mättnad och ljushet i stället för tre ljuskällor. Nyansen är en vinkel på färgcirkeln, där 0 är rött, 120 grönt och 240 blått.
HSL är enklare att arbeta med när man vill ha varianter av samma färg. Behåll nyans och mättnad och ändra bara ljusheten, så får du en skala som hänger ihop.
Omvandlingen mellan RGB och HSL är exakt åt båda hållen, men avrundningen till hela grader och procent i HSL kan flytta en kanal ett steg när man går fram och tillbaka.
Så räknar verktyget
Från RGB till HSL delas varje kanal först med 255. Ljusheten L är medelvärdet av den största och den minsta kanalen. Mättnaden S är skillnaden mellan dem delad med 1 − |2L − 1|. Nyansen H beror på vilken kanal som är störst och anges i grader. Åt andra hållet används samma sexdelade färgcirkel, och kanalerna avrundas till heltal. Raderna med hex, RGB och HSL visar heltal, medan nyanserna längst ned räknas med de oavrundade värdena.
Exempel
#1e90ff är rött 30, grönt 144 och blått 255, alltså 0,118, 0,565 och 1. Störst är 1 och minst 0,118, så L = (1 + 0,118) / 2 = 0,559, eller 55,9 %. Skillnaden 0,882 delad med 1 − |2 × 0,559 − 1| = 0,882 ger S = 1, alltså 100 %. Blått är störst, så H = 60 × ((0,118 − 0,565) / 0,882 + 4) = 209,6 grader.
Verktyget skriver färgen som hsl(210, 100%, 56%). Skriver du in den texten får du tillbaka #1f8fff, inte #1e90ff, eftersom avrundningen till hela grader och procent har flyttat rött och grönt ett steg var.
HSL-ljushet är inte upplevd ljushet
CSS Color 4 påpekar att gult och blått båda har HSL-ljusheten 50 %, men att gult ser mycket ljusare ut. Verktygets egna kontrastsiffror visar samma sak: hsl(60, 100%, 50%) ger kvoten 1,07 mot vitt och hsl(240, 100%, 50%) ger 8,59. Nyanserna under färgen behåller nyans och mättnad och ändrar bara ljusheten i steg om 10 procentenheter. De hänger därför ihop i kulör, men stegen ser inte lika stora ut.
Det verktyget läser
Fälten följer CSS Color 4: hex med tre, fyra, sex eller åtta tecken, rgb() med tal eller procent, där 100 % är 255, och hsl() med nyansen i grader eller i enheterna deg, rad, grad och turn. Värdena får skiljas med kommatecken eller mellanslag. rgb(50%, 50%, 50%) blir därför rgb(128, 128, 128), och hsl(0.5turn, 100%, 50%) får nyansen 180 grader, alltså #00ffff.
Genomskinlighet, i hex med fyra eller åtta tecken, som fjärde värde eller efter ett snedstreck, tas bort: verktyget räknar med täckande färg och skriver hur stor genomskinligheten var. Värden utanför sina intervall, som rgb(300, 0, 0), avvisas så att ett skrivfel syns, fast CSS klämmer dem.