HEX, RGB, HSL, CMYK og tjek af tekstkontrast

En farvekode er én farve skrevet i en anden notation. HEX, RGB og HSL beskriver det samme lys på en skærm, så de kan omregnes præcist til hinanden, bortset fra afrundinger. CMYK beskriver blæk på papir, så omregningen fra skærmværdier er kun et estimat. WCAG-kontrastforholdet er et separat tal, der sammenligner, hvor lyse to farver er i forhold til hinanden, og det afgør, om tekst er læselig. Indsæt en farve i farvekonverteren for at se alle formater på én gang.

FarvekonverterBrug for farven i et andet formatPrøv gratis

Hvis den farve, du skal bruge, står inde i et foto, et logo eller et skærmbillede, så aflæs den fra pixlen med farvevælgeren fra billede først, og indsæt derefter HEX-koden her. Sådan vælger du en præcis farve fra et billede forklarer trinene.

Hex og RGB er de samme tal

En HEX-kode er tre par hexadecimale cifre. #34D6A0 indeholder en rød, en grøn og en blå værdi. Hvert par er et tal fra 00 til FF, som svarer til 0 til 255 i decimal. Så 34 er 52, D6 er 214 og A0 er 160, og RGB-formen er rgb(52, 214, 160).

At skrive tallet i hexadecimal ændrer kun, hvordan det ser ud. Den korte form #abc betyder #aabbcc, hvor hvert ciffer er fordoblet. En otte-cifret kode tilføjer et alfapar til sidst, fra 00 for helt transparent til FF for helt uigennemsigtig, så #34D6A080 er nogenlunde halvt transparent. RGBA skriver den samme alfa som et tal fra 0 til 1.

CSS accepterer også farvenavne. rebeccapurple er #663399. Konverteren læser navne gennem selve browseren, så ethvert navn, browseren kender, virker.

HSL beskriver en farve, sådan som mennesker beskriver den

HSL står for nuance, mætning og lysstyrke (hue, saturation, lightness). Nuancen er en vinkel rundt på et farvehjul: rød er 0 grader, grøn er 120 og blå er 240. Mætning siger, hvor langt farven er fra gråt, og lysstyrke siger, hvor langt den er fra sort eller hvid.

Den samme #34D6A0 er hsl(160, 66%, 52%). Dens nuance ligger mellem grøn og blå, mætningen er høj, og lysstyrken er lige over midten. HSL er den letteste form at redigere i hånden, fordi du kan beholde nuancen og kun flytte lysstyrken for at få en lysere eller mørkere nuance.

HSV ligner HSL, men bruger værdi, altså lysstyrken i den stærkeste kanal, i stedet for lysstyrke. Nogle farvevælgere bruger den, så du kan støde på den i andre værktøjer. Konverteren viser den ved siden af HSL, så du kan sammenligne de to.

CMYK er til blæk, så det er et estimat

Skærme tilføjer lys: rød, grøn og blå sammen giver hvid. Printere fjerner lys med blæk: cyan, magenta, gul og sort på hvidt papir. De to systemer kan ikke matche præcist, så en CMYK-værdi er altid en oversættelse.

Konverteren bruger den enkle formel. Sort er K, en minus den største af de røde, grønne og blå værdier på en skala fra 0 til 1. Cyan, magenta og gul beregnes derefter ud fra det, K efterlader. Formlen ser bort fra blækket, papiret og den farveprofil, printeren bruger. Det trykte resultat vil derfor afvige, og meget lyse farver kan ligge uden for det, CMYK-blæk overhovedet kan trykke. Brug CMYK-værdien til at starte en samtale med en trykker, og bed om et korrektur, før du trykker en stor oplagsmængde.

Kontrast handler om lys, ikke nuance

WCAG-kontrastforholdet sammenligner to farver ud fra deres relative luminans. Luminansen beregnes ud fra de røde, grønne og blå værdier efter gammakorrektion, og grøn tæller mest, fordi det menneskelige øje reagerer mest på den. Hver kanal omregnes først fra skalaen 0 til 255, og luminansen er 0,2126 gange rød, plus 0,7152 gange grøn, plus 0,0722 gange blå.

Forholdet er den lysere luminans plus 0,05, divideret med den mørkere luminans plus 0,05. Sort på hvid giver 21 til 1, det størst mulige. To farver kan se ganske forskellige ud i nuance og stadig have et lavt forhold, hvis de har samme lysstyrke, og netop det tjek er til for at fange. Den samme lave kontrast er grunden til, at QR-koder ikke kan scannes.

Grænseværdierne

WCAG 2.x har to niveauer, og det forhold, der kræves, afhænger af tekstens størrelse.

• Niveau AA: 4,5 til 1 for almindelig tekst og 3 til 1 for stor tekst.
• Niveau AAA: 7 til 1 for almindelig tekst og 4,5 til 1 for stor tekst.

Stor tekst er 24 pixels eller mere, eller 18,66 pixels og fed. Alt mindre tæller som almindelig tekst. Grå tekst på hvid er en almindelig fejl. En mellemgrå som #777777 på hvid er ca. 4,48 til 1. Den dumper AA for almindelig tekst med en lille margin, men den består AA for store overskrifter.

Konverteren viser forholdet afrundet til to decimaler, men hver godkendelse eller fejl bruger den præcise værdi. En værdi, der vises som 4,50, kan derfor stadig dumpe, hvis den er lidt under. Tjekket måler kun én ting. Det dækker ikke fontvægt, linjeafstand eller hvordan personer med farveblindhed ser et design, så test også den rigtige side i de rigtige størrelser.

Tinter og skygger

Stripen under konverteren viser ni trin omkring farven: fire tinter blandet mod hvid, selve farven og fire skygger blandet mod sort. Et klik på et trin kopierer dets HEX-kode. Det hjælper, når du har brug for et sæt beslægtede farver, f.eks. en lys baggrund, en hover-tilstand og en mørk tekstfarve, alle taget fra én brandværdi. Tjek hvert par, du vælger, med kontrastafsnittet, før du bruger det.

Sådan gør du med fixmint

1. Indsæt en farve i feltet Color som HEX, RGB, HSL eller et CSS-navn som rebeccapurple.
2. Læs rækkerne HEX, RGB, HSL, HSV og CMYK. Tryk på Copy ved siden af den, du har brug for. CMYK er markeret som ca.-værdi.
3. Skriv din baggrundsfarve i Background, eller brug dens farveprøve, og læs forholdet under On white, On black og On your background.
4. Tjek de fire markeringer under hvert forhold: AA og AAA, hver for almindelig og stor tekst.
5. Under Tints and shades trykker du på en farveprøve for at kopiere den.

Hurtige svar

Er CMYK-værdien præcis?

Nej. Det er en simpel aritmetisk omregning, der ser bort fra printeren, papiret og farveprofilen. Brug den som et udgangspunkt, og bed om et korrektur.

Gør et godkendt kontrastforhold et design tilgængeligt?

Det betyder, at tekstfarverne opfylder én målbar grænseværdi. Tilgængelighed afhænger også af størrelse, afstand, bevægelse og hvordan siden er bygget, så forholdet er en vejledning, ikke en fuld gennemgang.

Hvilket format skal jeg gemme i et stylesheet?

Det, du nemmest kan læse og redigere. HEX er kompakt og udbredt. HSL er lettere at justere i hånden, fordi du ændrer lysstyrken uden at ændre nuancen.