Overzicht / Afbeeldingen en grafisch / Kleurkiezer voor afbeeldingen en paletextractor
Afbeeldingen en grafisch 100% in de browser en offline

Kleurkiezer voor afbeeldingen en paletextractor

Klik op een willekeurige pixel van een afbeelding voor de HEX-, RGB- en HSL-code, of haal een palet van 3 tot 16 kleuren met hun aandeel eruit, klaar om te kopiëren als CSS, JSON of Tailwind.

Sleep of kies een bestand; instellingen veranderen het resultaat meteen.

Je bestanden en invoer verlaten je browser nooit – er wordt niets geüpload.

Kies een afbeelding voor kleuranalyse
PNG, JPG, WebP

Kies één pixel of haal een heel palet eruit

Twee taken, één pagina. Klik op een punt van het plaatje om precies die pixel af te lezen als HEX, RGB en HSL, of laat de tool de kleuren vinden waaruit de afbeelding bestaat en ze opsommen met het deel van het plaatje dat elke kleur beslaat. Typische toepassingen zijn een knop afstemmen op een logo in een schermafbeelding, een kleurenschema opbouwen uit een foto of het blauw van een grafiek vinden die alleen als afbeelding bestaat.

Van plaatje naar palet in vijf stappen

  1. Klik op het uploadgebied of sleep er een afbeelding naartoe. PNG, JPG en WebP zijn de veilige keuzes.
  2. Klik op het plaatje om een pixel te kiezen. Het voorbeeldvak toont de kleur en de velden HEX, RGB en HSL worden ingevuld, elk met een eigen kopieerknop.
  3. Kies hoeveel kleuren het palet moet hebben, van 3 tot 16, en de volgorde: meest voorkomend eerst, van licht naar donker, of op tint.
  4. Vink Wit en zwart negeren aan als een witte achtergrond of een donkere schaduw de kleuren verbergt waar het om gaat.
  5. Kies een exportformaat en kopieer het hele palet, of klik op één staal om het de huidige kleur te maken en de HEX-code te kopiëren.

Hoe de kleuren worden gekozen

De tool gebruikt een mediane snede (median cut). Hij leest een verkleinde kopie van het plaatje, stopt alle pixels in één doos en blijft de doos met de meeste pixels splitsen langs zijn breedste kleurkanaal tot hij zoveel dozen heeft als je vroeg of de resterende kleuren te dicht bij elkaar liggen om te onderscheiden, dus een eenvoudige afbeelding kan minder stalen geven dan het aantal dat je koos. Elk staal is het gemiddelde van één doos en het percentage is het deel van het plaatje dat die doos beslaat. Vergelijkbare tinten belanden zo in één staal in plaats van de lijst te vullen, wat een simpele telling van exacte kleuren bij een foto wel zou doen. Grotendeels transparante pixels worden genegeerd.

Exportformaten

  • HEX: één code per regel, voor ontwerptools.
  • CSS: eigen eigenschappen zoals --color-1 binnen :root.
  • JSON: HEX, RGB-waarden en aandeel voor elke kleur.
  • Tailwind: een colors-object dat je in het thema kunt plakken.

Het palet is een beginpunt. Een staal kan licht afwijken van elke afzonderlijke pixel omdat het een gemiddelde is, dus klik op het plaatje voor een exacte waarde.

De afbeelding verlaat je apparaat nooit

Het bestand wordt in je browser op een canvas getekend en de pixels worden daar gelezen. Er wordt geen verzoek verstuurd als je een afbeelding opent, een kleur kiest of een palet exporteert.

Veelgestelde vragen (FAQ)

Open de afbeelding en klik op de kleur. De HEX-code verschijnt in het HEX-veld en de kopieerknop ernaast zet hem op je klembord.