Farvevælger og paletudtrækker – vælg farver fra billede

Upload en hvilken som helst JPG, PNG, WebP eller GIF og klik et vilkårligt sted på det viste billede — den nøjagtige pixel under din markør aflæses og vises som HEX, RGB og HSL med kopiering med ét klik for hvert format. Perfekt til at matche en brandfarve, aflæse en farveprøve fra et fotografi eller hente accentfarver fra et design-mockup.

Klik på en hvilken som helst pixel, så viser dette farvevælgerværktøj dens HEX-farvekode (for eksempel #FF6B35) sammen med RGB og HSL — de samme HTML/CSS-farvekoder, du indsætter direkte i et stylesheet, en design-token eller en HTML-attribut. Tryk på Kopier for at hente hex-koden med ét klik.

Billedet nedskaleres til 320 pixels på den længste side, hvorefter hver pixel placeres i en gruppe efter de øverste 4 bits per kanal. De mest fyldte grupper midles tilbage til fuld 8-bit-farve, sorteres efter hyppighed og returneres som din palet. Resultatet er typisk 5-24 dominerende farver, der visuelt opsummerer billedet.

Ja. Download-knapperne producerer to formater: en CSS-variabelblok, der er klar til at blive indsat i en :root-selektor (--color-1, --color-2…), og en JSON-fil med hex, RGB-komponenter og vægtprocent for hver farve. Begge formater integreres problemfrit i designtokens, Tailwind-konfigurationer og palettebiblioteker.

Nej – farveudvælgelse og paletudtrækning sker udelukkende i din browser ved hjælp af HTML canvas-API'et. Billedet bliver på din enhed, hvilket gør værktøjet sikkert til ikke-frigivne produktbilleder, mockup-udkast og brandaktiver under NDA.

Til arbejde med brandidentitet er 5-8 farver det optimale - det fanger det dominerende tema uden at udvande accentvalgene. Til datavisualisering anbefaler vi 10-16 farver, så du har nok kategoriske nuancer. Skyderen lader dig vælge mellem 5 og 24.

Pixels med alfa under 128 ignoreres, så transparente baggrunde ikke forurener paletten med "baggrundsfarver". Det gør billedfarvevælgeren særligt god til produktudklip, sticker-grafik og isolerede motiver.

HEX (#RRGGBB) er den mest kompakte og er det, CSS, Figma og Sketch bruger som standard. RGB viser de tre komponentværdier fra 0-255 — nyttigt, når man arbejder med billeddata programmatisk. HSL (kulør, mætning, lyshed) er intuitiv til at justere farver: skift kulør for at ændre farvefamilie, justér lysheden for nuancer og toner.

Ja. Gratis, ingen konto påkrævet, ingen grænser for billedstørrelse eller antallet af udtrukne paletter. Der er intet at installere — hele værktøjet er en enkelt webside.

Intet billede nødvendigt. Farvevælgeren og -hjulet øverst fungerer på egen hånd — træk i mætnings-/lysstyrkefirkanten og farvetonens skyder, eller indtast en hvilken som helst HEX-, RGB- eller HSL-værdi for at ramme en præcis farve. At uploade et billede er valgfrit, kun for at udtage farver fra et foto med pipetten.

Vælg din grundfarve, så bygger panelet Farveharmonier øjeblikkeligt komplementære, analoge, triadiske, delt-komplementære, tetradiske og monokromatiske paletter ud fra farvehjulsteori. Klik på en farveprøve for at kopiere dens HEX-kode.

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.

Klik på Tilfældig i Farvevælgeren & hjulet for at springe til en ny farve, og brug derefter panelet Farveharmonier nedenunder til at se komplementære, analoge, triadiske og andre koordinerede paletter bygget ud fra den farve — en hurtig måde at finde et udgangspunkt på, når du designer fra bunden i stedet for at sample et eksisterende billede.

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.