Image Color Picker: Hämta färgkod från en bild

Ladda bilden i Image Color Picker och klicka på den punkt vars färg du behöver. Verktyget visar direkt pixelns HEX-kod, RGB-värde och HSL-värde. Kopiera värdet med ”Kopiera”. Ett klick på solen i exempelbilden ger #ffd166. I HEX-koden står två tecken vardera för rött, grönt och blått (ff = 255, d1 = 209, 66 = 102). Därför är #ffd166 samma färg som rgb(255, 209, 102) och hsl(42, 100 %, 70 %).

En färgpipett, även kallad färgväljare eller Eyedropper, läser av färgen på en punkt och visar den som en färgkod. Image Color Picker är en färgpipett online för bilder och fungerar i webbläsaren, även på mobilen – du behöver ingen app. På mobilen trycker du på en punkt och drar med fingret; förstoringsglaset visar pixlarna under. Med tangentbordet flyttar du markeringen 1 pixel med piltangenterna (10 med Skift) och sparar färgen i historiken med Enter.

Nej. Bilden läggs på en rityta i din webbläsare och analyseras där. Den laddas inte upp eller sparas, och historiken över valda färger finns bara kvar i den här fliken. Du kan kontrollera nätverksfliken i utvecklarverktygen: inga förfrågningar görs när bilden laddas eller när du klickar.

Ta en skärmbild (Windows: Windows+Skift+S, Mac: Cmd+Skift+4 med Ctrl för urklipp) och klistra in den i verktyget med Ctrl+V (Mac: Cmd+V). Klicka sedan på en punkt och kopiera färgkoden. På så sätt kan du läsa av färger från en webbplats, app eller ett spel utan webbläsartillägg.

Det finns fyra vanliga orsaker. För det första sparas färger i JPG-bilder med kvalitetsförlust, så intilliggande pixlar kan skilja sig något. För det andra kan inbäddade färgprofiler (till exempel Display P3) konverteras till sRGB av webbläsaren, medan andra program visar råvärdet. För det tredje visar en skärmbild färgen efter skärmens färghantering. För det fjärde analyserar verktyget bilder över 36 megapixlar i förminskat format. För foton kan du därför ställa in medelvärdesberäkningen på 3 × 3, 5 × 5 eller 11 × 11 pixlar. Då beräknar verktyget genomsnittet av 9, 25 eller 121 pixlar runt pekaren i stället för att läsa av ett avvikande värde. För enfärgade ytor, som i en logotyp, är ”1 pixel” rätt val.

Ladda bilden så visas paletten direkt under den. Du kan välja 2 till 12 färger och se varje färgs HEX-kod och andel av bildytan. Verktyget läser av minst 90.000 jämnt fördelade pixlar (mindre bilder helt), hoppar över transparenta pixlar och grupperar färgerna med median cut-metoden. För foton är paletten en uppskattning. Med ”Kopiera HEX-lista” får du en lista. Med ”Kopiera CSS-variabler” får du rader som --color-1: #08203a; för ett :root-block, som du använder med var(--color-1).

Utöver färgvärdena visar verktyget motsvarande CSS-färgnamn eller, om det inte finns någon exakt träff, det närmaste CSS-färgnamnet och dess HEX-värde. För #ffd166 är det khaki (#f0e68c), alltså bara en uppskattning. Verktyget ger inga RAL-, Pantone-, NCS- eller CMYK-värden. En färg på skärmen påverkas också av ljus och kamera, så kontrollera alltid väggfärg eller lack mot ett riktigt färgprov. HSV och CMYK för en känd färg hittar du i Color Picker.

Verktyget beräknar färgens WCAG-kontrastförhållande mot vitt och svart. Normal text behöver minst 4,5:1 (nivå AA), 7:1 är mycket bra (AAA), och för stor text räcker 3:1. På #ffd166 når svart text 14,56:1, men vit text bara 1,44:1. Använd Contrast Checker för att kontrollera kontrasten mellan två valfria färger.

PNG, JPG, WebP, AVIF, GIF, BMP och SVG, beroende på vad din webbläsare kan läsa. För GIF analyseras den första bildrutan. HEIC och HEIF, som iPhones använder, kan bara öppnas i Safari. Annars behöver du först exportera fotot som JPG. Filer får vara upp till 40 MB. För halvtransparenta pixlar visar verktyget även HEX-värdet med alfakanal, till exempel #ff000080. Helt transparenta pixlar har ingen färg, vilket verktyget meddelar.