Använd en Färgväljare för att Hitta Färger från Pixlar
Snabbt svar
För att välja en färg: öppna Color Picker, ladda upp en bild (eller använd screen eyedropper), klicka på pixeln vars färg du vill ha och HEX-, RGB- och HSL-värdena visas. All bearbetning sker lokalt.
Introduktion
En color picker (kallas även eyedropper) låter dig hitta den exakta färgen hos en pixel. Detta är essentiellt för att matcha varumärkesfärger, sampla färger från bilder eller bygga en färgpalett från ett foto. Browser-baserade color pickers kan läsa färger från uppladdade bilder via Canvas API, och EyeDropper API kan välja färger från var som helst på skärmen.
Steg för steg
-
Öppna verktyget Färgväljare
Gå till verktygssidan för färgväljare. Verktyget stöder val av färger från uppladdade bilder och, i webbläsare som stöds, från var som helst på skärmen via EyeDropper API.
-
Välj din källa
För att välja från en bild: ladda upp eller dra och släpp en bild. För att välja från skärmen (endast Chrome/Edge): klicka på knappen "Välj från skärm" och klicka sedan var som helst på skärmen.
-
Klicka på pixeln för att ta prov
För bildval, flytta markören över bilden och klicka på den pixel vars färg du vill ha. Verktyget läser pixelfärgen från arbetsytan med getImageData(). En förstoringsglas kan hjälpa dig att välja den exakta pixeln.
-
Läs färgvärdena
Verktyget visar den valda färgen i formaten HEX, RGB och HSL, tillsammans med en färgruta. Värdena uppdateras omedelbart när du flyttar markören.
-
Kopiera färgen
Klicka på Kopiera bredvid valfritt format för att kopiera färgvärdet till ditt urklipp. Använd den i din CSS, designverktyg eller applikation.
Exempel
Välj en varumärkesfärg från en logotyp
Input: logo.png, klicka på märkets färgpixel
Produktion: HEX: #1a73e8, RGB: rgb(26, 115, 232), HSL: hsl(217, 89%, 51%)
Prova en färg från ett foto
Input: photo.jpg, klicka på en himmelpixel
Produktion: HEX: #87ceeb, RGB: rgb(135, 206, 235), HSL: hsl(197, 71%, 73%)
Välj från skärm (Chrome/Edge)
Input: Klicka på "Välj från skärm" och klicka sedan på valfri pixel på skärmen
Produktion: HEX värde för den pixeln, t.ex. #ff5733
Vanliga problem
- Kantutjämning blandar färger vid kanterna — pixlar på kanten mellan två färger är en blandning. Prov från mitten av ett enfärgat område för noggrannhet.
- EyeDropper API stöds inte – skärmväljaren kräver Chrome 95+ eller Edge 95+. Firefox och Safari stöder inte det; använd istället bilduppladdningsmetoden.
- JPEG komprimering ändrar färger —JPEG förlustig komprimering ändrar pixelfärgerna något. För exakta märkesfärger, använd en PNG eller den ursprungliga vektorkällan.
- Färgprofilskillnader — bilder med inbäddade färgprofiler (ICC) kan visas annorlunda än vad deras råa pixelvärden antyder.
Tips
- Använd förstoringsglaset för att välja den exakta pixeln — vid hög zoom kan du välja en enda exakt pixel istället för en blandad kant.
- Sampla flera pixlar från ett fast område och snitt dem om komprimering har introducerat brus — detta ger en mer representativ färg.
- Använd EyeDropper API (Chrome/Edge) för att välja färger från alla program, inte bara bilder i webbläsaren.
- Använd vår färgväljare för omedelbar, privat färgsampling – dina bilder lämnar aldrig din webbläsare.