Fargekonverterer

Hva er en fargekonverterer?

En fargekonverterer oversetter fargeverdier mellom forskjellige fargemodeller — HEX, RGB, HSL, HSV, CMYK og mer. Webdesignere jobber ofte i HEX (som #4F46E5) mens CSS-animasjoner bruker HSL for lettere justering av lysstyrke og metning. Trykkdesignere trenger CMYK-verdier. Dette verktøyet konverterer umiddelbart mellom alle disse formatene.

Hver fargemodell representerer farger forskjellig: RGB (Rød, Grønn, Blå) er additiv fargemiksing brukt av skjermer. HSL (Farge, Metning, Lyshet) er mer intuitiv for menneskelig fargejustering. CMYK (Cyan, Magenta, Gul, Sort) er subtraktiv fargemiksing brukt i trykning. HEX er rett og slett en kompakt representasjon av RGB-verdier i heksadesimalt format.

Fargemodeller forklart

• HEX — 6-sifret heksadesimal kode (f.eks. #FF5733). Standard i webdesign. Kompakt og mye brukt.
• RGB — tre verdier 0–255 for rød, grønn og blå. Direkte representasjon av skjermpiksel-farger.
• HSL — fargetone (0–360 grader), metning (0–100 %) og lyshet (0–100 %). Mest intuitivt for fargejustering.
• HSV/HSB — ligner HSL men bruker verdi/lysstyrke i stedet for lyshet. Foretrukket i bildebehandling.
• CMYK — cyan, magenta, gul og sort. Brukes i trykkproduksjon. Har et smalere fargegamut enn RGB.

Slik bruker du dette verktøyet

Skriv inn en fargeverdi i et hvilket som helst støttet format, og alle andre formater beregnes automatisk. Du kan også bruke fargevelgeren for å visuelt velge en farge. Verktøyet viser en forhåndsvisning av fargen og gir kopierbare verdier for hvert format. Støtter også alfa/gjennomsiktighet (RGBA, HSLA).

Farger i webutvikling

CSS støtter flere fargeformater: hex (#ff5733), rgb(255, 87, 51), hsl(11, 100%, 60%) og navngitte farger (tomato). Moderne CSS støtter også oklch() og oklab() for perseptuelt uniforme fargerom. Når du velger mellom formater, er HEX mest kompakt, HSL er enklest å justere programmatisk (lysere ved å øke L, desaturere ved å senke S), og RGB er mest utbredt støttet.

Regneeksempel

Hex-fargen #2563EB deles i rød = 0x25 = 37, grønn = 0x63 = 99, blå = 0xEB = 235, altså rgb(37, 99, 235). Omregnet til HSL blir det omtrent hsl(217, 83%, 53%) — en mettet blå. Gjør den lysere ved å øke L-verdien; bygg en palett ved å rotere H-verdien i 30°-steg mens S og L holdes konstante.

Vanlige feil

En vanlig feil er å tro at hex og RGB beskriver ulike farger — det er de samme verdiene i ulik notasjon. Mange ignorerer også kontrast: lysegrå tekst på hvitt kan se elegant ut, men stryker på WCAG-forholdene. Dessuten samsvarer ikke RGB og CMYK én-til-én, så en klar skjermfarge kan trykkes mattere; lag en prøvetrykk-simulering i stedet for å stole på skjermen.

Ofte stilte spørsmål

Hvorfor ser den trykte fargen annerledes ut enn på skjermen?

Skjermer bruker RGB (additiv lysmiks) mens trykkblekk bruker CMYK (subtraktiv). CMYK har et smalere fargegamut — det kan ikke reprodusere alle farger en skjerm kan vise, spesielt svært lyse og mettede farger. Profesjonelle bruker ICC-fargeprofiler og Pantone-referanser for nøyaktig fargematching mellom skjerm og trykk. Kalibrer alltid skjermen din for mest nøyaktig forhåndsvisning.

Hva betyr alfakanal?

Alfakanalen representerer gjennomsiktighet: 1 (eller 255, eller FF i hex) er helt ugjennomsiktig, 0 er helt gjennomsiktig. RGBA og HSLA inkluderer denne fjerde verdien. I CSS brukes rgba() og hsla() for halvgjennomsiktige farger. Den nyere CSS-syntaksen tillater å legge til alfa direkte: rgb(255 87 51 / 0.5) for 50 % gjennomsiktighet.

Hva er forskjellen på HEX, RGB og HSL?

Alle tre beskriver de samme skjermfargene. HEX og RGB angir mengder rødt, grønt og blått (i base 16 eller 10), mens HSL bruker fargetone, metning og lyshet, som er mer intuitivt for å justere eller lage paletter.