Pixelprecis färgavläsning direkt i webbläsaren
Med verktyget Färgväljare för bilder kan du ladda upp en bild från din enhet och analysera dess färgdata på pixelnivå. Genom att flytta pekaren över bilden kan du granska färgerna i realtid med hjälp av en inbyggd förstoringsvy som underlättar exakt positionering. När du har hittat den pixel du söker kan du spara färgkoderna i flera olika format och kopiera dem för användning i dina egna projekt.
När en bild läses in i verktyget visas färgdata och koordinater för bildens mittpixel automatiskt. Du kan därefter navigera fritt över bildytan för att samla in nya färgprover.
Hantering av bildfiler och format
Verktyget accepterar en enskild bildfil åt gången. Följande filformat och tillhörande MIME-typer stöds av systemet:
- PNG (
image/png) - JPG / JPEG (
image/jpeg) - WebP (
image/webp) - GIF (
image/gif) - AVIF (
image/avif) - HEIC / HEIF (
image/heic,image/heif)
Om du försöker släppa en fil med ett format som inte stöds visas felmeddelandet: "Filtypen stöds inte. Prova en bild i formatet PNG, JPG, WebP, GIF, AVIF eller HEIC." Om en bildfil är skadad eller av andra skäl inte kan läsas av webbläsaren visas meddelandet: "Bilden kunde inte öppnas. Den kan vara skadad eller i ett format som inte stöds."
För att säkerställa stabil prestanda i webbläsaren finns en inbyggd storleksbegränsning. Bilder där den längsta sidan överskrider 4096 pixlar skalas automatiskt ned till denna gräns innan de analyseras.
Färgmodeller och utdata
När du rör pekaren över bilden eller väljer en specifik punkt genererar verktyget färgdata i tre standardiserade färgmodeller:
- HEX: Det hexadecimala färgformatet (till exempel #ffffff) som används flitigt inom webbdesign och HTML/CSS.
- RGB: Värden för rött, grönt och blått (Red, Green, Blue) som definierar färgstyrkan i ett additivt färgsystem.
- HSL: Värden för färgton, mättnad och ljusstyrka (Hue, Saturation, Lightness), vilket ger en mer intuitiv representation av färgens egenskaper.
Utöver färgkoderna visar verktyget även teknisk information om bilden och den valda punkten:
- Storlek: De exakta dimensionerna för den inlästa bilden i pixlar.
- Pixel: De specifika X- och Y-koordinaterna för den pixel som för närvarande analyseras.
Om du klickar på något av de visade färgfälten (HEX, RGB eller HSL) kopieras värdet direkt till ditt urklipp. Om din webbläsare blockerar denna åtgärd visas felmeddelandet: "Kunde inte kopiera – din webbläsare blockerade åtkomsten till urklipp."
Precision, komprimering och transparens
Verktyget läser av och visar det exakta pixelvärde som finns lagrat i bildfilen. Det är dock viktigt att förstå hur bildkomprimering och transparens påverkar de värden du ser:
- Komprimering och kantutjämning: Om du analyserar en JPEG-bild eller en skärmdump kan färgerna skilja sig från de ursprungliga designvärdena. Detta beror på att JPEG-komprimering introducerar artefakter och att kantutjämning (anti-aliasing) blandar pixlar längs skarpa linjer för att ge ett mjukare visuellt intryck.
- Transparens (Alfakanal): Om en pixel är delvis transparent läses dess färg färgmässigt av helt fristående, utan att ta hänsyn till vad som ligger bakom eller under pixeln i visningsläget. Om pixeln innehåller transparens visas informationen: "Alfa
{n}% – den här pixeln är delvis transparent." (där{n}representerar den faktiska transparensgraden).
Tangentbordsnavigering och historik
För användare som kräver högsta möjliga precision eller föredrar tangentbordsstyrning erbjuder verktyget fullt stöd för navigering via tangentbordet:
- Piltangenter: Flyttar hårkorset över bilden pixel för pixel för att ge exakt kontroll över färgvalet.
- Shift + Piltangenter: Flyttar hårkorset i steg om 10 pixlar för snabbare förflyttning över större bildytor.
- Enter eller Blanksteg: Sparar den aktuella färgen till din historik.
När du sparar en färg genom att klicka på bilden eller trycka på Enter/Blanksteg visas bekräftelsen: "Sparade {hex} till dina val." (där {hex} är den sparade färgens hexadecimala kod).
Historiken kan spara upp till 12 färgval samtidigt. Om du sparar färger som har identiska RGB-värden men olika alfavärden (transparens), kommer dessa att sparas som separata objekt i historiken. Om historiken är tom visas texten: "Färger du sparar visas här – klicka på ett färgprov för att läsa in det igen."
Om du vill rensa alla data, tömma historiken och återställa verktyget till sitt ursprungliga skick klickar du på knappen "Börja om".
Integritet och lokal databehandling
När du använder detta verktyg behandlas dina bilder helt lokalt. Bilden läses direkt från din enhet och lämnar aldrig din webbläsare. Ingenting laddas upp till BroBroGo. Detta innebär att ingen bilddata skickas över internet eller lagras på externa servrar under analysen.
Vanliga frågor
Hur väljer jag en färg från bilden?
Flytta pekaren över bilden så visar panelen färgen under den, med ett förstoringsglas som zoomar in så att du träffar exakt rätt pixel. Klicka för att spara färgen till dina val. Du kan också fokusera på bilden och flytta hårkorset med piltangenterna och sedan trycka på Enter.
Vilka färgformat får jag?
Varje pixel du väljer visas som HEX, RGB och HSL samtidigt. Klicka på valfritt värde för att kopiera det, redo att klistras in i CSS eller ett designverktyg.
Varför matchar inte alltid den valda färgen vad jag förväntade mig?
Du får det exakta pixelvärde som finns sparat i bilden. Om det är en JPEG eller en skärmdump kan komprimering och kantutjämning redan ha ändrat närliggande pixlar något, och en delvis transparent pixel läses av för sig själv, utan det som ligger bakom.