tigtools

Bildfärgväljare

Ladda upp en bild och klicka var som helst för att få den exakta färgen på den pixeln, eller låt verktyget hitta huvudfärgerna i hela bilden.

Körs i din webbläsare Ingen registrering

JPEG, PNG, WebP, GIF, AVIF eller BMP, upp till 25 MB. Bilden stannar på din enhet.

Så här använder du det

  1. Välj en bild eller dra den till rutan.
  2. För pekaren över bilden, så visar förstoringsglaset pixlarna runt den.
  3. Klicka eller tryck för att välja färgen och kopiera den som HEX, RGB eller HSL.
  4. Bläddra ner för de dominanta färgerna, välj hur många du vill ha och kopiera dem eller ladda ner dem som CSS-variabler.

Så fungerar det

Bilden ritas upp på en canvas i webbläsaren och färgen för den exakta pixeln under pekaren läses av från den. Förstoringsglaset visar ett förstorat område på 11 × 11 pixlar, med den valda pixeln markerad. Bilder som är större än 4096 pixlar på en sida skalas först ned, så på mycket stora foton är en vald pixel medelvärdet av några ursprungliga pixlar.

Dominanta färger hittas med k-means-klustring: pixlarna grupperas först i 32 768 små färghinkar, sedan slås hinkarna ihop till det antal färger du väljer, viktat efter hur många pixlar varje hink innehåller. Startpunkterna väljs deterministiskt, så samma bild ger alltid samma palett.

Färger läses av i den sRGB-färgrymd som webbläsaren använder för visning. Om en bild har en inbäddad bred färgprofil kan värdena skilja sig något från vad ett bildredigeringsprogram visar. I webbläsare som stöder det (Chrome och Edge på datorn) använder knappen Välj från skärmen den inbyggda EyeDropper-funktionen för att hämta en färg var som helst på skärmen.

Exempel

Matcha en varumärkesfärg

Ladda upp en skärmbild av en logotyp, klicka på dess huvudfärg och kopiera #1a73e8 eller rgb(26, 115, 232) till din CSS.

Palett från ett foto

Ett strandfoto uppdelat i 6 färger ger sand-, havs- och himmelstoner, var och en med den andel av bilden som den täcker, sorterade från störst till minst.

Kontrollera en nyans

Zooma in med förstoringsglaset för att välja den exakta pixeln i en tunn linje i stället för den kantutjämnade kanten intill.

Vanliga frågor

Varför skiljer sig färgen något från mitt bildredigeringsprogram?

Webbläsare konverterar bilder till sRGB för visning. Foton med en bred färgprofil (Display P3, Adobe RGB) kan visa något annorlunda värden i ett redigeringsprogram som behåller originalprofilen.

Varför saknas knappen Välj från skärmen?

Det kräver EyeDropper-API:et, som bara stöds av vissa webbläsare, för närvarande Chrome och Edge på datorn. Att välja färg från den uppladdade bilden fungerar överallt.

Hur väljs de dominanta färgerna ut?

Genom k-means-klustring av alla pixlar, viktat efter hur ofta varje färg förekommer. Små men färgstarka detaljer kan slås ihop med en större närliggande färg; öka antalet färger för att skilja dem åt.

Laddas bilden upp?

Nej. Bilden avkodas och analyseras av den här sidan i din webbläsare och lämnar aldrig din enhet.

Integritet

Bilden bearbetas helt i din webbläsare. Den laddas inte upp, och valda färger skickas eller sparas inte.