Grab the exact color from any image

Last opp en hvilken som helst JPG, PNG, WebP eller GIF og klikk hvor som helst på bildet som vises – den nøyaktige pikselen under markøren plukkes opp og vises som HEX, RGB og HSL med ett-klikks kopiering for hvert format. Perfekt for å treffe en merkefarge, plukke en fargeprøve fra et fotografi eller hente aksenttoner fra en designskisse.

Klikk på en hvilken som helst piksel, så viser dette fargevelgerverktøyet HEX-fargekoden (for eksempel #FF6B35) ved siden av RGB og HSL — de samme HTML/CSS-fargekodene du limer rett inn i et stilark, et designtoken eller et HTML-attributt. Trykk på Kopier for å hente hex-koden med ett klikk.

Bildet nedskaleres til 320 piksler på den lengste siden, og deretter sorteres hver piksel i grupper basert på de øverste 4 bitene per kanal. De mest folkerike gruppene snittes tilbake til full 8-bits farge, sorteres etter frekvens og returneres som paletten din. Resultatet er vanligvis 5–24 dominerende farger som visuelt oppsummerer bildet.

Ja. Nedlastingsknappene produserer to formater: en CSS-variabelblokk klar til å limes inn i en :root-velger (--color-1, --color-2…), og en JSON-fil med hex, RGB-komponenter og vektprosent for hver farge. Begge formater integreres rent i designtokens, Tailwind-konfigurasjoner og palettbiblioteker.

Nei – fargevalg og uthenting av paletter skjer fullstendig i nettleseren din med HTML canvas-API-et. Bildet blir værende på enheten din, noe som gjør verktøyet trygt for upubliserte produktbilder, utkast til mockuper og merkevaremateriell under taushetserklæring.

For arbeid med merkevareidentitet er 5–8 farger det optimale – det fanger det dominerende temaet uten å vanne ut aksentvalgene. For datavisualisering anbefaler vi 10–16 farger, så du har nok kategoriske nyanser. Med glidebryteren kan du velge mellom 5 og 24.

Piksler med alfa under 128 ignoreres, slik at gjennomsiktige bakgrunner ikke forurenser paletten med «bakgrunnsfarger». Det gjør bildefargevelgeren spesielt godt egnet for produktutklipp, klistremerkemotiver og isolerte motiver.

HEX (#RRGGBB) er mest kompakt og er det CSS, Figma og Sketch bruker som standard. RGB viser de tre komponentverdiene fra 0–255 – nyttig når du jobber med bildedata programmatisk. HSL (kulør, metning, lyshet) er intuitivt for å justere farger: endre kulør for å skifte fargefamilie, juster lyshet for lysere og mørkere toner.

Yes. Free, free account required to download, no limits on image size or number of palettes extracted. There is nothing to install — the entire tool is a single web page.

No image needed. The Color Picker & Wheel at the top works on its own — drag the saturation/brightness square and the hue slider, or type any HEX, RGB or HSL value to dial in an exact color. Uploading an image is optional, just for eyedropping colors out of a photo.

Pick your base color and the Color harmonies panel instantly builds complementary, analogous, triadic, split-complementary, tetradic and monochromatic schemes using color-wheel theory. Click any swatch to copy its HEX code.

I den frittstående fargevelgeren og fargehjulet stiller du inn fargen din, og panelet viser kontrastforholdet mot rent hvitt og rent svart sammen med WCAG-vurderingen — AAA, AA, AA Large eller Fail. Bruk dette før du ferdigstiller en tekst- eller knappefarge, slik at den forblir lesbar og oppfyller WCAG 2.1-retningslinjene for tilgjengelighet.

Ja. Den frittstående Fargevelgeren og fargesirkelen viser den nærmeste samsvarende navngitte CSS-fargen ved siden av hvilken HEX-, RGB- eller HSL-verdi du har stilt inn, noe som er nyttig for raskt å beskrive en nyanse i en brief, sak eller designspesifikasjon uten å gjette.

Klikk Random i Color Picker & Wheel for å hoppe til en ny farge, og bruk deretter Color harmonies-panelet under til å se komplementære, analoge, triadiske og andre samstemte paletter bygget rundt den fargen — en rask måte å finne et utgangspunkt på når du designer fra bunnen av i stedet for å hente farger fra et eksisterende bilde.

Bruk Størrelse-nedtrekksmenyen over paletten for å velge 5, 8, 10, 16 eller 24 dominerende farger – paletten beregnes på nytt umiddelbart når du endrer den. Kombiner en liten størrelse som 5 for en ren merkevarepalett med fargeplukker-pipetten for å hente én eller to nøyaktige aksentnyanser som den automatiske uttrekkingen kan komme til å utjevne bort.

Ja — den frittstående Fargevelger og hjul viser den gjeldende fargens kontrastforhold mot rent hvitt og rent svart rett under fargeprøven, merket AAA, AA, AA Large eller Fail i henhold til WCAG-terskelverdiene (7:1, 4.5:1, 3:1). Bruk den til å sjekke at et tekst/bakgrunn-par oppfyller tilgjengelighetsstandarder før du låser inn en designfarge.

Fargevelgeren og -hjulet matcher automatisk uansett hvilken farge du har stilt inn — via velgeren, HEX-boksen eller RGB/HSL-feltene — til det nærmeste standard CSS-fargenavnet, vist som 'Nærmeste navn' ved siden av fargeprøven. Det er en rask måte å beskrive en farge muntlig på eller finne dens nærmeste web-sikre ekvivalent.

Ja — hvert klikk eller trykk på det opplastede bildet legger til en ny fargeprøve i listen din over Plukkede farger i stedet for å erstatte den forrige, så du kan bygge opp et egendefinert sett med nøyaktige pikselfarger fra ulike deler av et bilde. Fjern en enkelt fargeprøve med dens ×-knapp, eller tøm hele listen med Tøm plukkede.

Ja — Tilfeldig-knappen (bland-ikonet) i Fargevelger og hjul hopper til en ny kombinasjon av nyanse, metning og lysstyrke med ett klikk, nyttig for å bryte kreativ blokkering eller utforske en palett du ikke ville skrevet inn manuelt. HEX, RGB, HSL og harmonifargeprøvene under oppdateres alle sammen.

På en berøringsskjerm drar du fingeren over bildet for å forhåndsvise fargen under den i en flytende fargeprøve i sanntid, og løfter deretter fingeren for å legge den nøyaktige pikselen til i listen din over Valgte farger — ingen egen bekreftelse trengs. Den samme nedtrekksmenyen for palettstørrelse og eksportknappene fungerer likt på mobil.

Ja. Fargehjulet øverst på siden har en Tilfeldig-knapp som hopper til en tilfeldig farge og øyeblikkelig viser dens HEX-, RGB- og HSL-koder, det nærmeste navngitte fargenavnet, kontrastforhold mot hvitt og svart, og fullstendige harmonisett — komplementær, analog, triadisk, delt komplementær, tetradisk og monokrom. Det er en rask måte å utforske utgangspunkter for en fargepalett på.

Dette verktøyet henter farger fra et opplastet bilde eller fra det innebygde fargehjulet, i stedet for å lese direkte fra skjermen din. Den raskeste løsningen når du trenger en skjerm-fargeplukker: ta et skjermbilde, slipp det på siden, og klikk på den nøyaktige pikselen du vil ha — du får de samme HEX-, RGB- og HSL-kodene uten å installere en utvidelse, og skjermbildet forlater aldri nettleseren din.