Hva er forskjellen på HSL og HSV?

Begge har fargetone (H, 0–360°) og metning (S, 0–100 %), men den tredje aksen er ulik. HSL bruker «lightness»: 0 % = svart, 50 % = ren farge, 100 % = hvit. HSV bruker «value»: 0 % = svart, 100 % = ren farge (aldri hvit). HSL er mer intuitiv for å tone farger mot svart/hvit; HSV er tettere på hvordan skjermer viser lys.

Hva sier WCAG-kontrastforholdet?

Kontrastforholdet er et tall mellom 1 (ingen kontrast) og 21 (svart mot hvit). WCAG 2.1 stiller krav: AA = 4,5:1 for normal tekst og 3:1 for stor tekst (18 pt / 14 pt bold); AAA = 7:1 for normal og 4,5:1 for stor. Grafiske elementer og UI-komponenter trenger 3:1. Verktøyet gir «bestått/ikke bestått» for hvert nivå.

Hvorfor ser CMYK ofte annerledes ut enn RGB?

RGB er additivt (skjermer legger lys sammen), CMYK er subtraktivt (blekk absorberer lys). CMYK har mindre fargeomfang enn sRGB, spesielt mettede grønn- og blåtoner blir «dumpere» på trykk. Presis omforming krever ICC-profil for trykkeri/papir. Tilnærmingen i verktøyet er nyttig for indikasjon, ikke for endelig prooofing.

Er #FFF det samme som #FFFFFF?

Ja. Kortversjonen (3 sifre) dupliserer hvert siffer: `#FFF` = `#FFFFFF` (hvit), `#F00` = `#FF0000` (rød). Formatet støttes i CSS men gir kun 4 096 farger. Alfa-varianter finnes også: `#FFF8` = `#FFFFFF88` (hvit med ~53 % opasitet).

HTML fargevelger & konverter

Slik fungerer det

Velg en farge i fargekartet eller skriv inn en verdi, så får du den i HEX, RGB og HSL klar til å lime inn i CSS. Kontrastsjekken viser om tekstfargen din oppfyller WCAG AA og AAA mot en valgt bakgrunn.

Om dette verktøyet

Fargeverktøy for å velge, konvertere og analysere farger på tvers av populære fargesystemer: HEX (`#ff8800`), RGB (`rgb(255,136,0)`), HSL (`hsl(32,100%,50%)`), HSV/HSB og CMYK. Verktøyet tilbyr en visuell fargevelger, sanntidskonvertering mellom formater, og WCAG-kontrastanalyse mot bakgrunnsfarger, nyttig for tilgjengelighet. Alle populære fargeformater fra CSS, designverktøy og trykk støttes. Fargeplukkeren og alle beregninger kjører lokalt i nettleseren, uten sporing eller lagring.

Slik bruker du det

Bruk fargeplukkeren eller skriv en farge i HEX, RGB, HSL eller HSV.
Alle andre formater oppdaterer seg automatisk.
Skriv inn en bakgrunnsfarge for å se WCAG-kontrastforhold og vurdering (AA/AAA).
Kopier den valgte fargen med ett klikk fra ønsket format.
Alt kjøres lokalt, fargevalget lagres eller sendes ingen steder.

Eksempler

Merkevarefarge

Inn#0055ff

Utrgb(0, 85, 255) = hsl(220, 100%, 50%) = hsv(220, 100%, 100%)

En intens blå tone. HSL viser at det er ren blå (fargetone 220°) med 100 % metning og 50 % lyshet.

Kontrastsjekk

InnTekst #333333 på #f5f5f5

UtKontrast 12,63:1, WCAG AAA ✓

AAA krever ≥ 7:1 for normal tekst. Denne kombinasjonen består med god margin.

CMYK for trykk

Inn#c8102e (postrød)

Utcmyk(0%, 92%, 77%, 22%)

CMYK er en tilnærming, skjerm bruker sRGB, mens trykk avhenger av papir, blekk og profil (ICC).

Vanlige bruksområder

Designe merkevareidentitet med presise HEX/HSL-verdier for stilguider.
Sjekke om tekstfarge har nok kontrast mot bakgrunn (WCAG 2.1 AA/AAA).
Konvertere designverdier fra Figma/Sketch til CSS-kode.
Finne CMYK-approksimering før en trykksak sendes til trykkeriet.
Lage fargepaletter, juster HSL for varianter (mørkere/lysere) uten å forlate merket.
Feilsøke uventet farge i CSS ved å sammenligne rendered vs spesifisert verdi.

Ofte stilte spørsmål

Hva er forskjellen på HSL og HSV?: Begge har fargetone (H, 0–360°) og metning (S, 0–100 %), men den tredje aksen er ulik. HSL bruker «lightness»: 0 % = svart, 50 % = ren farge, 100 % = hvit. HSV bruker «value»: 0 % = svart, 100 % = ren farge (aldri hvit). HSL er mer intuitiv for å tone farger mot svart/hvit; HSV er tettere på hvordan skjermer viser lys.
Hva sier WCAG-kontrastforholdet?: Kontrastforholdet er et tall mellom 1 (ingen kontrast) og 21 (svart mot hvit). WCAG 2.1 stiller krav: AA = 4,5:1 for normal tekst og 3:1 for stor tekst (18 pt / 14 pt bold); AAA = 7:1 for normal og 4,5:1 for stor. Grafiske elementer og UI-komponenter trenger 3:1. Verktøyet gir «bestått/ikke bestått» for hvert nivå.
Hvorfor ser CMYK ofte annerledes ut enn RGB?: RGB er additivt (skjermer legger lys sammen), CMYK er subtraktivt (blekk absorberer lys). CMYK har mindre fargeomfang enn sRGB, spesielt mettede grønn- og blåtoner blir «dumpere» på trykk. Presis omforming krever ICC-profil for trykkeri/papir. Tilnærmingen i verktøyet er nyttig for indikasjon, ikke for endelig prooofing.
Er #FFF det samme som #FFFFFF?: Ja. Kortversjonen (3 sifre) dupliserer hvert siffer: `#FFF` = `#FFFFFF` (hvit), `#F00` = `#FF0000` (rød). Formatet støttes i CSS men gir kun 4 096 farger. Alfa-varianter finnes også: `#FFF8` = `#FFFFFF88` (hvit med ~53 % opasitet).

Teknisk bakgrunn

Fargerommet sRGB (IEC 61966-2-1, 1996) er de facto standard for skjerm og web. RGB-verdier er heltall 0–255 per kanal (8-bit), som gir 16,7 millioner farger. HSL og HSV er sylindriske transformasjoner av RGB, konvertering er algebraisk (uten profil). CMYK-konvertering er ikke lineær og krever i praksis ICC-profiler for nøyaktighet. WCAG-kontrastformel: (L1 + 0,05) / (L2 + 0,05) der L er relativ luminans beregnet med sRGB gamma-korreksjon: L = 0,2126R + 0,7152G + 0,0722B (etter linearisering). Nye fargerom som Display P3 og Rec. 2020 gir større gamut for HDR og profesjonell bruk.