# Fargehjul og fargevelger

> Fargehjul i HSV, HSL og malerens RYB, ferdige fargeharmonier og konvertering av HEX, RGB, OKLCH og CMYK. Nærmeste Tailwind-token. Gratis, uten installasjon.

URL: https://acrafto.com/no/online-fargevelger-hex-rgb-lch/  
Updated: 2026-09-23

Tools are interactive browser apps; there is no public API, no endpoints to call and no server-side processing. To use a tool, open its HTML page in a browser.

Velg en farge på hjulet, finjuster den på metnings- og lysstyrkeflaten, og les den av i hvert format prosjektet ditt bruker, fra `#RRGGBB` til `oklch()`. Verktøyet gjør også det andre fargevelgere hopper over: tre hjulvisninger inkludert det tradisjonelle malerhjulet RYB, harmonier som bygger paletten for deg, gjennomsiktighet (alfa) og eksport av hele paletten med ett klikk som CSS-variabler, SCSS eller JSON. Alt beregnes i nettleseren din.

## RYB eller RGB? Tre fargehjul i stedet for ett

Bryteren **Hjulmodus** endrer hvordan nyansene er ordnet på hjulet:

- **HSV** og **HSL** er digitale hjul. Nyansene ligger slik lys blandes på en skjerm. De skiller seg i det kvadratiske feltet: i HSV er det lyseste hjørnet den rene nyansen, mens HSL legger rene nyanser midt i lysstyrken med hvitt over.
- **RYB (maler)** ordner nyansene slik malere lærer dem: rødt, gult og blått som primærfarger, med oransje, grønt og lilla imellom (se [RYB-fargemodellen](https://en.wikipedia.org/wiki/RYB_color_model) (på engelsk)). Forskjellen merkes mest i harmoniene. På RYB-hjulet er komplementet til rødt **grønt**, og komplementet til blått er **oransje**, de klassiske pigmentparene. Et digitalt hjul parer rødt med cyan. Hvis en «komplementær» palett fra en vanlig fargevelger aldri har sett riktig ut, er dette grunnen.

## Fargeharmonier: en palett som bygger seg selv

Velg en regel i feltet **Fargeharmoni**. Hjulet markerer de tilhørende fargene, og under vises en ferdig palett:

- **Komplementær:** én motsatt farge. Den sterkeste kontrasten, passer til en enkelt aksent ved siden av hovedfargen din.
- **Delt komplementær:** de to nabofargene til komplementet. Nesten like mye kontrast, men lettere å balansere.
- **Triadisk:** tre nyanser jevnt fordelt på hjulet. Livlig, men stabilt når én dominerer og de to andre brukes sparsomt.
- **Tetradisk (kvadrat):** fire nyanser. Rike fargesett til illustrasjoner og grafer, vanskelig å balansere i et appgrensesnitt.
- **Analog:** de nærmeste nabofargene. En rolig kombinasjon til bakgrunner og overganger.
- **Monokrom:** én nyanse i flere lysstyrkenivåer. Det tryggeste valget for knappetilstander (hover, aktiv, deaktivert).

Kopier hele paletten med ett klikk i formatet du trenger: rent **HEX**, **RGB**, **HSL**, **OKLCH**, klare **CSS-variabler** (`--color-1: …`), **SCSS-variabler** eller **JSON** til kode. Vil du sjekke om paletten holder kontrasten for dem som har vanskelig for å skille nyanser, ta et skjermbilde og [konverter det til gråtoner](https://acrafto.com/no/bilder-til-gratoner-online/).

## Konverter HEX, RGB, HSL, OKLCH og CMYK: lim inn hva som helst, få alt tilbake

Feltene godtar nesten enhver fargenotasjon: `#f80`, `#ff8800`, åttesifret hex med alfa, `rgb()` og `rgba()`, `hsl()`, `hwb()`, `lch()`, `oklch()`, `oklab()`, `cmyk()`, `0xFF8800` og navngitte CSS-farger som `rebeccapurple`. Uansett hva du skriver inn, får du sju samstemte utdata: **HEX, RGB, HSL, HSV, LCH, OKLCH og CMYK**, hver med sin egen kopieringsknapp.

Glidebryteren **Ugjennomsiktighet (alfa)** under forhåndsvisningen bytter utdataene til sine gjennomsiktige former `#RRGGBBAA`, `rgba()` og `hsla()`. Forhåndsvisningen tegnes over et rutemønster, slik at du ser gjennomsiktigheten med det samme.

## Nærmeste Tailwind CSS-token for en hvilken som helst farge

To chips under forhåndsvisningen navngir fargen: **nærmeste navngitte CSS-farge** (nyttig for raske prototyper) og **nærmeste Tailwind-token**, for eksempel `orange-500`. Dermed holder du deg i designsystemet i stedet for å finne opp engangsverdier. Klikk på en chip for å kopiere den.

Det svarer på spørsmålet som dukker opp ved hver designoverlevering: designeren sendte en hex-kode, hvilken Tailwind-klasse er nærmest? Treffet beregnes mot standardpaletten i Tailwind CSS 4 (se [Tailwind-dokumentasjonen](https://tailwindcss.com/docs/colors), på engelsk), så du kan bruke tokenet rett i et klassenavn.

## Hvilket fargeformat bør du bruke?

| Format | Fullt navn | Når det brukes |
| :--- | :--- | :--- |
| **HEX** | Hexadecimal | **Standardvalget for nett.** Kort, støttet overalt, lett å kopiere. Åtte siffer legger til gjennomsiktighet. |
| **RGB** | Red, Green, Blue | **Slik skjermer tenker.** Tre lyskanaler fra 0 til 255. Formatet de fleste API-er og canvas-kode forventer. |
| **HSL** | Hue, Saturation, Lightness | **For justering på øyemål.** «Litt lysere» eller «mindre mettet» er bare å endre ett tall. |
| **HSV** | Hue, Saturation, Value | **Grafiske programmer.** Modellen bak fargevelgerne i Photoshop og GIMP. |
| **LCH** | Lightness, Chroma, Hue | **Perseptuelt jevn.** De samme tallstegene ser ut som de samme visuelle stegene, noe HSL bare later som. |
| **OKLCH** | OK Lightness, Chroma, Hue | **Det moderne valget for CSS.** Retter opp nyanseforskyvningene i blåtoner som plager LCH. Støttes av alle gjeldende nettlesere og passer for designtokens. |
| **CMYK** | Cyan, Magenta, Yellow, Key | **Pekepinn for trykk.** En tilnærmet konvertering for dialog med trykkeriet, de endelige verdiene bestemmes av fargeprofilen deres. |

Hvorfor OKLCH oppfattes jevnere enn eldre modeller, forklarer Björn Ottosson, som designet Oklab-fargerommet, i [den opprinnelige artikkelen](https://bottosson.github.io/posts/oklab/) (på engelsk). Syntaks og nettleserstøtte oppsummeres av [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklch) (på engelsk). Hvordan trykkmodellen fungerer, beskrives i [Wikipedia-artikkelen om CMYK](https://no.wikipedia.org/wiki/CMYK).

## Detaljer som sparer tid

- **Historikken lagrer seg selv.** De siste 24 fargene overlever en sideoppdatering. De blir liggende i nettleserens eget lager og sendes aldri noe sted.
- **Fargeplukker.** I nettlesere med EyeDropper-API (Chrome og Edge) velger du en farge hvor som helst på skjermen, også utenfor nettleservinduet. Trenger du fargen fra et bilde eller en logofil, bruk [fargeplukkeren for bilder](https://acrafto.com/no/online-fargevelger/).
- **Tastaturstyring.** Både hjulet og metnings- og lysstyrkeflaten reagerer på piltaster, slik at du kan finjustere fargen i små steg.
- **Forhåndsinnstillinger** dekker vanlige grunnfarger når du bare trenger et raskt utgangspunkt.

## Ofte stilte spørsmål

### Hvordan konverterer jeg OKLCH til HEX?

Lim inn en `oklch()`\-verdi i OKLCH-feltet, så oppdateres alle andre utdata, inkludert HEX, med det samme. Det fungerer motsatt vei også: skriv inn HEX og les av tilsvarende `oklch()`. Én forbehold: OKLCH kan beskrive farger utenfor sRGB-fargerommet, og disse klippes til det sRGB kan vise. En svært mettet `oklch()` vil derfor ikke se lik ut som sin HEX-form på en skjerm med bredt fargerom.

### Kan jeg bruke oklch() i CSS i produksjon?

Ja. Alle gjeldende versjoner av Chrome, Edge, Firefox og Safari støtter `oklch()`, og det har blitt en populær notasjon for designtokens (Tailwind CSS 4 definerer hele paletten sin i den). For svært gamle nettlesere kan du legge en HEX-verdi som reserve på linjen før. Dette verktøyet gir deg begge verdiene.

### Hvorfor endrer harmoniene seg når jeg bytter til RYB-hjulet?

Fordi det som er «motsatt», avhenger av hvordan nyansene er fordelt rundt sirkelen. RYB-hjulet fordeler pigmentets primærfarger jevnt, slik at komplementærparene blir dem malere kjenner: rødt og grønt, blått og oransje, gult og lilla. HSV- og HSL-hjulene fordeler nyansene etter hvordan lys blandes, og parer derfor rødt med cyan. Ingen av delene er feil: RYB samsvarer med kunstundervisning, HSV og HSL samsvarer med det skjermer gjør.

### Kan jeg stole på CMYK-verdiene for trykk?

Bruk dem som en pekepinn. Den reelle konverteringen for trykk avhenger av [fargeprofilen](https://en.wikipedia.org/wiki/ICC_profile) (på engelsk) til trykkeriet, papiret og blekket. Samme RGB-farge kommer ut forskjellig på bestrøket og ubestrøket papir. Verdiene her beregnes med en standardformel som gir deg en god tilnærming, men den endelige korrekturen er trykkeriets ansvar.

### Hvor er fargeplukker-knappen i Firefox eller Safari?

Den er skjult med vilje. [EyeDropper-API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API) (MDN, på engelsk), som knappen bygger på, er foreløpig bare implementert i nettlesere basert på Chromium (Chrome, Edge, Opera). Alle andre funksjoner i verktøyet fungerer overalt, det er bare valg av farge fra skjermen som mangler. Trenger du en farge fra et bilde, bruk [fargeplukkeren for bilder](https://acrafto.com/no/online-fargevelger/), som fungerer i alle nettlesere.

### Er fargehistorikken min privat?

Ja. Historikken lagres i localStorage i nettleseren din på din egen enhet. Ingenting du velger, limer inn eller kopierer, sendes noe sted. Hele verktøyet kjører som JavaScript i nettleseren, noe du kan bekrefte i nettverksfanen i utviklerverktøyene.

## Other languages

- Čeština (cs): [Barevné kolo](https://acrafto.com/cs/barevne-kolo/) ([Markdown](https://acrafto.com/cs/barevne-kolo/index.md))
- Slovenčina (sk): [Online výber farieb](https://acrafto.com/sk/online-vyber-farieb/) ([Markdown](https://acrafto.com/sk/online-vyber-farieb/index.md))
- English (en): [Color Picker](https://acrafto.com/en/color-picker-online/) ([Markdown](https://acrafto.com/en/color-picker-online/index.md))
- Deutsch (de): [Farbwähler](https://acrafto.com/de/farbwahl-online-farbrad-konverter/) ([Markdown](https://acrafto.com/de/farbwahl-online-farbrad-konverter/index.md))
- Français (fr): [Sélecteur de couleur](https://acrafto.com/fr/selecteur-couleur-en-ligne/) ([Markdown](https://acrafto.com/fr/selecteur-couleur-en-ligne/index.md))
- Español (es): [Selector de colores online](https://acrafto.com/es/selector-de-colores-online/) ([Markdown](https://acrafto.com/es/selector-de-colores-online/index.md))
- Italiano (it): [Selettore colori](https://acrafto.com/it/selettore-colori-online/) ([Markdown](https://acrafto.com/it/selettore-colori-online/index.md))
- Português (pt): [Color Picker Online](https://acrafto.com/pt/color-picker-online-roda-cores-conversor-hex-rgb-lch/) ([Markdown](https://acrafto.com/pt/color-picker-online-roda-cores-conversor-hex-rgb-lch/index.md))
- Nederlands (nl): [Kleurkiezer](https://acrafto.com/nl/online-kleurkiezer/) ([Markdown](https://acrafto.com/nl/online-kleurkiezer/index.md))
- Polski (pl): [Color Picker Online](https://acrafto.com/pl/color-picker-online-konwerter-kolorow/) ([Markdown](https://acrafto.com/pl/color-picker-online-konwerter-kolorow/index.md))
- Română (ro): [Selector de culori](https://acrafto.com/ro/selector-culori-online/) ([Markdown](https://acrafto.com/ro/selector-culori-online/index.md))
- Magyar (hu): [Online színválasztó](https://acrafto.com/hu/szinvalaszto-online/) ([Markdown](https://acrafto.com/hu/szinvalaszto-online/index.md))
- Ελληνικά (el): [Color picker online](https://acrafto.com/el/online-color-picker-chromatikos-trochos/) ([Markdown](https://acrafto.com/el/online-color-picker-chromatikos-trochos/index.md))
- Български (bg): [Цветово колело](https://acrafto.com/bg/onlain-izbirach-na-cvetove/) ([Markdown](https://acrafto.com/bg/onlain-izbirach-na-cvetove/index.md))
- Hrvatski (hr): [Kotač boja](https://acrafto.com/hr/online-birac-boja-pretvornik/) ([Markdown](https://acrafto.com/hr/online-birac-boja-pretvornik/index.md))
- Slovenščina (sl): [Izbirnik barv](https://acrafto.com/sl/izbirnik-barv-splet/) ([Markdown](https://acrafto.com/sl/izbirnik-barv-splet/index.md))
- Eesti (et): [Värvivalija](https://acrafto.com/et/varvivalija-online/) ([Markdown](https://acrafto.com/et/varvivalija-online/index.md))
- Latviešu (lv): [Krāsu ritenis](https://acrafto.com/lv/krasu-atlasitajs-tiessaiste/) ([Markdown](https://acrafto.com/lv/krasu-atlasitajs-tiessaiste/index.md))
- Lietuvių (lt): [Spalvų parinkiklis](https://acrafto.com/lt/spalvu-parinkiklis-internetu/) ([Markdown](https://acrafto.com/lt/spalvu-parinkiklis-internetu/index.md))
- Svenska (sv): [Färgväljare](https://acrafto.com/sv/fargv%C3%A4ljare-online/) ([Markdown](https://acrafto.com/sv/fargv%C3%A4ljare-online/index.md))
- Dansk (da): [Farvevælger og farvehjul](https://acrafto.com/da/farvevaelger-online-farvehjul-konverter/) ([Markdown](https://acrafto.com/da/farvevaelger-online-farvehjul-konverter/index.md))
- Suomi (fi): [Värinvalitsin online](https://acrafto.com/fi/varinvalitsin-online/) ([Markdown](https://acrafto.com/fi/varinvalitsin-online/index.md))
- Українська (uk): [Вибір кольору онлайн](https://acrafto.com/uk/kolir-picker-onlayn/) ([Markdown](https://acrafto.com/uk/kolir-picker-onlayn/index.md))
- Русский (ru): [Цветовой круг](https://acrafto.com/ru/onlain-vybor-tsveta/) ([Markdown](https://acrafto.com/ru/onlain-vybor-tsveta/index.md))
- Српски (sr): [Točak boja](https://acrafto.com/sr/online-izbirac-boja/) ([Markdown](https://acrafto.com/sr/online-izbirac-boja/index.md))
- Македонски (mk): [Избирач на бои](https://acrafto.com/mk/izbirac-boi-online/) ([Markdown](https://acrafto.com/mk/izbirac-boi-online/index.md))
- Bosanski (bs): [Krug boja](https://acrafto.com/bs/birac-boja-online-pretvornik/) ([Markdown](https://acrafto.com/bs/birac-boja-online-pretvornik/index.md))
- Shqip (sq): [Zgjedhës ngjyrash](https://acrafto.com/sq/zgjedhes-ngjyrash-online-konvertues/) ([Markdown](https://acrafto.com/sq/zgjedhes-ngjyrash-online-konvertues/index.md))
- Türkçe (tr): [Renk seçici](https://acrafto.com/tr/online-renk-secici/) ([Markdown](https://acrafto.com/tr/online-renk-secici/index.md))
- 日本語 (ja): [カラーピッカー](https://acrafto.com/ja/online-color-picker/) ([Markdown](https://acrafto.com/ja/online-color-picker/index.md))
- 한국어 (ko): [컬러 피커](https://acrafto.com/ko/online-color-picker/) ([Markdown](https://acrafto.com/ko/online-color-picker/index.md))
- العربية (ar): [منتقي الألوان](https://acrafto.com/ar/muntaky-al-alwan-online/) ([Markdown](https://acrafto.com/ar/muntaky-al-alwan-online/index.md))
- हिन्दी (hi): [कलर पिकर ऑनलाइन](https://acrafto.com/hi/color-picker-online/) ([Markdown](https://acrafto.com/hi/color-picker-online/index.md))
- Bahasa Indonesia (id): [Pemilih warna](https://acrafto.com/id/pemilih-warna-online/) ([Markdown](https://acrafto.com/id/pemilih-warna-online/index.md))
- Tiếng Việt (vi): [Bánh xe màu](https://acrafto.com/vi/chon-mau-online/) ([Markdown](https://acrafto.com/vi/chon-mau-online/index.md))
- ไทย (th): [วงล้อสี](https://acrafto.com/th/online-color-picker/) ([Markdown](https://acrafto.com/th/online-color-picker/index.md))
- עברית (he): [גלגל צבעים](https://acrafto.com/he/online-color-picker-hex-rgb-lch/) ([Markdown](https://acrafto.com/he/online-color-picker-hex-rgb-lch/index.md))