Fargevelger

Slik bruker du fargevelgeren

1. Klikk på fargeprøven under Velg en farge for å åpne fargevelgeren i nettleseren din, og velg en farge. Du kan også skrive eller lime inn en verdi i feltet Fargekode: en HEX-kode som #1E90FF, rgb(30, 144, 255), hsl(210 100% 56%) eller et CSS-navn som tomato.
2. Den store forhåndsvisningen oppdateres med en gang, og HEX-koden skrives i svart eller hvitt, avhengig av hva som er lettest å lese på den bakgrunnen.
3. Under Fargekoder kopierer du formatet du trenger med Kopier-knappen ved siden av: HEX, RGB, HSL, HSV eller CMYK.
4. Klikk på Tilfeldig farge når du trenger inspirasjon, eller på Velg fra skjermen (i nettlesere som støtter det, som Chrome og Edge) for å hente en hvilken som helst piksel på skjermen, også fra andre vinduer.

Alt skjer i nettleseren din: ingen farger eller bilder sendes noe sted. Ingenting du skriver inn, sendes til en server.

Hva hver fargekode betyr

• HEX er den sekssifrede heksadesimale skrivemåten som brukes i HTML og CSS. Hvert sifferpar er én kanal (rød, grønn, blå) fra 00 til FF, så #1E90FF betyr rød 30, grønn 144, blå 255.
• RGB gir de samme tre kanalene som desimaltall fra 0 til 255. Det er dette de fleste designprogrammer og programmeringsbibliotek forventer.
• HSL beskriver en farge med fargetone (en vinkel fra 0° til 360° på fargehjulet), metning og lyshet. Det er praktisk når du vil gjøre en farge lysere eller mørkere ved å endre ett enkelt tall.
• HSV (også kalt HSB) bruker fargetone, metning og verdi (lysstyrke). Det er modellen bak fargerutene i Photoshop, Figma og mange andre editorer.
• CMYK uttrykker fargen som prosentandeler av cyan, magenta, gul og svart trykkfarge.

Om CMYK-verdiene

CMYK-kodene er en enkel omregning: K = 1 − max(R, G, B), deretter C = (1 − R − K) / (1 − K), og det samme for M og Y. Dette er standardformelen fra lærebøkene, men den bruker ingen ICC-profil. Ekte trykk avhenger av trykkpressen, papiret og fargene, så et trykkeri vil konvertere fargene dine med sin egen profil, og resultatet kan avvike. Bruk tallene som et utgangspunkt, ikke som bevis for trykk.

Slik leser du kontrastforholdene

Under HEX-koden viser forhåndsvisningen Kontrast på hvitt og Kontrast på svart, beregnet med WCAG 2-formelen for relativ luminans. Et forhold på 4,5:1 eller mer kreves for vanlig brødtekst på nivå AA, og 3:1 for stor tekst og elementer i grensesnittet. Hvis fargen din bare når 3:1 på hvitt, bør du spare den til store overskrifter eller ikoner og bruke en mørkere nyanse til tekst.

Tips

• Du kan lime inn HEX-koder uten #: 1e90ff fungerer også, og det samme gjelder korte former som f60.
• Verdier med gjennomsiktighet, som rgb(0 0 0 / 50%), godtas. Fargevelgeren viser den ugjennomsiktige fargen.
• Nettleserens egen fargedialog varierer mellom systemer. Trenger du en nøyaktig verdi, er det alltid eksakt å skrive den inn i feltet Fargekode.