Afbeeldingskleurkiezer

Zo gebruik je deze tool

1. Kies een afbeelding of sleep deze naar het vak.
2. Beweeg de aanwijzer over de afbeelding; de vergroter toont de pixels eromheen.
3. Klik of tik om de kleur te kiezen en deze te kopiëren als HEX, RGB of HSL.
4. Scroll naar beneden voor de dominante kleuren, kies hoeveel je er wilt, en kopieer ze of download ze als CSS-variabelen.

Hoe het werkt

De afbeelding wordt in je browser op een canvas getekend en de kleur van de exacte pixel onder de aanwijzer wordt daaruit afgelezen. Het vergrootglas toont een uitvergroot gebied van 11 × 11 pixels, met de gekozen pixel omlijnd. Afbeeldingen groter dan 4096 pixels aan één zijde worden eerst verkleind, zodat een gekozen pixel op zeer grote foto's het gemiddelde is van een paar oorspronkelijke pixels.

De dominante kleuren worden met k-means-clustering gevonden: pixels worden eerst in 32.768 kleine kleurgroepen ingedeeld, daarna worden de groepen samengevoegd tot het door jou gekozen aantal kleuren, gewogen naar het aantal pixels dat elke groep bevat. De startpunten worden deterministisch gekozen, zodat dezelfde afbeelding altijd hetzelfde palet oplevert.

Kleuren worden gelezen in de sRGB-kleurruimte die de browser voor weergave gebruikt. Als een afbeelding een ingesloten kleurprofiel met breed kleurbereik heeft, kunnen waarden iets afwijken van wat een fotobewerker toont. In browsers die dit ondersteunen (Chrome en Edge op desktop), gebruikt de knop ‘Kies van scherm’ de ingebouwde EyeDropper om een kleur van overal op je scherm te nemen.

Voorbeelden

Veelgestelde vragen

Privacy

De afbeelding wordt volledig in je browser verwerkt. Ze wordt niet geüpload en gekozen kleuren worden niet verzonden of opgeslagen.