# Een gradient palette voor je merk opbouwen

[Canonical HTML page](https://gradiently.design/nl/guide/gradient-palette)

Eén goed verloop is makkelijk. Zes die duidelijk bij elkaar horen, elke taak van een merk dekken en naast elkaar nog kloppen is een systeem. Zo bouw je het.

## The short version

- Een gradient palette is een kleine, benoemde familie verlopen uit één basiskleurenpalet en een paar gedeelde regels.
- De meeste merken hebben vier tot zes verlopen nodig: een hero, een diepe versie, een rustige lichte versie, een radiale gloed, een accent en een kalm verloop voor tekst.
- Verlopen lezen als één familie als ze een ondergrondkleur, een richting, consistente stopposities en dezelfde stappen in lichtheid delen.
- Verlopen opslaan als benoemde CSS custom properties houdt ze identiek over website, app en ontwerpbestanden.
- Test een gradient palette op echte formaten met echte woorden voordat je het in merkrichtlijnen vastlegt.

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.

### Een hoop verlopen

- Elk apart gemaakt, voor één ontwerp
- Op elke pagina een andere hoek
- Kleuren die bijna bij het merk passen
- Geen naam, dus niemand kan er één vragen
- Op het oog overgenomen uit oude bestanden

### Een gradient palette

- Gebouwd uit één basispalet
- Eén richting, overal gebruikt
- Exacte hexcodes en stopposities
- Benoemd naar taak: hero, deep, quiet
- Opgeslagen als tokens in code en bestanden

## 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](https://gradiently.design/nl/guide/how-to-choose-brand-colors). 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.

- Inkt: #14112b
- Nachtpruim: #2e1065
- Pruim: #4c1d95
- Violet: #7c3aed
- Orchidee: #c084fc
- Schelp: #faf5ff
- Gloed: #f97316

Een uitgewerkt voorbeeld van een basis: één donkere ondergrond, vier stappen violet, een bijna-wit en één warm accent. Elk verloop hieronder is gebouwd uit deze zeven codes.

## 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.

| Rol | Waarvoor | Hoe het verschilt |
| --- | --- | --- |
| Hero | Lanceringen, covers, het moment dat mensen onthouden | Volledig bereik, donker tot licht |
| Deep | Donkere secties, slides, avondcampagnes | Alleen de donkerste twee of drie kleuren |
| Quiet | Lichte pagina’s, documenten, lang lezen | Schelp en de bleekste tint, nauwelijks beweging |
| Glow | Productfoto’s en losse woorden | Radiaal, licht in één hoek |
| Accent | Knoppen, badges, één highlight per ontwerp | Hoofdtint naar de accentkleur |
| Text | Achter alinea’s en bijschriften | Laag contrast in zichzelf, hoog tegen letters |

Zes rollen voor een gradient palette van een merk. Kleine merken kunnen beginnen met hero, deep en quiet.

- Hero: `linear-gradient(135deg, #14112b 0%, #4c1d95 45%, #7c3aed 75%, #c084fc 100%)`
- Deep: `linear-gradient(135deg, #14112b 0%, #2e1065 60%, #4c1d95 100%)`
- Quiet: `linear-gradient(135deg, #faf5ff 0%, #f3e8ff 60%, #e9d5ff 100%)`
- Glow: `radial-gradient(circle at 80% 20%, #c084fc 0%, #7c3aed 30%, #14112b 75%)`
- Accent: `linear-gradient(135deg, #7c3aed 0%, #c084fc 55%, #f97316 100%)`
- Text: `linear-gradient(135deg, #2e1065 0%, #14112b 100%)`

De familie opgebouwd uit de basis hierboven. Dezelfde ondergrond, dezelfde hoek van 135 graden, dezelfde kleuren: ze kunnen naast elkaar op één pagina staan zonder ruzie.

## 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](https://gradiently.design/nl/guide/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](https://gradiently.design/nl/guide/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](https://gradiently.design/nl/guide/design-tokens) behandelt de bredere praktijk.

```css
: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); }
```

De hele familie als CSS custom properties. Kleuren worden één keer gedefinieerd en elk verloop wordt eruit opgebouwd.

## 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](https://gradiently.design/nl/guide/color-contrast-accessibility) of het tekstverloop alinea’s leesbaar houdt, en of hero en deep verwant ogen als ze naast elkaar staan.

Een staande lanceringspost op een rijke achtergrond met een verloop over het volledige bereik

De herorol op een staande post van 1080×1350.

Een verticale story met dezelfde kop op een verwante verloopachtergrond uit dezelfde familie

Dezelfde familie op een story van 1080×1920. Controleer of de helderste band de kop in het hogere kader nog steeds vrijlaat.

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](https://gradiently.design/nl/guide/brand-gradient-system) hoe je van één verloop een handtekening maakt.

## FAQ

### Wat is een gradient palette?

Een kleine, benoemde set verlopen uit één kleurenpalet met gedeelde regels, zodat ze er overal als één familie uitzien.

### Hoeveel verlopen moet een merk hebben?

Vier tot zes dekt de meeste behoeften: een hero, een deep en een quiet versie, een radiale gloed, een accent en een verloop dat rustig genoeg is voor tekst. Kleine merken kunnen met drie beginnen.

### Hoe laat ik verlopen bij elkaar horen?

Gebruik bij elk verloop dezelfde ondergrondkleur, dezelfde hoek, dezelfde stopposities en gelijkmatige stappen in lichtheid.

### Hoe sla ik merkverlopen op voor een website?

Definieer de kleuren en elk verloop één keer als CSS custom properties en verwijs in elk component naar die namen.