De dominante kleuren van een afbeelding

Om een pagina op een foto af te stemmen, of de kleuren van een merk uit een logo terug te halen wanneer niemand de huisstijlgids nog kan vinden.

De tool wordt geladen…

Hoe het werkt

  1. Sleep één of meer afbeeldingen erin.
  2. Kies hoeveel kleuren je wilt.
  3. Kopieer het resultaat als CSS-variabelen (voor webpagina’s) of als JSON.

Waarom er niets wordt geüpload

Alles wat deze pagina doet, doet code die in je browsertabblad draait, met dezelfde engine die ook webpagina’s tekent. Je bestand wordt van schijf naar het geheugen van dat tabblad gelezen, daar bewerkt en weer weggeschreven als download. Het wordt nergens naartoe gestuurd — niet naar ons, en niet naar een derde partij.

Controleer het zelf

  1. Open de ontwikkelaarstools van je browser (F12) en kies het tabblad Netwerk.
  2. Laad je bestand en start de tool.
  3. De enige verzoeken die je ziet, halen de code van de tool zelf op — en bij een paar zware tools hun opensource-engine van een openbare CDN — plus één kleine bezoekmelding aan loreatec.jp (adres en titel van de pagina, meer niet). In geen van die verzoeken zit jouw bestand.

Bewijs dat het lokaal blijft →

Veelgestelde vragen

Hoe worden de kleuren gekozen?

Vergelijkbare kleuren worden gegroepeerd en de groepen worden gerangschikt naar hoeveel van de afbeelding ze beslaan, dus de eerste kleur is degene die jij de achtergrond zou noemen. Het resultaat is bij dezelfde afbeelding altijd hetzelfde, en dat telt als je merkkleuren aan het vastleggen bent.

Waarom oogt het palet nogal gedempt?

Omdat elk kleurvlak het gemiddelde van zijn groep is. Een foto met een felrood logo op een grote grijze muur is toch vooral grijs, en de rangschikking zegt dat eerlijk. Vraag om meer kleuren om de kleinere accenten naar boven te halen.

Kan ik de exacte kleur van een logo krijgen?

Bij een vlakke afbeelding wel — de vlakken zijn egaal, dus het gemiddelde is de echte waarde. Bij een foto van een gedrukt logo niet: het licht verschuift elke pixel, en het resultaat is een goede benadering.

Wordt transparantie meegenomen?

Doorzichtige pixels worden genegeerd in plaats van als wit meegeteld, dus een PNG-logo zonder achtergrond levert de kleuren van het logo op, en geen palet dat door wit wordt overheerst.