Färgväljare från bild — Få HEX- och RGB-färgkoder

Ladda upp valfri JPG, PNG, WebP eller GIF och klicka var som helst på den visade bilden - den exakta pixeln under markören samplas och visas som HEX, RGB och HSL med en kopia för varje format. Användbart för att matcha en märkesfärg, ta prov från en färgruta från ett fotografi eller fånga accenttoner från en designmockup.

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.

Ja. Den körs i webbläsaren och behöver inget konto. Det finns inget att installera och ingen gräns för antalet paletter du inspekterar.

Ingen bild behövs. Färgväljaren och färghjulet högst upp fungerar helt fristående — dra i mättnads-/ljushetsrutan och nyansreglaget, eller skriv in valfritt HEX-, RGB- eller HSL-värde för att ställa in en exakt färg. Att ladda upp en bild är valfritt, bara för att plocka färger direkt ur ett foto med pipetten.

Välj din basfärg så bygger panelen Färgharmonier direkt upp komplementära, analoga, triadiska, delat komplementära, tetradiska och monokromatiska scheman utifrån färghjulets teori. Klicka på valfritt färgprov för att kopiera dess HEX-kod.

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.

Ja — Pixoate stöder batch- och bulkbearbetning. Växla till batch-läge, lägg till upp till 60 bilder på Premium eller 200 på Pro, ställ in dina alternativ en gång och varje bild bearbetas med samma inställningar innan du laddar ner ett kalkylblad – en palettrad per bild. Bulkbearbetning är en Premium-funktion; utgången använder samma kvalitet och inställningar som singelläge.

Ja – med massbearbetning konfigurerar du inställningarna en gång och de gäller för varje objekt i partiet – upp till 60 bilder på Premium eller 200 på Pro. Det finns ingen anledning att upprepa inställningarna per objekt, och palettextraktion körs i din webbläsare; endast det färdiga kalkylarket sparas för nedladdning.

Det beror nästan alltid på en av tre saker. Filen överskrider den kostnadsfria uppladdningsgränsen på 11 MB – Premium tillåter 50 MB och Pro 120 MB. Formatet kanske inte stöds av verktyget; kontrollera listan i uppladdningspanelen. Eller så har filen egentligen inte det format som filnamnet anger: att byta namn på en fil ändrar inte innehållet, och därför kan en bild som ser giltig ut ändå nekas.

Den rapporterar vad som verkligen finns i filen, så ett tomt eller överraskande resultat betyder vanligtvis att data aldrig fanns där – avskalad av appen som senast sparade den, borttagen av en plattform vid uppladdning eller frånvarande från originalet. Prova den orörda originalfilen direkt från kameran eller källan istället för en kopia som har gått igenom en meddelandeapp.

Nej. Du kan köra Color Picker och ladda ner det kostnadsfria resultatet utan ett konto, och det har ingen vattenstämpel. Premium är vad du köper när gränserna börjar bita: upp till 60 filer i en batch, större uppladdningar, inget dagligt tak och resultatet med originalupplösning. Ingenting avslöjas vid nedladdningssteget som inte var synligt innan du började.

Nej — Färgväljaren körs i webbläsaren på skrivbordet och telefonen. Det finns inget att installera, ingen testversion att starta och ingen licens att köpa innan du kan se om den gör vad du behöver. Prova det på filen du faktiskt har fastnat med snarare än ett prov.