Farvevælger

Sådan bruger du farvevælgeren

1. Klik på farveprøven under Vælg en farve for at åbne din browsers farvevælger, og vælg en farve. Du kan også skrive eller indsætte en værdi i feltet Farvekode: en HEX-kode som #1E90FF, rgb(30, 144, 255), hsl(210 100% 56%) eller et CSS-navn som tomato.
2. Det store eksempel opdateres med det samme, med HEX-koden skrevet i sort eller hvid, alt efter hvad der kan læses bedst på den baggrund.
3. Under Farvekoder kopierer du det format, du har brug for, med knappen Kopiér ved siden af: HEX, RGB, HSL, HSV eller CMYK.
4. Klik på Tilfældig farve, når du vil have inspiration, eller på Vælg fra skærmen (i browsere, der understøtter det, som Chrome og Edge) for at hente en vilkårlig pixel på din skærm, også fra andre vinduer.

Alt foregår i din browser: ingen farve og intet billede sendes nogen steder hen.

Hvad de enkelte farvekoder betyder

• HEX er den sekscifrede hexadecimale notation, som bruges i HTML og CSS. Hvert par cifre er én kanal (rød, grøn, blå) fra 00 til FF, så #1E90FF betyder rød 30, grøn 144, blå 255.
• RGB giver de samme tre kanaler som decimaltal fra 0 til 255. Det er det, de fleste designprogrammer og programmeringsbiblioteker forventer.
• HSL beskriver en farve ved farvetone (en vinkel fra 0° til 360° på farvehjulet), mætning og lysstyrke. Det er praktisk, når du vil gøre en farve lysere eller mørkere ved at ændre ét tal.
• HSV (også kaldet HSB) bruger farvetone, mætning og værdi (lysstyrke). Det er modellen bag farvefladerne i Photoshop, Figma og mange andre programmer.
• CMYK udtrykker farven som procentdele af cyan, magenta, gul og sort tryksværte.

Om CMYK-værdierne

CMYK-koderne er en simpel omregning: K = 1 − max(R, G, B), derefter C = (1 − R − K) / (1 − K), og det samme for M og Y. Det er den almindelige lærebogsformel, men den bruger ikke en ICC-profil. Rigtigt tryk afhænger af pressen, papiret og farverne, så et trykkeri omregner dine farver med sin egen profil, og resultatet kan afvige. Brug tallene som udgangspunkt, ikke som dokumentation til tryk.

Sådan læser du kontrastforholdene

Under HEX-koden viser eksemplet Kontrast på hvid og Kontrast på sort, beregnet med WCAG 2’s formel for relativ luminans. Et forhold på 4,5:1 eller mere er nødvendigt til normal brødtekst på niveau AA og 3:1 til stor tekst og grænsefladeelementer. Hvis din farve kun når 3:1 på hvid, kan du bruge den til store overskrifter eller ikoner og vælge en mørkere nuance til tekst.

Tips

• Du kan indsætte hex-koder uden #: 1e90ff virker også, ligesom korte former som f60.
• Værdier med gennemsigtighed, for eksempel rgb(0 0 0 / 50%), accepteres. Farvevælgeren viser den uigennemsigtige farve.
• Browserens egen farvedialog varierer fra system til system. Hvis du har brug for en præcis værdi, er det altid nøjagtigt at skrive den i feltet Farvekode.