Wat hoort er in een merkkleurenpalet?

Een merkkleurenpalet geeft elke kleur een functie. De primaire kleur is de kleur die mensen onthouden, bijvoorbeeld op het logo en de belangrijkste knoppen. Een secundaire kleur ondersteunt de primaire kleur, een accentkleur laat oproepen tot actie opvallen en een achtergrond- en tekstkleur zorgen samen voor een geheel.

Contrast is net zo belangrijk als smaak. De Web Content Accessibility Guidelines (WCAG) vereisen een contrastverhouding van minstens 4,5:1 tussen gewone tekst en de achtergrond, of 7:1 voor het strengere niveau AAA.

Beschrijving van de tool

Beschrijf je merk bij Over je merk: wat het doet, voor wie het is en welke uitstraling het moet hebben. Kies een Merkpersoonlijkheid (Professioneel, Speels, Luxueus, Minimalistisch, Gedurfd of Natuurlijk), of laat de optie Afstemmen op de beschrijving staan. De AI leidt de persoonlijkheid dan af uit je tekst.

Je krijgt vijf kleuren met een naam: Primair, Secundair, Accent, Achtergrond en Tekst. Met de uitvoerindeling wissel je de waarden om tussen HEX, RGB, HSL, CMYK en andere indelingen. Bij elke kleur staat een kopieerknop. In de Gebruiksaanwijzing staat hoe je elke kleur gebruikt. CSS-variabelen leveren een codeblok op dat je in een stylesheet kunt plakken. De AI krijgt de opdracht om voor tekst en achtergrond een contrastverhouding van minstens 7:1 aan te houden, en voor de primaire kleur en de accentkleur minstens 3:1.

Voorbeeld

Voor ‘Een koffiebranderij in de buurt in Portland. Warm, gastvrij en duurzaam’ krijg je bijvoorbeeld een gebrande bruine primaire kleur, een crèmekleurige achtergrond en een terracotta accentkleur, met CSS-variabelen zoals deze:

:root {
  --brand-primary: #5b3a29;
  --brand-secondary: #a47551;
  --brand-accent: #d9643a;
  --brand-background: #faf6f0;
  --brand-text: #2b211c;
}

Functies

  • Vijf kleuren met elk een duidelijke functie, een naam en een gebruiksaanwijzing
  • Zes persoonlijkheden, of een persoonlijkheid die op basis van je beschrijving wordt gekozen
  • Kopieer kleuren in de gewenste indeling, of kopieer de hele set als CSS-variabelen

Beperkingen

De tool meet het contrast niet zelf. Controleer daarom de combinatie van tekst en achtergrond met een contrastcontrole voordat je die in gebruik neemt.