Fargevelger og palettuttrekker – velg farger fra bilde

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.

Ja. Gratis, ingen konto kreves, ingen grenser for bildestørrelse eller antall paletter som hentes ut. Det er ingenting å installere – hele verktøyet er én enkelt nettside.

Ingen bilde nødvendig. Fargevelgeren og hjulet øverst fungerer på egen hånd — dra metnings-/lysstyrkeruten og fargetone-glideren, eller skriv inn en hvilken som helst HEX-, RGB- eller HSL-verdi for å stille inn en nøyaktig farge. Å laste opp et bilde er valgfritt, bare for å hente farger ut av et bilde med pipetten.

Velg grunnfargen din, og fargeharmoni-panelet bygger umiddelbart komplementære, analoge, triadiske, delt-komplementære, tetradiske og monokromatiske skjemaer ved hjelp av fargehjulsteori. Klikk på en fargeprøve for å kopiere HEX-koden.

In the standalone Color Picker & Wheel, dial in your color and the panel shows its contrast ratio against pure white and pure black along with the WCAG rating — AAA, AA, AA Large, or Fail. Use this before finalizing a text or button color so it stays readable and meets WCAG 2.1 accessibility guidelines.

Yes. The standalone Color Picker & Wheel shows the closest matching named CSS color next to whatever HEX, RGB or HSL value you've dialed in, which is handy for quickly describing a shade in a brief, ticket or design spec without guessing.

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.

Use the Size dropdown above the palette to choose 5, 8, 10, 16 or 24 dominant colors — the palette recalculates instantly as you change it. Combine a small size like 5 for a clean brand palette with the picked-color eyedropper to grab one or two exact accent shades the automatic extraction might average away.

Yes — the standalone Color Picker & Wheel shows your current color's contrast ratio against pure white and pure black right under the swatch, labelled AAA, AA, AA Large or Fail per the WCAG thresholds (7:1, 4.5:1, 3:1). Use it to check a text/background pairing meets accessibility standards before you lock in a design color.

The Color Picker & Wheel automatically matches whatever color you've dialed in — via the picker, HEX box, or RGB/HSL fields — to its closest standard CSS color name, shown as 'Closest name' next to the swatch. It's a quick way to describe a color verbally or find its nearest web-safe equivalent.

Yes — every click or tap on the uploaded image adds a new swatch to your Picked Colors list rather than replacing the last one, so you can build up a custom set of exact pixel colors from different parts of a photo. Remove any single swatch with its × button, or clear the whole list with Clear picked.

Yes — the Random button (shuffle icon) in the Color Picker & Wheel jumps to a new hue, saturation and brightness combination in one click, useful for breaking creative block or exploring a palette you wouldn't have typed in manually. HEX, RGB, HSL and the harmony swatches below all update together.

On a touchscreen, drag your finger across the image to preview the color under it in a live floating swatch, then lift your finger to add that exact pixel to your Picked Colors list — no separate confirm tap needed. The same palette-size dropdown and export buttons work identically on mobile.