Varför hex är det primära utdataformatet
Till skillnad från syskonsidor som fokuserar på RGB‑funktionsnotation eller HSL, returnerar den här sidan den hexadecimala färgkoden som förstaval. En hex‑kod som #1E90FF är sex tecken lång (eller tre vid shorthand) och saknar alfakanal i sin standardform. Detta gör den direkt användbar i CSS för egenskaper som color och background-color – utan extra parenteser eller syntax. I praktiken innebär det att du kan klicka på hex‑värdet i verktyget och klistra in det direkt i din kod eller designprogramvara. Hex är den kompakta, webb‑inhemska representationen av RGB‑värden, och sidan lyfter fram den just därför att den är det vanligaste formatet i UI‑arbete.
Vad som skiljer den här sidan från andra bildfärgplockare är att hex är det som visas först och kopieras enklast. Transparens rapporteras separat som en procentsats – exempelvis ”Alpha 34% – this pixel is partly transparent.” – eftersom ett hexvärde inte bär med sig alfainformation.
Så fungerar färgsamplingen
När du laddar upp en bild (PNG, JPG, WebP, GIF, AVIF eller HEIC) visas omedelbart färgvärdena och koordinaterna för bildens mittpunkt. Rör du muspekaren över bilden uppdateras värdena pixel för pixel. För att underlätta precision finns ett förstoringsglas som gör att du kan pricka rätt pixel även i komprimerade eller antialiasade områden. Klickar du på bilden sparas den aktuella pixeln i din färghistorik – max tolv olika färger. Om du klickar på en pixel med samma RGB‑värden men annan alfakanal sparas den som en separat post.
Verktyget visar även bildens dimensioner (bredd × höjd) samt pixelkoordinater (x, y) för den punkt du för närvarande pekar på. Alla färgvärden – hex, RGB och HSL – kan kopieras till urklipp genom att du klickar på värdet. Om webbläsaren blockerar urklippsåtkomst visas meddelandet ”Could not copy – your browser blocked clipboard access.”
En viktig detalj: om bildens längsta sida överstiger 4096 pixlar skalas den ner automatiskt. Detta eftersom en för stor bild skulle försämra prestandan i webbläsarens canvas. Skalningen är proportionell och påverkar inte färgvärdena i själva samplingspunkten – men du bör vara medveten om att en ner‑skalad bild kan ha förlorat en del information i kanten.
Transparens och alfakanalen
Hexkoden innehåller ingen alfainformation. För en sexsiffrig hex som #FF8040 motsvarar de första två tecknen rött, de två mittersta grönt och de två sista blått. Om pixeln däremot är halvtransparent rapporteras alfavärdet separat: ”Alpha 68% – this pixel is partly transparent.” Detta är avgörande att förstå: om du kopierar hex‑koden för en halvgenomskinlig pixel och använder den i CSS utan att lägga till en separat opacity‑deklaration, kommer färgen att visas som helt ogenomskinlig. Verktyget läser pixeln exakt som den lagras i bildfilen – det tar inte hänsyn till vad som finns bakom pixeln. Detta är särskilt viktigt när du arbetar med PNG‑bilder som har alfakanal.
I praktiken innebär det att om du har en bild med en halvgenomskinlig logotyp över en bakgrund, kommer färgvärdet på pixeln att vara det som faktiskt lagras i filen – inte den visuella blandningen som syns i ett renderat sammanhang. För att få den visuella färgen måste du blanda fram den själv (t.ex. med formeln C = α*F + (1‑α)*B), men det är inte vad verktyget gör. Verktyget rapporterar alltid pixelns lagrade RGBA‑värde.
Tangentbordsnavigation för precision
För användare som föredrar tangentbordet eller behöver hög precision går det att flytta en korsmarkör med piltangenterna. Varje tryck flyttar markören en pixel. Håller du inne Shift samtidigt flyttas markören tio pixlar i taget. Tryck på Enter eller Space för att spara den aktuella färgen i historiken. Detta gör samplingsprocessen fullt tillgänglig även utan mus.
Tangentbordsstyrningen är särskilt användbar när du arbetar med bilder där specifika pixelkoordinater är kända – du kan exempelvis navigera direkt till punkten (x=120, y=45) och spara färgen utan att behöva gissa med musen. Kom ihåg att korsmarkörens position alltid visas i koordinatfältet, så du kan enkelt verifiera att du är på rätt ställe.
Vanliga fallgropar och begränsningar
Komprimering och antialiasing. JPEG‑bilder och skärmdumpar lider ofta av block‑ eller antialias‑artefakter. En pixel som i originalbilden var enhetligt blå kan i en JPEG ha små variationer i rött och grönt på grund av förlustkomprimering. Detta gör att två intilliggande pixlar i vad som ser ut som en helt slät yta kan ge olika färgkoder. Verktyget visar alltid pixelns exakta lagrade värde – inte det visuella medelvärdet. För att få en representativ färg från en komprimerad bild är det bra att använda förstoringsglaset och välja en pixel som ligger så centralt som möjligt i ytan.
Stödda filformat. Endast PNG, JPG, WebP, GIF, AVIF och HEIC accepteras. MIME‑typerna är image/jpeg, image/png, image/webp, image/gif, image/avif, image/heic och image/heif. Om du försöker släppa en SVG eller BMP visas meddelandet ”That file type is not supported. Try a PNG, JPG, WebP, GIF, AVIF or HEIC image.” Om en bild inte kan öppnas visas ”That image could not be opened. It may be corrupted or in an unsupported format.”
Maximal historik. Du kan spara upp till tolv färger. När tolv är sparade måste du antingen starta om (knappen ”Start over”) eller kopiera de du behöver och sedan rensa sidan. Start over återställer allt: bilden tas bort, historiken töms och verktyget går tillbaka till sitt ursprungliga läge.
Ingen alfakanal i hex. Som nämnts finns inte alfavärdet i hexkoden. Om du planerar att använda färgen i ett sammanhang där genomskinlighet behövs måste du anteckna alfaprocentsatsen separat och antingen använda CSS opacity eller ett RGBA‑ eller HSLA‑värde. Sidans RGB‑ och HSL‑värden är alltid i funktionsnotation utan alfa – de är rena RGB/HSL. För RGBA måste du själv omvandla procentsatsen till decimal och lägga till den.
Integrera samplade färger i ditt arbetsflöde
Hexkoden från verktyget är direkt användbar i CSS, Figma, Photoshop, Sketch och de flesta digitala designverktyg. I Figma klistrar du bara in #1E90FF i färgväljaren. I Photoshop anger du hexvärdet i paletten eller använder färgväljarens hex‑fält. För användning i SVG eller HTML är hex den mest kompakta och standardiserade representationen.
För utvecklare som arbetar med CSS‑anpassade egenskaper (variabler) är det smidigt att kopiera hexkoden och direkt tilldela den som --primary: #1E90FF;. Meddelandet ”Saved ‹hex› to your picks.” visas när du klickar på en pixel, och sedan kan du klicka på hexvärdet i historikposten för att kopiera det – så slipper du memorera koden.
Vanliga frågor (FAQ)
Varför visas hexkoden med sex tecken, inte åtta?
Åtta tecken (t.ex. #1E90FF80) innehåller alfakanal. Verktyget använder sex tecken eftersom det är standard i CSS för ogenomskinliga färger. Alfavärdet rapporteras istället som text: ”Alpha 34%”.
Kan jag sampla en pixel som är helt genomskinlig?
Ja. Om en pixel har alpha = 0 (helt osynlig) visas hex definierat utifrån R, G, B – men alfavärdet rapporteras som 0%. Exempel: #000000 med alpha 0% för en helt genomskinlig svart pixel.
Varför är färgen jag ser på skärmen inte exakt densamma som i bildfilen?
Bildskärmens kalibrering och webbläsarens färghantering kan påverka visningen. Verktyget läser pixelns lagrade värde, inte det som visas på din skärm. För exakta syften bör du lita på de rapporterade siffrorna.
Vad händer om jag laddar upp en bild som är större än 4096 pixlar?
Bilden skalas ner proportionellt så att dess längsta sida blir 4096 pixlar. Detta påverkar inte färgvärdena i de pixlar som fortfarande finns kvar, men du kan förlora detaljer i kanten.
Kan jag spara fler än tolv färger?
Nej. Historiken rymmer max tolv poster. Starta om verktyget för att rensa och börja om.
Varför får jag meddelandet om att pixeln är ”partly transparent” när bilden är en JPEG?
JPEG har ingen alfakanal, men om du laddar upp en PNG med alfakanal kan vissa pixlar vara halvgenomskinliga. Verktyget rapporterar alltid alfavärdet om det är mindre än 100%.