Een gradient palette voor je merk opbouwen

Een gradient palette is een kleine, benoemde familie verlopen uit één kleurenpalet en een handvol gedeelde regels, zodat elk verloop dat een merk gebruikt verwant oogt. Begin met vijf of zes basiskleuren, geef elk verloop een taak (hero, deep, quiet, glow, accent, text) en leg vast wat ze tot broers en zussen maakt: dezelfde ondergrondkleur, dezelfde hoek, gelijke stopposities en gelijkmatige stappen in lichtheid. Schrijf ze op als tokens en test ze op echte ontwerpen voordat iemand anders ze gebruikt.

Waarom een merk meer dan één verloop nodig heeft

Eén verloop wordt over taken uitgerekt die het niet aankan. De felle heromix die op een lanceringspost mooi staat, is te luid achter een alinea, te donker voor een lichte websitesectie en te druk voor een slide vol cijfers. Teams gaan dan improviseren, iemand kiest een blauw dat er in de buurt zit en binnen een jaar heeft het merk vijftien verlopen die bijna kloppen. Een palet voorkomt dat door de variaties vooraf te bepalen.

Begin bij een basiskleurenpalet

Elk verloop in de familie moet alleen uit deze kleuren zijn gemaakt, of uit tinten en schakeringen ervan. Zijn je merkkleuren nog niet vastgesteld, regel dat dan eerst met merkkleuren kiezen. Een bruikbare basis heeft een donkere ondergrond, twee of drie stappen van de hoofdtint, een bijna-wit en één accent van elders op de kleurencirkel.

Geef elk verloop een taak

Benoem verlopen naar wat ze doen, niet naar hoe ze eruitzien. "Hero" overleeft een kleurenverversing; "paarse zonsondergang" niet. Zes rollen dekken bijna elk merk.

De regels die verlopen tot een familie maken

• Eén ondergrond. Elk donker verloop eindigt in dezelfde inkt, elk licht verloop in dezelfde schelp. Het oog groepeert verlopen op basis van die ondergrond.
• Eén richting. Kies een hoek, 135 graden of 160 graden, en houd je eraan. Gemengde hoeken laten een pagina toevallig aanvoelen. Gradient angle legt de keuze uit.
• Gelijke stops. Hergebruik dezelfde posities (bijvoorbeeld 0, 45, 75, 100 procent), zodat de overgangen hetzelfde ritme hebben. Gradient stops behandelt de spreiding.
• Gelijkmatige lichtheidsstappen. Elke kleur in een mengsel moet een duidelijke stap lichter of donkerder zijn dan haar buur. Ongelijke stappen geven een heldere streep in het midden.
• Eén accent, op rantsoen. De accentkleur komt in slechts één verloop voor. Over alle verlopen uitgesmeerd is het geen accent meer.
• Een vaste interpolatie in code. Mengt je site in oklch, dan moeten alle verlopen dat doen, anders zien dezelfde codes er per sectie anders uit.

Maak van het gradient palette tokens

Een palet dat alleen in een pdf leeft, wordt overgetypt en loopt uit de pas. Sla elk verloop één keer op als benoemde custom property en verwijs er overal naar. Ontwerpers kunnen dezelfde waarden in hun bestanden plakken en een toekomstige verversing verandert één regel per verloop. Design tokens behandelt de bredere praktijk.

:root {
  --ink: #14112b;
  --plum: #4c1d95;
  --violet: #7c3aed;
  --orchid: #c084fc;
  --shell: #faf5ff;
  --ember: #f97316;

  --gradient-hero: linear-gradient(135deg, var(--ink) 0%, var(--plum) 45%, var(--violet) 75%, var(--orchid) 100%);
  --gradient-deep: linear-gradient(135deg, var(--ink) 0%, #2e1065 60%, var(--plum) 100%);
  --gradient-quiet: linear-gradient(135deg, var(--shell) 0%, #f3e8ff 60%, #e9d5ff 100%);
  --gradient-glow: radial-gradient(circle at 80% 20%, var(--orchid) 0%, var(--violet) 30%, var(--ink) 75%);
  --gradient-accent: linear-gradient(135deg, var(--violet) 0%, var(--orchid) 55%, var(--ember) 100%);
  --gradient-text: linear-gradient(135deg, #2e1065 0%, var(--ink) 100%);
}

.hero { background: var(--gradient-hero); }
.section-light { background: var(--gradient-quiet); }

Test het op echte formaten

Swatches liegen. Een verloop dat als klein vierkant in balans lijkt, kan zijn helderste band recht achter een kop zetten zodra het een story van 1080×1920 vult. Maak voordat je het palet publiceert drie echte ontwerpen met echte woorden: een staande post, een story en een websitehero. Controleer met de contrastcontroles in kleurcontrast en toegankelijkheid of het tekstverloop alinea’s leesbaar houdt, en of hero en deep verwant ogen als ze naast elkaar staan.

Met Gradiently Pro bewaart de merkkit je kleurenpaletten naast je logo en lettertypen, en past de Designer ze toe als hij nieuwe ontwerpen opmaakt. Moet je herogradient herkenbaar zijn voor mensen, dan behandelt merkverlopen hoe je van één verloop een handtekening maakt.