Färgväljare
Välj valfri färg från en bild och få HEX, RGB, HSL, HSV och CMYK-koder direkt.
Ladda upp en bild för att välja en färg
Dra & släpp, klistra in eller bläddra — PNG, JPG, WEBP eller GIF
Tips: du kan också klistra in en bild med Ctrl/Cmd + V
Färgkoder
Närmaste färgnamn: Royal Blue
Färgharmonier
Kontrastkontroll (WCAG)
Exempeltext
Sparade färger
Inga sparade färger ännu — välj en och tryck på “Spara färg”.
En färgväljare är ett verktyg som låter dig plocka exakt vilken färg som helst från en bild och direkt läsa av dess färgkoder. Med pipetten klickar du på en enskild pixel och får omedelbart fram värdena i alla vanliga färgformat — HEX, RGB, HSL, HSV och CMYK — så att du kan återanvända precis rätt nyans i dina egna projekt.
Färgväljaren är användbar inom webbdesign, frontend-utveckling, tryck och tillgänglighet. Du kan matcha en varumärkesfärg, hämta ut en CSS-färgkod, förbereda en fil för tryck eller kontrollera att texten har tillräcklig kontrast. Verktyget är helt gratis och körs direkt i webbläsaren — dina bilder laddas aldrig upp till någon server, vilket skyddar din integritet. Utöver att välja enskilda färger kan du extrahera hela paletter ur en bild, generera färgharmonier och kontrollera WCAG-kontrast mellan text och bakgrund.
Så väljer du en färg från en bild
- 1
Ladda upp eller dra in en bild
Dra och släpp en bild i verktyget, klistra in den med Ctrl/Cmd + V eller bläddra fram en fil från din dator. PNG, JPG, WEBP och GIF stöds, och bilden bearbetas lokalt i webbläsaren.
- 2
Klicka med pipetten på en pixel
Använd pipetten och klicka på det ställe i bilden där färgen du vill ha finns. Zooma in vid behov för att träffa exakt rätt pixel.
- 3
Läs av och kopiera färgkoderna
Verktyget visar färgen som HEX, RGB, HSL, HSV och CMYK samtidigt. Klicka på valfri kod för att kopiera den till urklipp och klistra in den där du behöver den.
- 4
Extrahera en palett från bilden
Låt verktyget analysera bilden och ta fram de mest framträdande färgerna som en samlad palett — perfekt när du vill fånga hela känslan i ett foto.
- 5
Generera färgharmonier
Utifrån din valda färg kan du skapa komplementära, analoga, triadiska, tetradiska, delade komplementära och monokromatiska färgkombinationer för att bygga en balanserad färgskala.
- 6
Kontrollera kontrast och exportera paletten
Testa kontrasten mellan text och bakgrund mot WCAG-kraven, spara dina favoritfärger och exportera paletten som CSS, JSON eller PNG.
HEX, RGB, HSL, HSV och CMYK förklarade
Samma färg kan beskrivas på flera olika sätt beroende på var den ska användas. Skärmar bygger färg av ljus (RGB och dess varianter) medan tryck bygger färg av bläck (CMYK). Här är de vanligaste färgmodellerna och när du bör använda respektive.
| Model | Example | Best for |
|---|---|---|
| HEX | #3B82F6 | Webb och CSS |
| RGB | rgb(59, 130, 246) | Skärmar och digitala gränssnitt |
| HSL | hsl(217, 91%, 60%) | Intuitiv justering av nyans, mättnad och ljushet |
| HSV | hsv(217, 76%, 96%) | Designverktyg och färgväljare |
| CMYK | cmyk(76%, 47%, 0%, 4%) | Tryck och fyrfärgstryck |
Webb- och UI-design
Plocka färger direkt från skisser, moodboards eller referensbilder och bygg en enhetlig palett för dina gränssnitt. Du får HEX- och HSL-koder som passar rakt in i designverktyg och stilguider, så att knappar, bakgrunder och accentfärger blir konsekventa i hela produkten.
Frontend-utveckling
Kopiera exakta färgvärden och lägg in dem som CSS-variabler eller designtokens i din kodbas. Med HEX och RGB på plats slipper du gissa nyanser, och du kan snabbt matcha en färg ur en design och exportera hela paletten som färdig CSS.
Tryck och varumärke
När material ska tryckas behöver du CMYK-värden i stället för skärmfärger. Färgväljaren omvandlar varje färg till CMYK så att du kan förbereda trycksaker, förpackningar och profilmaterial med rätt bläckblandning och hålla varumärkesfärgerna konsekventa.
Tillgänglighet
Kontrollera att kombinationen av text- och bakgrundsfärg uppfyller WCAG-kraven. Verktyget räknar ut kontrastkvoten och visar om den klarar nivå AA och AAA för både normal och stor text, vilket gör din design läsbar för fler användare.
Jämförelsen
Många färgväljare online nöjer sig med att visa HEX och RGB. Så här står sig vårt verktyg mot imagecolorpicker.com.
| Färgmodeller | HEX, RGB, HSL, HSV och CMYK | I huvudsak HEX och RGB |
| CMYK för tryck | Ja, för alla färger | Nej |
| WCAG-kontrastkontroll | Inbyggd, med AA/AAA-bedömning | Nej |
| Färgharmonier | Sex olika harmonityper | Nej |
| Annonser | Inga annonser | Annonsfinansierad |
Vanliga frågor
Hur väljer jag en färg från en bild?
Ladda upp eller dra in bilden i färgväljaren och klicka med pipetten på den pixel vars färg du vill ha. Verktyget visar då genast färgens HEX-, RGB-, HSL-, HSV- och CMYK-värden som du kan kopiera med ett klick.
Vad är en HEX-färgkod?
En HEX-färgkod är ett sexsiffrigt värde som inleds med brädgård, till exempel #3B82F6. De tre paren står för mängden rött, grönt och blått ljus. HEX är det vanligaste sättet att ange färger i HTML och CSS för webben.
Hur konverterar jag RGB till HEX?
Varje RGB-komponent (0–255) skrivs om som ett tvåsiffrigt hexadecimalt tal och sätts ihop till en kod. Du behöver dock inte räkna manuellt — färgväljaren visar HEX och RGB för samma färg samtidigt, så konverteringen sker automatiskt.
Hur skapar jag en palett från ett foto?
Ladda upp fotot och använd palettfunktionen. Verktyget analyserar bilden och plockar ut de mest framträdande färgerna som en samlad palett, som du sedan kan spara och exportera som CSS, JSON eller PNG.
Hur kontrollerar jag färgkontrast för tillgänglighet?
Ange en textfärg och en bakgrundsfärg i kontrastkontrollen. Verktyget räknar ut kontrastkvoten och talar om ifall den uppfyller WCAG-nivåerna AA och AAA för normal respektive stor text, så att din text blir tillräckligt läsbar.
Är verktyget gratis och privat?
Ja. Färgväljaren är helt gratis att använda och körs direkt i din webbläsare. Bilderna du väljer färger från laddas aldrig upp till någon server utan behandlas enbart lokalt på din enhet.
