Kleurenpalet uit afbeelding

Zet een afbeelding neer en krijg de hoofdkleuren in HEX, RGB, HSL en OKLCH, gesorteerd op hoeveel van de afbeelding ze bedekken – of klik ergens om een kleur te kiezen.

Over deze tool

De kleuren van je afbeelding, klaar voor code en design

Huisstijlkleuren uit een logo, een moodboard uit een foto of de precieze tint van één pixel – berekend in je browser.

Dominante kleuren met aandeel

3 tot 16 kleuren, gegroepeerd in de perceptuele OKLab-kleurruimte zodat vergelijkbare tinten samengaan zoals het oog ze ziet. Elke kleur toont hoeveel van de afbeelding hij bedekt, en dezelfde afbeelding geeft altijd hetzelfde palet.

Elk formaat, met contrast

HEX, RGB, HSL en OKLCH met elk een kopieerknop, plus de WCAG-contrastverhouding op wit en op zwart en of die AA of AAA haalt voor tekst.

Overal naartoe exporteren

CSS-variabelen, een Tailwind-thema, SCSS-variabelen en JSON voor code; Adobe Swatch Exchange (.ase) voor Photoshop en Illustrator; een .gpl-palet voor GIMP, Inkscape en Krita; en een PNG-paletkaart om te delen.

Zo werkt het

  1. Zet een foto, screenshot of logo neer (PNG, JPG, WebP, HEIC of SVG), of plak hem met Ctrl + V.
  2. Stel met de schuifregelaar „Kleuren” in hoeveel kleuren je wilt. Het palet past zich meteen aan.
  3. Klik ergens in de afbeelding om precies die kleur toe te voegen onder „Gekozen kleuren”.
  4. Kopieer losse waarden, of kies een exportformaat en kopieer of download het – of bewaar de „Paletkaart (PNG)”.

Veelgestelde vragen

Worden mijn afbeeldingen naar een server geüpload?

Nee. Elke afbeelding wordt in je browsertabblad gelezen, bewerkt en opgeslagen met Canvas, Web Workers en WebAssembly. Er wordt niets geüpload, bewaard of gelogd.

Hoe worden de dominante kleuren gevonden?

De afbeelding wordt verkleind tot 256 px, de pixels worden op kleur gegroepeerd en een k-means-clustering in de OKLab-kleurruimte vindt het gevraagde aantal kleuren. Transparante pixels tellen niet mee; het aandeel is het deel van de zichtbare afbeelding dat het dichtst bij elke kleur ligt.

Wat betekent de contrastverhouding?

Het is het WCAG 2-contrast tussen de kleur en witte of zwarte tekst. 4,5:1 haalt AA voor normale tekst, 3:1 AA voor grote tekst (24 px, of 19 px vet) en 7:1 haalt AAA.

Kan ik het palet openen in Photoshop of GIMP?

Ja. Het .ase-bestand laad je in het Stalen-paneel van Photoshop, Illustrator en InDesign; het .gpl-bestand in GIMP, Inkscape en Krita.

Is het gratis, en komt er een watermerk op?

Ja, je gebruikt het gratis zonder account, en Toolula voegt nooit een watermerk toe. Het gratis abonnement heeft fair-use-limieten; Toolula Pro, een optioneel abonnement, verhoogt die.