Grab the exact color from any image

Ladda upp valfri JPG, PNG, WebP eller GIF och klicka var som helst på den visade bilden – den exakta pixeln under din markör samplas och visas som HEX, RGB och HSL med kopiering i ett klick för varje format. Perfekt för att matcha en varumärkesfärg, plocka ett färgprov från ett foto eller fånga accenttoner från en designskiss.

Klicka på vilken pixel som helst så visar det här färgväljarverktyget dess HEX-färgkod (till exempel #FF6B35) tillsammans med RGB och HSL — samma HTML/CSS-färgkoder som du klistrar in direkt i ett stilmall, en designtoken eller ett HTML-attribut. Tryck på Kopiera för att hämta hex-koden med ett klick.

Bilden nedsamplas till 320 pixlar på sin längsta sida, sedan grupperas varje pixel efter sina översta 4 bitar per kanal. De mest fyllda grupperna medelvärdesberäknas tillbaka till full 8-bitarsfärg, sorteras efter frekvens och returneras som din palett. Resultatet är vanligtvis 5–24 dominerande färger som visuellt sammanfattar bilden.

Ja. Nedladdningsknapparna producerar två format: ett CSS-variabelblock redo att klistra in i en :root-selektor (--color-1, --color-2…), och en JSON-fil med hex, RGB-komponenter och viktprocent för varje färg. Båda formaten integreras smidigt i designtokens, Tailwind-konfigurationer och palettbibliotek.

Nej – färgplockning och palettutvinning sker helt i din webbläsare med HTML canvas-API:et. Bilden stannar på din enhet, vilket gör verktyget säkert för opublicerade produktbilder, utkast till mockuper och varumärkesmaterial under sekretessavtal.

För arbete med varumärkesidentitet är 5–8 färger den optimala mängden — det fångar det dominerande temat utan att späda ut accentvalen. För datavisualisering rekommenderar vi 10–16 färger så att du har tillräckligt med kategoriska nyanser. Med reglaget väljer du mellan 5 och 24.

Pixlar med alfa under 128 ignoreras, så transparenta bakgrunder förorenar inte paletten med "bakgrundsfärger". Det gör bildfärgväljaren särskilt bra för produktutklipp, klistermärkeskonst och isolerade motiv.

HEX (#RRGGBB) är det mest kompakta och är vad CSS, Figma och Sketch använder som standard. RGB visar de tre komponentvärdena från 0–255 – användbart när du arbetar med bilddata programmatiskt. HSL (nyans, mättnad, ljushet) är intuitivt för att justera färger: ändra nyansen för att byta färgfamilj, justera ljusheten för toningar och skuggningar.

Yes. Free, free account required to download, no limits on image size or number of palettes extracted. There is nothing to install — the entire tool is a single web page.

No image needed. The Color Picker & Wheel at the top works on its own — drag the saturation/brightness square and the hue slider, or type any HEX, RGB or HSL value to dial in an exact color. Uploading an image is optional, just for eyedropping colors out of a photo.

Pick your base color and the Color harmonies panel instantly builds complementary, analogous, triadic, split-complementary, tetradic and monochromatic schemes using color-wheel theory. Click any swatch to copy its HEX code.

I den fristående Färgväljaren och färghjulet ställer du in din färg och panelen visar dess kontrastförhållande mot rent vitt och rent svart tillsammans med WCAG-betyget — AAA, AA, AA Large eller Fail. Använd detta innan du färdigställer en text- eller knappfärg så att den förblir läsbar och uppfyller tillgänglighetsriktlinjerna i WCAG 2.1.

Ja. Den fristående Färgväljaren och färghjulet visar den närmast matchande namngivna CSS-färgen bredvid vilket HEX-, RGB- eller HSL-värde du än har ställt in, vilket är praktiskt för att snabbt beskriva en nyans i en brief, ett ärende eller en designspecifikation utan att gissa.

Klicka på Slumpa i Färgväljaren och hjulet för att hoppa till en ny färg, och använd sedan panelen Färgharmonier nedanför för att se komplementära, analoga, triadiska och andra samordnade paletter byggda från den färgen – ett snabbt sätt att hitta en utgångspunkt när du designar från grunden i stället för att plocka från en befintlig bild.

Använd rullgardinsmenyn Storlek ovanför paletten för att välja 5, 8, 10, 16 eller 24 dominerande färger – paletten räknas om direkt när du ändrar den. Kombinera en liten storlek som 5 för en ren varumärkespalett med pipetten för att plocka en eller två exakta accentnyanser som den automatiska extraheringen kanske jämnar ut.

Ja — den fristående Färgväljaren och hjulet visar din nuvarande färgs kontrastförhållande mot rent vitt och rent svart direkt under färgrutan, märkt AAA, AA, AA Large eller Fail enligt WCAG-tröskelvärdena (7:1, 4.5:1, 3:1). Använd den för att kontrollera att en text-/bakgrundskombination uppfyller tillgänglighetsstandarderna innan du låser en designfärg.

Färgväljaren och färghjulet matchar automatiskt vilken färg du än har ställt in — via väljaren, HEX-rutan eller RGB/HSL-fälten — mot dess närmaste standard-CSS-färgnamn, som visas som 'Närmaste namn' bredvid färgrutan. Det är ett snabbt sätt att beskriva en färg muntligt eller hitta dess närmaste webbsäkra motsvarighet.

Ja — varje klick eller tryck på den uppladdade bilden lägger till en ny färgruta i din lista Valda färger istället för att ersätta den senaste, så du kan bygga upp en egen uppsättning exakta pixelfärger från olika delar av ett foto. Ta bort en enskild färgruta med dess ×-knapp, eller töm hela listan med Rensa valda.

Ja — Slumpknappen (blanda-ikonen) i Färgväljaren och hjulet hoppar till en ny kombination av nyans, mättnad och ljusstyrka med ett klick, användbart för att bryta kreativa låsningar eller utforska en palett du inte hade skrivit in manuellt. HEX, RGB, HSL och harmonirutorna nedanför uppdateras alla tillsammans.

På en pekskärm drar du fingret över bilden för att förhandsgranska färgen under det i ett svävande liveprov, och lyfter sedan fingret för att lägga till just den pixeln i din lista Valda färger — ingen separat bekräftelsetryckning behövs. Samma rullgardinsmeny för palettstorlek och exportknappar fungerar likadant på mobilen.

Ja. Färghjulet högst upp på sidan har en Slumpa-knapp som hoppar till en slumpmässig färg och direkt visar dess HEX-, RGB- och HSL-koder, dess närmaste namngivna färg, kontrastförhållanden mot vitt och svart, samt fullständiga harmoniuppsättningar — komplementär, analog, triadisk, delad komplementär, tetradisk och monokrom. Det är ett snabbt sätt att utforska utgångspunkter för en palett.

Det här verktyget hämtar färger från en uppladdad bild eller det inbyggda färghjulet istället för att läsa av din skärm i realtid. Den snabbaste lösningen istället för en skärmfärgväljare: ta en skärmdump, släpp den på sidan och klicka på exakt den pixel du vill ha — du får samma HEX-, RGB- och HSL-koder utan att installera ett tillägg, och skärmdumpen lämnar aldrig din webbläsare.