HEX, RGB, HSL, CMYK og sjekk av tekstkontrast

En fargekode er én farge skrevet i en annen notasjon. HEX, RGB og HSL beskriver det samme lyset på skjermen, så de kan gjøres om til hverandre helt nøyaktig, bortsett fra avrunding. CMYK beskriver blekk på papir, så omregningen fra skjermverdier er bare et anslag. WCAG-kontrastforholdet er et eget tall som sammenligner hvor lyse to farger er, og det avgjør om teksten er lesbar. Lim inn en farge i fargekonverteringsverktøyet for å se alle formatene samtidig.

FargekonvertererTrenger en farge i et annet formatGjør det gratis

Hvis fargen du trenger er inne i et bilde, en logo eller et skjermbilde, les den av pikselen med bildefargevelgeren først, og lim deretter inn HEX-koden her. Slik velger du en nøyaktig farge fra et bilde forklarer stegene.

HEX og RGB er de samme tallene

En HEX-kode er tre par heksadesimale siffer. #34D6A0 inneholder en rød, en grønn og en blå verdi. Hvert par er et tall fra 00 til FF, som er 0 til 255 i titallssystemet. Altså er 34 lik 52, D6 lik 214 og A0 lik 160, og RGB-formen blir rgb(52, 214, 160).

Å skrive tallet i heksadesimal endrer bare hvordan det ser ut. Kortformen #abc betyr #aabbcc, der hvert siffer er doblet. En åttesifret kode legger til et alfapar på slutten, fra 00 for helt gjennomsiktig til FF for helt ugjennomsiktig, så #34D6A080 er omtrent halvt gjennomsiktig. RGBA skriver den samme alfaverdien som et tall fra 0 til 1.

CSS godtar også fargenavn. rebeccapurple er #663399. Verktøyet leser navnene gjennom selve nettleseren, så alle navn nettleseren kjenner, fungerer.

HSL beskriver en farge slik folk gjør

HSL står for nyanse (hue), metning (saturation) og lysstyrke (lightness). Nyansen er en vinkel rundt fargehjulet: rødt er 0 grader, grønt er 120 og blått er 240. Metningen sier hvor langt fargen er fra grått, og lysstyrken sier hvor langt den er fra svart eller hvitt.

Samme #34D6A0 er hsl(160, 66%, 52%). Nyansen ligger mellom grønt og blått, metningen er høy, og lysstyrken er litt over midten. HSL er det enkleste formatet å redigere for hånd, fordi du kan beholde nyansen og flytte bare lysstyrken for å få en lysere eller mørkere variant.

HSV ligner på HSL, men bruker verdi, lysstyrken til den sterkeste kanalen, i stedet for lysstyrke. Noen fargevelgere bruker den, så du kan møte den i andre verktøy. Verktøyet viser den ved siden av HSL, slik at du kan sammenligne dem.

CMYK er for blekk, så det er et anslag

Skjermer legger til lys: rødt, grønt og blått sammen blir hvitt. Skrivere tar bort lys med blekk: cyan, magenta, gul og svart på hvitt papir. De to systemene kan ikke stemme helt overens, så en CMYK-verdi er alltid en oversettelse.

Verktøyet bruker den enkle formelen. Svart er K, én minus den største av verdiene for rødt, grønt og blått på en skala fra 0 til 1. Cyan, magenta og gul regnes så ut fra det K etterlater. Formelen ser bort fra blekket, papiret og fargeprofilen skriveren bruker. Det trykte resultatet vil derfor avvike, og svært lyse farger kan ligge utenfor det CMYK-blekk kan trykke i det hele tatt. Bruk CMYK-verdien som utgangspunkt når du snakker med en trykkeri, og be om en korrektur før en stor opplag.

Kontrast handler om lys, ikke om nyanse

WCAG-kontrastforholdet sammenligner to farger etter relativ luminans. Luminansen regnes ut fra verdiene for rødt, grønt og blått etter gammakorrigering, og grønt teller mest fordi øynene våre reagerer mest på det. Hver kanal gjøres først om fra skalaen 0 til 255, og luminansen er 0,2126 ganger rødt, pluss 0,7152 ganger grønt, pluss 0,0722 ganger blått.

Forholdet er den lysere luminansen pluss 0,05, delt på den mørkere luminansen pluss 0,05. Svart på hvitt gir 21 til 1, det største som er mulig. To farger kan se ganske forskjellige ut i nyanse og likevel ha lavt forhold hvis de har samme lysstyrke, og nettopp det tilfellet er kontrollen til for å fange. Den samme lave kontrasten er grunnen til at QR-koder ikke lar seg skanne.

Grenseverdiene

WCAG 2.x har to nivåer, og forholdet det krever avhenger av størrelsen på teksten.

• Nivå AA: 4,5 til 1 for vanlig tekst, og 3 til 1 for stor tekst.
• Nivå AAA: 7 til 1 for vanlig tekst, og 4,5 til 1 for stor tekst.

Stor tekst er 24 piksler eller mer, eller 18,66 piksler og fet. Alt som er mindre, regnes som vanlig tekst. Grå tekst på hvitt er en vanlig feil. En mellomgrå som #777777 på hvitt gir omtrent 4,48 til 1. Den stryker AA for vanlig tekst med en liten margin, men den går gjennom AA for store overskrifter.

Verktøyet viser forholdet avrundet til to desimaler, men hver godkjenning eller underkjenning bruker det eksakte tallet. En verdi som vises som 4,50 kan derfor fortsatt feile hvis den er litt under. Kontrollen måler bare én ting. Den dekker ikke skriftvekt, linjeavstand eller hvordan folk med fargeblindhet ser en design, så test den faktiske siden i de faktiske størrelsene også.

Toner og skygger

Stripen under verktøyet viser ni trinn rundt fargen: fire toner blandet mot hvitt, selve fargen, og fire skygger blandet mot svart. Et klikk på ett av trinnene kopierer HEX-koden. Dette hjelper når du trenger et sett beslektede farger, for eksempel en lys bakgrunn, en hover-tilstand og en mørk tekstfarge, alle hentet fra én merkevareverdi. Sjekk hvert par du velger i kontrastdelen før du bruker det.

Slik gjør du det med fixmint

1. Lim inn en farge i Farge-feltet som HEX, RGB, HSL eller et CSS-navn som rebeccapurple.
2. Les radene HEX, RGB, HSL, HSV og CMYK. Trykk på Kopier ved siden av den du trenger. CMYK er merket som omtrentlig.
3. Skriv bakgrunnsfargen din i Bakgrunn, eller bruk fargeprøven, og les forholdet under På hvit, På svart og På bakgrunnen din.
4. Sjekk de fire merkene under hvert forhold: AA og AAA, hver for vanlig og stor tekst.
5. Under Toner og skygger trykker du på en fargeprøve for å kopiere den.

Raske svar

Er CMYK-verdien eksakt?

Nei. Det er en enkel aritmetisk omregning som ser bort fra skriveren, papiret og fargeprofilen. Bruk den som et utgangspunkt, og be om en korrektur.

Gjør et godkjent kontrastforhold en design tilgjengelig?

Det betyr at tekstfargene oppfyller én målbar grenseverdi. Tilgjengelighet avhenger også av størrelse, avstand, bevegelse og hvordan siden er bygget, så forholdet er en veiledning, ikke en fullstendig gjennomgang.

Hvilket format bør jeg lagre i et stilark?

Det du leser og redigerer lettest. HEX er kompakt og vanlig. HSL er lettere å justere for hånd, fordi du endrer lysstyrke uten å endre nyansen.