Bouw een merkkleurenpalet uit je eigen productfoto's
Haal de echte kleuren uit je product- en verpakkingsfoto's, geef elke kleur een functie, en controleer elk tekstpaar op WCAG-contrast voordat het op een advertentie, bijschrift of eindkaart komt.
Veel kleine merken hebben een logobestand maar geen kleurenlijst. De kleuren zitten in het product zelf: de fles, het etiket, de doos, de stof. Als het tijd is voor een advertentie, een miniatuur of een bijschriftstijl, kijkt iemand naar een hexcode op een foto en hoopt het beste.
Je kunt het in ongeveer tien minuten beter doen. Haal de kleuren uit foto's van het echte product, geef elke kleur een functie en controleer welke paren als tekst leesbaar zijn. Onze gratis kleurenpalet-extractor doet het ophalen en controleren in je browser, zonder iets te uploaden.
Waarom je met het product begint, niet met een moodboard
Mensen herkennen je product aan hoe het eruitziet in het schap of in hun hand. Een advertentie waarvan de kleuren passen bij de verpakking voelt in één oogopslag als hetzelfde merk, en een die afwijkt voelt als een namaak. Een palet uit het product is ook eerlijk over wat je werkelijk verkoopt, wat een moodboard zelden is.
Het werkt ook voor diensten. Heb je geen fysiek product, gebruik dan je beste screenshots, je winkelgevel of foto's van je team, wat mensen ook al met je associëren.
Stap 1: kies en snijd de foto's bij
Kies twee of drie heldere foto's: het product op een effen achtergrond, de verpakking met de voorkant naar voren, en één lifestyle-foto die je mooi vindt. Snijd daarna flink bij. De extractor telt elke pixel die je hem geeft, dus een fles op een houten tafel levert de tafel als een van je merkkleuren op. Snijd bij tot het product en het etiket, dan is het palet het product.
Fotografeer in daglicht of anders in zacht licht. Een warme lamp maakt witte verpakking crème, en elke kleur die je eruit haalt draagt die tint mee.
Stap 2: haal vijf tot acht kleuren op
Zet elke foto in de extractor en vraag 5 of 6 kleuren voor een schone productfoto, of 8 voor een drukke. Hij groepeert vergelijkbare pixels en toont het gemiddelde van elke groep, de grootste eerst, met het aandeel van het beeld dat elk beslaat. Het startpunt is vast, dus dezelfde foto geeft altijd hetzelfde palet, en een klein helder accent, zoals een rode dop op een witte fles, krijgt een eigen staal in plaats van weggemiddeld te worden.
Voer al je foto's uit en zoek naar de kleuren die steeds terugkomen. Dat zijn je merkkleuren. Een kleur die maar in één opname voorkomt, is meestal de achtergrond of het licht.
Stap 3: geef elke kleur een functie
Een palet is alleen bruikbaar als elke kleur een rol heeft. De meeste merken hebben er vier nodig:
- Achtergrond: de kleur waar het meeste van een opmaak op staat. Vaak de basiskleur van de verpakking, of een lichte neutrale tint.
- Tekst: een donkere kleur die leesbaar is op de achtergrond. Bijna-zwart werkt. Een diepe merkkleur werkt beter, mits die de contrastcontrole haalt.
- Accent: de opvallende kleur, voor een knop, een prijssticker of één gemarkeerd woord.
- Ondersteuning: een of twee neutrale tinten voor vakken, scheidingslijnen en secundaire tekst.
Gebruik niet alles wat de foto je gaf. Vijf benoemde kleuren met duidelijke functies houden honderd advertenties consistent. Twaalf doen dat niet.
Stap 4: controleer het contrast voordat het op iets komt
Kleurparen die er op een grote monitor prima uitzien, kunnen moeilijk leesbaar zijn op een telefoon in de zon, en nog veel moeilijker voor mensen met een visuele beperking. De Web Content Accessibility Guidelines van het W3C geven hier een getal voor, de contrastverhouding, die loopt van 1:1 (dezelfde kleur twee keer) tot 21:1 (zwart op wit). De drempels zijn:
| Normale tekst | Grote tekst | |
|---|---|---|
| AA (SC 1.4.3) | 4.5:1 | 3:1 |
| AAA (SC 1.4.6) | 7:1 | 4.5:1 |
Grote tekst betekent minstens 18 punt, of 14 punt vet, volgens de definitie van WCAG. En de getallen zijn harde grenzen: de richtlijn over 1.4.3 van het W3C zegt dat een berekende verhouding niet mag worden afgerond, dus 4,499:1 voldoet niet aan 4,5:1.
WCAG is geschreven voor webinhoud, niet voor advertenties, maar de redenering geldt voor elke tekst op een scherm, inclusief bijschriften die in een video zijn ingebrand en de woorden op een eindkaart.
Een uitgewerkt voorbeeld
Stel dat je verpakking een marineblauw #1a3c6e, een crème #fdf6e3 en een oranje #e07a2e oplevert.
De formule is (L1 + 0,05) / (L2 + 0,05), waarbij L1 de relatieve luminantie van de lichtste kleur is en L2 die van de donkerste. Relatieve luminantie loopt van 0 voor zwart tot 1 voor wit. Het marineblauw komt uit op ongeveer 0,046, het crème op ongeveer 0,923 en het oranje op ongeveer 0,300.
- Marineblauwe tekst op crème: (0,923 + 0,05) / (0,046 + 0,05) = 0,973 / 0,096, ongeveer 10,1 met deze afgeronde getallen, en exact 10,16:1. Dat haalt AAA bij elke grootte. Dit is je belangrijkste combinatie.
- Oranje tekst op crème: (0,923 + 0,05) / (0,300 + 0,05) = 0,973 / 0,350, ongeveer 2,78:1. Dat faalt zelfs voor grote tekst. Het oranje mag geen woorden dragen op crème.
- Zwarte tekst op oranje: (0,300 + 0,05) / (0 + 0,05) = 0,350 / 0,05, wat 7,0 is met deze afgeronde getallen maar exact 6,99:1. Dat haalt AA voor alle tekst maar mist AAA net. Prima voor een knoplabel.
- Crème tekst op marineblauw: hetzelfde paar als het eerste, dus dezelfde 10,16:1. Een paar omkeren verandert de verhouding nooit.
De functies kiezen zich dus bijna vanzelf: crème als achtergrond, marineblauwe tekst, oranje als de accentvorm met zwarte woorden erop (marineblauw op oranje haalt maar 3,65:1, wat alleen voor grote tekst AA is). De extractor toont dit hele raster in één keer, elke kleur tegen elke andere plus wit en zwart, waarbij elke cel als AAA, AA, AA groot of Fail wordt beoordeeld.
Stap 5: schrijf het één keer op
Exporteer het palet als CSS-custom properties of JSON en bewaar het naast je logobestanden. Hernoem de variabelen naar functie zodra je hebt besloten: --brand-bg, --brand-text, --brand-accent lezen beter dan --color-3 een maand later. Voeg onder elk een regel toe met welke combinaties zijn geslaagd, zodat niemand de controle opnieuw hoeft te doen.
Controleer de getallen daarna tegen wat je al officieel hebt. Een foto geeft je de kleur die je camera zag, wat dicht bij de gedrukte verpakking ligt maar niet identiek is aan de inktspecificatie. Als je drukker of ontwerper exacte waarden heeft, dan winnen die.
Het palet gebruiken in advertenties en posts
- Bijschriften en ondertitels: je tekstkleur op een vak in je achtergrondkleur, of andersom. Controleer eerst het paar.
- Eindkaarten: de achtergrondkleur met het logo en één regel in je tekstkleur. Het accent kan een knopvorm vullen achter een korte oproep tot actie.
- Miniaturen en covers: één accent, één groot leesbaar woord, veel achtergrond.
- QR-codes op verpakking: een merkkleur werkt als die duidelijk donkerder is dan de verpakking. Onze QR-codegenerator waarschuwt wanneer het contrast laag is.
Waar Hermoso past
Hermoso is een AI-marketingagent. Het onderzoekt de advertenties die in jouw markt al werken, maakt merkgetrouwe beeld- en videoadvertenties, plaatst en plant posts op je eigen social accounts, en voert betaalde campagnes uit op je eigen advertentieaccounts. Als je je merk vanaf je website toevoegt, leert het je producten, logo en palet kennen. Bijschriften en eindkaarten blijven uit tenzij je erom vraagt, en als je dat doet, kun je de kleuren van tekst, vak en eindkaart instellen met hexcodes, zodat de paren die je hier hebt gecontroleerd ook de paren zijn die live gaan. Het werkt in de webapp, of in Claude, ChatGPT en Cursor via zijn MCP-server.
Veelgestelde vragen
Hoe vind ik de hexcodes van mijn productkleuren?
Snij een schone foto bij tot het product of de verpakking en zet die in een kleurenpalet-extractor. Die toont de belangrijkste kleuren als HEX, RGB en HSL. Gebruik twee of drie foto's en bewaar de kleuren die terugkomen.
Welke contrastverhouding heeft tekst nodig?
Onder WCAG 2.2 vereist niveau AA 4,5:1 voor normale tekst en 3:1 voor grote tekst, en AAA vereist 7:1 en 4,5:1. Grote tekst is minstens 18 punt, of 14 punt vet.
Is 4,49:1 goed genoeg voor AA?
Nee. Het W3C zegt dat de verhouding niet mag worden afgerond bij de vergelijking met de drempel, dus 4,499:1 voldoet niet aan 4,5:1.
Hoeveel kleuren moet een merkpalet hebben?
Genoeg om elke kleur een functie te geven: meestal een achtergrond, een tekstkleur, één accent en een of twee neutrale tinten. Vijf benoemde kleuren met duidelijke rollen houden advertenties beter consistent dan een lange lijst.
Zijn kleuren uit een foto exact?
Nee. Het zijn de kleuren die de camera onder dat licht vastlegde, wat dicht bij het product ligt maar niet hetzelfde is als een druk- of inktspecificatie. Heb je officiële waarden, gebruik die dan.