Haal een kleurenpalet uit elke afbeelding, met een contrastcontrole

Hoe de kleuren worden gekozen

De tool maakt een kleine kopie van je afbeelding, maximaal 160 pixels op de langste zijde, en telt elke pixel die niet transparant is. Daarna groepeert hij vergelijkbare pixels met k-means-clustering en toont de gemiddelde kleur van elke groep, de grootste groep eerst. Het percentage op elk staal geeft aan welk deel van de afbeelding die groep beslaat.

Het startpunt ligt vast en is niet willekeurig: het begint met de meest voorkomende kleur en voegt daarna telkens de kleur toe die het verst van de al gekozen kleuren ligt. Zo levert dezelfde afbeelding elke keer hetzelfde palet op, en krijgt een klein fel accent, zoals een rood logo op een witte doos, een eigen staal in plaats van weg te vallen in de achtergrond.

Vraag om 5 tot 8 kleuren. Een productfoto op een effen achtergrond heeft meestal 5 of 6 nodig. Een drukke lifestylefoto leest beter met 8. Heeft de afbeelding minder verschillende kleuren dan je vroeg, dan zegt de tool dat en toont de kleuren die hij vond.

De contrastmatrix lezen

Elke kleur wordt gecombineerd met elke andere kleur, plus puur wit en zwart, en elke cel toont de contrastverhouding voor tekst in de rijkleur op een achtergrond in de kolomkleur. De verhouding volgt de WCAG-definitie: (L1 + 0,05) / (L2 + 0,05), waarbij L1 en L2 de relatieve luminantie van de lichtere en de donkerdere kleur zijn. Hij loopt van 1:1 (dezelfde kleur twee keer) tot 21:1 (zwart op wit).

De labels zijn de drempels die WCAG vastlegt:

• AA: minstens 4,5:1 voor normale tekst en 3:1 voor grote tekst (Succescriterium 1.4.3).
• AAA: minstens 7:1 voor normale tekst en 4,5:1 voor grote tekst (Succescriterium 1.4.6).
• Grote tekst betekent minstens 18 punt, of 14 punt vet (WCAG’s definitie van grote schaal).

Een cel met AA groot is prima voor een grote kop, maar te flets voor een onderschrift. De toelichting van W3C bij 1.4.3 zegt ook dat de verhouding niet afgerond mag worden, dus 4,499:1 voldoet niet aan 4,5:1. De tool beoordeelt het exacte getal en toont het afgekapt op twee decimalen, nooit naar boven afgerond.

Een uitgewerkt voorbeeld

Stel dat de foto je een marineblauw van #1a3c6e en een crème van #fdf6e3 geeft. De relatieve luminantie van het marineblauw komt uit op ongeveer 0,046 en die van het crème op ongeveer 0,923. De verhouding is (0,923 + 0,05) / (0,046 + 0,05), wat ongeveer 10,1:1 is met die afgeronde cijfers en 10,16:1 met de exacte. Dat haalt AAA voor alle tekst, dus marineblauwe tekst op een crème eindkaart is veilig op elk formaat. Zet een middenoranje als #e07a2e op datzelfde crème en de verhouding daalt tot 2,78:1, wat zelfs voor grote tekst niet voldoet. Bewaar het oranje voor een knop met zwarte tekst erop (6,99:1, dat is AA maar net geen AAA), of voor een vorm zonder woorden.

De export gebruiken

De CSS-export is een :root-blok met custom properties, --color-1 voor de kleur die het grootste deel van de afbeelding beslaat en zo verder naar beneden. De JSON bevat per kleur de hex, RGB, HSL en het aandeel in de afbeelding, makkelijk te plakken in een design-tokenbestand of door te geven aan een script. Hernoem de variabelen zodra je weet welke kleur de achtergrond is, welke de tekst en welke het accent.

Wat deze tool niet doet

Hij weet niet welke kleuren jouw merk zijn. Een foto van je product op een houten tafel bevat ook de tafel. Snijd eerst bij tot het product of de verpakking als je alleen die kleuren wilt. Hij kan ook geen exacte drukkleuren geven: de getallen zijn de pixels in het bestand, na je camera en eventuele bewerking, dus controleer ze tegen je merkgids voordat je ze publiceert. En hij beoordeelt alleen tekstcontrast. WCAG heeft aparte regels voor pictogrammen en interface-onderdelen, die deze matrix niet beoordeelt.

Als je dit liever niet met de hand doet

Hermoso is marketing op de automatische piloot: het onderzoekt de advertenties die in jouw markt al werken, maakt beeld- en video-advertenties in jouw merkstijl, plant de posts in en voert betaalde campagnes uit op je eigen advertentieaccounts. Wanneer je je merk vanaf je website toevoegt, leert het je producten, logo en palet kennen, en kun je bijschrift- en eindkaartkleuren instellen met hex-codes. Het werkt in de web-app, of binnen Claude, ChatGPT en Cursor via de MCP-server.

Gratis tools: Formaatgids voor social media · Instagram-grid maker · Open Graph-generator

Veelgestelde vragen

Hoe haal ik een kleurenpalet uit een foto?

Zet de foto in de tool en kies hoeveel kleuren je wilt, van 5 tot 8. Het groepeert vergelijkbare pixels en toont de gemiddelde kleur van elke groep als HEX, RGB en HSL, de grootste eerst, met een kopieerknop bij elke.

Welke contrastverhouding heb ik nodig voor tekst?

WCAG 2.2 niveau AA vraagt om minstens 4.5:1 voor normale tekst en 3:1 voor grote tekst. Niveau AAA vraagt om 7:1 en 4.5:1. Grote tekst is minstens 18 punt, of 14 punt vet.

Is 4.49:1 dicht genoeg om AA te halen?

Nee. W3C zegt dat de berekende verhouding niet mag worden afgerond bij vergelijking met een drempel, dus 4.499:1 voldoet niet aan 4.5:1. De tool beoordeelt het exacte getal.

Waarom krijg ik elke keer hetzelfde palet?

De clustering start vanaf een vast punt, de meest voorkomende kleur, en voegt dan de kleur toe die het verst verwijderd is van de al gekozen kleuren. Er is geen willekeurige start, dus één afbeelding geeft altijd één antwoord.

Wordt mijn afbeelding geüpload?

Nee. Hij wordt gelezen met de eigen bestandslezer van je browser en geteld in een canvas op je apparaat. Er wordt niets ergens naartoe gestuurd of opgeslagen.