Hex, RGB og HSL
Skriv farven i det format, du har, så udfyldes de andre. Alle tre felter hænger sammen.
Sådan ser farven ud
Tekst på hvidt · 3,89
Tekst på sort · 5,39
- Hex#e0521f
- RGBrgb(224, 82, 31)
- HSLhsl(16, 76%, 50%)
Kanaler
- Rød224
- Grøn82
- Blå31
- Kulør16°
- Mætning76 %
- Lyshed50 %
Lyshedsskala
Samme kulør og mætning, med lysheden fra 10 til 90 %. Klik på et felt for at vælge det.
Sådan virker det
Hex er det samme som RGB, blot skrevet med hexadecimale cifre. Hvert par tegn står for én kanal, fra 00 til ff, altså 0 til 255.
Kortformen med tre tegn er en forkortelse, hvor hvert tegn fordobles. #f30 betyder altså #ff3300, hvilket gør, at kun 4.096 af de 16,7 millioner farver kan skrives sådan.
HSL beskriver de samme farver med kulør, mætning og lyshed i stedet for tre lyskilder. Kuløren er en vinkel på farvecirklen, hvor 0 er rødt, 120 grønt og 240 blåt.
HSL er nemmere at arbejde med, når man vil have varianter af samme farve. Behold kulør og mætning og ændr kun lysheden, så får du en skala, der hænger sammen.
Omregningen mellem RGB og HSL er nøjagtig begge veje, men afrundingen til hele grader og procent i HSL kan flytte en kanal et trin, når man går frem og tilbage.
Sådan regner værktøjet
Fra RGB til HSL deles hver kanal først med 255. Lysheden L er gennemsnittet af den største og den mindste kanal. Mætningen S er forskellen mellem dem delt med 1 − |2L − 1|. Kuløren H afhænger af, hvilken kanal der er størst, og angives i grader. Den anden vej bruges den samme seksdelte farvecirkel, og kanalerne rundes til heltal. Rækkerne med hex, RGB og HSL viser heltal, mens lyshedsskalaen nederst regnes med de uafrundede værdier.
Eksempel
#1e90ff er rød 30, grøn 144 og blå 255, altså 0,118, 0,565 og 1. Størst er 1 og mindst 0,118, så L = (1 + 0,118) / 2 = 0,559, eller 55,9 %. Forskellen 0,882 delt med 1 − |2 × 0,559 − 1| = 0,882 giver S = 1, altså 100 %. Blå er størst, så H = 60 × ((0,118 − 0,565) / 0,882 + 4) = 209,6 grader.
Værktøjet skriver farven med kuløren 210, mætningen 100 % og lysheden 56 %. Skriver du de tal ind igen, får du #1f8fff tilbage, ikke #1e90ff, fordi afrundingen til hele grader og procent har flyttet rød og grøn et trin hver.
HSL-lyshed er ikke oplevet lyshed
CSS Color 4 påpeger, at gul og blå begge har HSL-lysheden 50 %, men at gul ser meget lysere ud. Værktøjets egne kontrasttal viser det samme: fuldt mættet gul med kuløren 60 og lysheden 50 % giver forholdet 1,07 mod hvid, og blå med kuløren 240 og samme mætning og lyshed giver 8,59. Lyshedsskalaen under farven beholder kulør og mætning og ændrer kun lysheden i trin på 10 procentpoint. Den hænger derfor sammen i kulør, men trinene ser ikke lige store ud.
Det, værktøjet læser
Felterne følger CSS Color 4: hex med tre, fire, seks eller otte tegn, rgb() med tal eller procent, hvor 100 % er 255, og hsl() med kuløren i grader eller i enhederne deg, rad, grad og turn. Værdierne må adskilles med kommaer eller mellemrum. rgb() med 50 % i alle tre kanaler bliver derfor til rgb(128, 128, 128), og hsl() med kuløren 0.5turn, fuld mætning og lysheden 50 % får kuløren 180 grader, altså #00ffff.
Gennemsigtighed, i hex med fire eller otte tegn, som fjerde værdi eller efter en skråstreg, fjernes: værktøjet regner med dækkende farve og skriver, hvor stor gennemsigtigheden var. Værdier uden for deres intervaller, som rgb(300, 0, 0), afvises, så en tastefejl kan ses, selv om CSS klemmer dem.