# Färgväljare

> Färghjul i HSV, HSL och konstnärens RYB, färdiga färgharmonier, konvertering HEX, RGB, HSL, OKLCH, CMYK och närmaste Tailwind-token. Gratis.

URL: https://acrafto.com/sv/fargv%C3%A4ljare-online/  
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.

Välj en färg på hjulet, finjustera den på mättnadsytan och läs av den i varje format ditt projekt använder, från `#RRGGBB` till `oklch()`. Verktyget täcker även sådant andra färgväljare hoppar över: tre hjulgeometrier inklusive konstnärens RYB-hjul, harmonier som bygger en palett åt dig, en alfakanal och export av hela paletten med ett klick som CSS-variabler, SCSS eller JSON. Allt beräknas i din webbläsare.

## RYB eller RGB? Tre färghjul istället för ett

Väljaren **Hjulläge** ändrar hur nyanserna är ordnade på hjulet:

- **HSV** och **HSL** är digitala hjul. Nyanserna ligger som ljus blandas på en skärm. De skiljer sig i den fyrkantiga ytan: i HSV är det ljusaste hörnet den rena nyansen, HSL lägger rena nyanser i mitten av ljusheten med vitt ovanför.
- **RYB (konstnärens)** ordnar nyanser som konstnärer lär sig dem: rött, gult och blått som primärfärger, med orange, grönt och lila däremellan (se [RYB color model](https://en.wikipedia.org/wiki/RYB_color_model), på engelska). Skillnaden märks mest i harmonierna. På RYB-hjulet är komplementet till rött **grönt** och komplementet till blått **orange**, de klassiska paren från bildkonsten. Ett digitalt hjul parar istället rött med cyan. Om en “komplementär” palett från en vanlig färgväljare någon gång känts fel, är det här förklaringen.

## Färgharmonier: en palett som byggs åt dig

I fältet **Färgharmoni** väljer du en regel. Hjulet markerar följdfärgerna och en färdig palett visas nedanför:

- **Komplementär:** en motsatt färg. Den starkaste kontrasten, passar för en enda accent bredvid din huvudsakliga varumärkesfärg.
- **Delad komplementär:** de två grannarna till motsatsen. Nästan lika mycket kontrast, men lättare att balansera.
- **Triadisk:** tre nyanser jämnt fördelade på hjulet. Levande men ändå stabilt när en dominerar och de andra två används sparsamt.
- **Tetradisk (kvadrat):** fyra nyanser. Rika scheman för illustrationer och diagram, svåra att balansera i ett appgränssnitt.
- **Analog:** de närmaste grannarna. Lugn kombination för bakgrunder och övergångar.
- **Monokromatisk:** en nyans i flera ljushetsnivåer. Det säkraste valet för knapptillstånd (hover, aktiv, inaktiverad).

Kopiera hela paletten med ett klick i det format du väljer: ren **HEX**, **RGB**, **HSL**, **OKLCH**, färdiga **CSS-variabler** (`--color-1: …`), **SCSS-variabler** eller **JSON** för koden. Om paletten håller kontrasten även för personer som har svårt att skilja nyanser åt kan du snabbt kontrollera det på en skärmdump efter [konvertering till gråskala](https://acrafto.com/sv/konvertera-bilder-till-graskala-online/).

## Konvertera HEX, RGB, HSL, OKLCH och CMYK: klistra in vad som helst, få allt

Inmatningsfälten tar emot nästan vilken färgnotation som helst: `#f80`, `#ff8800`, åttasiffrig hex med transparens, `rgb()` och `rgba()`, `hsl()`, `hwb()`, `lch()`, `oklch()`, `oklab()`, `cmyk()`, `0xFF8800` och namngivna CSS-färger som `rebeccapurple`. Oavsett vad du matar in får du sju samstämda utdata: **HEX, RGB, HSL, HSV, LCH, OKLCH och CMYK**, var och en med egen kopieringsknapp.

Reglaget **Opacitet (alfa)** under förhandsgranskningen växlar utdata till sina transparenta former `#RRGGBBAA`, `rgba()` och `hsla()`. Förhandsgranskningen ritas mot ett rutmönster, så du ser transparensen direkt.

## Närmaste Tailwind CSS-token för valfri färg

Två chips under förhandsgranskningen namnger färgen: **närmaste namngivna CSS-färg** (praktiskt för snabba prototyper) och **närmaste Tailwind-token**, till exempel `orange-500`. Du håller dig då kvar i ditt designsystem istället för att hitta på egna engångsvärden. Klicka på en chip för att kopiera den.

Det svarar på frågan som dyker upp vid varje designöverlämning: designern skickade en hexkod, vilken Tailwind-klass matchar bäst? Matchningen beräknas mot Tailwind CSS 4:s standardpalett (se [Tailwinds dokumentation](https://tailwindcss.com/docs/colors), på engelska), så du kan använda token direkt i ett klassnamn.

## Vilket färgformat ska du använda?

| Format | Fullständigt namn | När du ska använda det |
| :--- | :--- | :--- |
| **HEX** | Hexadecimal | **Standardvalet för webben.** Kort, stöds överallt, lätt att kopiera. Åtta siffror lägger till transparens. |
| **RGB** | Red, Green, Blue | **Så tänker skärmar.** Tre ljuskanaler från 0 till 255. Formatet de flesta API:er och canvas-kod förväntar sig. |
| **HSL** | Hue, Saturation, Lightness | **För justering på ögonmått.** “Lite ljusare” eller “mindre mättad” betyder att ändra en enda siffra. |
| **HSV** | Hue, Saturation, Value | **Grafiska program.** Modellen bakom färgväljaren i Photoshop och GIMP. |
| **LCH** | Lightness, Chroma, Hue | **Perceptuellt jämn.** Samma numeriska steg ser ut som samma visuella steg, vilket HSL bara låtsas göra. |
| **OKLCH** | OK Lightness, Chroma, Hue | **Det moderna CSS-valet.** Rättar till nyansförskjutningarna i blått som stör LCH. Stöds av alla aktuella webbläsare och passar designtokens. |
| **CMYK** | Cyan, Magenta, Yellow, Key | **Riktmärke för tryck.** En ungefärlig konvertering för dialogen med tryckeriet, de slutgiltiga värdena avgörs av dess färgprofil. |

Varför OKLCH är perceptuellt jämnare än äldre modeller förklarar Björn Ottosson, som skapade Oklab-rymden, i sin [ursprungliga artikel](https://bottosson.github.io/posts/oklab/) (på engelska). Syntax och webbläsarstöd sammanfattas på [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklch) (på engelska). Hur trycksystemet fungerar beskrivs i [Wikipedias artikel om CMYK](https://sv.wikipedia.org/wiki/CMYK).

## Detaljer som sparar tid

- **Historiken sparas automatiskt.** De senaste 24 färgerna överlever en sidladdning. De stannar bara i din webbläsares lagring och skickas aldrig iväg.
- **Pipett.** I webbläsare med EyeDropper-API (Chrome och Edge) väljer du en färg var som helst på skärmen, även utanför webbläsarfönstret. Vill du hämta en färg ur ett foto eller en logotypfil, använd [färgplockaren](https://acrafto.com/sv/fargplockare-fran-bild/) istället.
- **Tangentbordskontroll.** Både hjulet och mättnadsytan reagerar på piltangenter, så du kan finjustera färgen i små steg.
- **Förinställningar** ger vanliga baskolörer när du bara behöver en snabb start.

## Vanliga frågor

### Hur konverterar jag OKLCH till HEX?

Klistra in ett `oklch()`\-värde i OKLCH-fältet, så räknas alla andra utdata om direkt, HEX inkluderat. Det fungerar även åt andra hållet: skriv in en HEX-kod och läs av motsvarande `oklch()`. En brasklapp: OKLCH kan beskriva färger utanför sRGB-gamutet, och de klipps till det sRGB kan visa. En mycket mättad `oklch()` ser därför inte likadan ut som sin HEX-motsvarighet på en skärm med brett gamut.

### Kan jag använda oklch() i produktions-CSS?

Ja. Alla aktuella versioner av Chrome, Edge, Firefox och Safari stöder `oklch()`, och det har blivit ett populärt sätt att skriva designtokens (Tailwind CSS 4 definierar hela sin palett i det). Lägg en HEX-fallback på raden före för väldigt gamla webbläsare. Det här verktyget ger dig båda värdena.

### Varför ändras harmonierna när jag byter till RYB-hjulet?

Därför att det som räknas som "motsatt" beror på hur nyanserna är fördelade runt cirkeln. RYB-hjulet sprider ut pigmentens primärfärger jämnt, så komplementära par stämmer med det konstnärer lär sig: rött och grönt, blått och orange, gult och lila. HSV- och HSL-hjulen fördelar nyanser efter hur ljus blandas, och parar därför rött med cyan. Inget av sätten är fel: RYB följer traditionell konstundervisning, HSV och HSL följer det skärmar gör.

### Kan jag lita på CMYK-värdena för tryck?

Se dem som en fingervisning. Den faktiska tryckkonverteringen beror på tryckeriets [ICC-profil](https://sv.wikipedia.org/wiki/ICC-profil), papper och bläck. Samma RGB-färg blir olika på bestruket och obestruket papper. Värdena här räknas med standardformeln, som tar dig nära, men det slutgiltiga provtrycket avgörs av tryckeriet.

### Var finns pipettknappen i Firefox eller Safari?

Den är dold med flit. [EyeDropper-API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API) (MDN, på engelska), som knappen bygger på, stöds ännu bara av webbläsare byggda på Chromium (Chrome, Edge, Opera). Alla andra funktioner i verktyget fungerar överallt, det är bara valet av färg från skärmen som saknas. Behöver du en färg från en bild, använd [färgplockaren](https://acrafto.com/sv/fargplockare-fran-bild/), som fungerar i alla webbläsare.

### Är min färghistorik privat?

Ja. Historiken sparas i webbläsarens localStorage på din enhet. Inget du väljer, klistrar in eller kopierar skickas iväg. Hela verktyget körs som JavaScript i webbläsaren, vilket du kan kontrollera på fliken Nätverk i utvecklarverktygen.

## 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))
- 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))
- Norsk (no): [Fargehjul og fargevelger](https://acrafto.com/no/online-fargevelger-hex-rgb-lch/) ([Markdown](https://acrafto.com/no/online-fargevelger-hex-rgb-lch/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))