# Kleurpaletten voor techmerken voorbij zakelijk blauw

[Canonical HTML page](https://gradiently.design/nl/guide/tech-color-palettes)

Blauw zegt betrouwbaar, en dat geldt voor het blauw van elk ander techbedrijf ook. Hier zijn acht paletten met echte codes die nog steeds als software voelen, en de structuur waarmee elk ervan in een product werkt.

## The short version

- Een werkend kleurenpalet voor tech heeft vijf delen: een donkere ondergrond, een lichte ondergrond, een neutrale grijsreeks, één merkaccent en een set statuskleuren.
- Blauw domineert de huisstijl van technologie omdat het rustig en betrouwbaar leest, en precies daarom maakt een blauw accent een techmerk zelden op zichzelf herkenbaar.
- Het accent is het deel van een techpalet dat mensen onthouden, dus het moet een kleur zijn die jouw categorie nog niet bezit.
- Statuskleuren voor succes, waarschuwing en fout blijven het best conventioneel, ook als het merkaccent ongewoon is, want gebruikers vertrouwen erop om te handelen.
- Elke combinatie van tekst en achtergrond in een productpalet moet aan WCAG-contrast voldoen, minstens 4,5:1 voor lopende tekst.

Een goed **kleurenpalet voor tech** draait minder om één heldenkleur en meer om een systeem: een donkere ondergrond, een lichte ondergrond, een reeks neutrale grijzen, één accent dat van jou is en conventionele kleuren voor succes, waarschuwing en fout. Zakelijk blauw vult de accentplek bij zoveel softwarebedrijven dat het niets bijzonders meer zegt. Vervang het accent door iets wat je categorie niet bezit, houd de rest gedisciplineerd, en het merk leest nog steeds als competente technologie.

## Waarom techmerken steeds blauw kiezen

Blauw is veilig. Het leest in de meeste markten als rustig en betrouwbaar, past vanzelf in interfaces en is de standaardkleur van links op het web. Dat zijn goede redenen, en het resultaat is een zee van bijna identieke blauwtinten in bankapps, clouddashboards en productiviteitstools. [Kleurpsychologie](https://gradiently.design/nl/guide/color-psychology) legt de associaties uit; het probleem is simpelweg dat iedereen er tegelijk naar handelde.

Dit betekent niet dat blauw fout is. Het betekent dat blauw niet je enige idee kan zijn. Houd je het, combineer het dan met een onverwachte ondergrond, een tweede kleur of een kenmerkend materiaal, zodat de identiteit herkenbaar is, ook zonder logo.

## Acht kleurpaletten voor tech met hexcodes

Elk palet hieronder heeft een ondergrond, een ondersteunende toon en een accent. Ze zijn als kleurverloop geschreven, zodat je ziet hoe de kleuren zich samen gedragen, en daarna uitgesplitst in stalen voor het palet dat het hardst werkt in productinterfaces.

- Nachtinkt en zure limoen: `linear-gradient(135deg, #0b1020 0%, #1e2a4a 55%, #c6f432 100%)`
- Grafiet en signaaloranje: `linear-gradient(135deg, #111111 0%, #2b2b2b 50%, #ff5b2e 100%)`
- Papier en pijnboom: `linear-gradient(135deg, #f6f3ee 0%, #e4ddd2 50%, #2f5d50 100%)`
- Middernachtpaars en roze: `linear-gradient(135deg, #0d0b1f 0%, #3b1d6e 50%, #ff6fb5 100%)`
- Diep petrol en mint: `linear-gradient(135deg, #061a1c 0%, #0f4c4a 55%, #5ef2c8 100%)`
- Koelwit en elektrisch blauw: `linear-gradient(135deg, #fafaf7 0%, #d9dde3 50%, #3344ff 100%)`
- Espresso en amber: `linear-gradient(135deg, #1a1410 0%, #4a3426 50%, #ffb547 100%)`
- Zwart en zacht lavendelblauw: `linear-gradient(135deg, #0a0a0a 0%, #1f1f24 60%, #9b8cff 100%)`

Acht startpunten. Merk op hoeveel werk de ondergrond doet: hetzelfde accent voelt als een ontwikkelaarstool op zwart en als een rustige productiviteitsapp op papier.

- **Nachtinkt en zure limoen** past bij ontwikkelaarstools en infrastructuur: technisch, nachtelijk, onmogelijk te verwarren met een bank.
- **Grafiet en signaaloranje** leest als hardware, robotica of alles wat fysiek is. Oranje draagt ook goed op donkere productfotografie.
- **Papier en pijnboom** is de stille optie voor onderzoek, schrijven en gezondheidssoftware, waar rust belangrijker is dan snelheid.
- **Middernachtpaars en roze** past bij consumentenapps en creatieve tools die energie willen zonder het standaard verloop van blauw naar paars.
- **Diep petrol en mint** werkt voor klimaat-, data- en fintechmerken die fris willen voelen in plaats van zakelijk.
- **Koelwit en elektrisch blauw** houdt blauw, maar maakt het levendig en uniek, met bijna niets anders eromheen.
- **Espresso en amber** is warm en ongewoon in tech, goed voor horecasoftware, audio en alles wat mens eerst is.
- **Zwart en zacht lavendelblauw** is ingetogen en premium, dicht bij de look waar veel AI-producten naartoe groeien.

- Nachtinkt: #0b1020
- Leiblauw: #1e2a4a
- Mistgrijs: #8a94a8
- Wolk: #eef1f6
- Zure limoen: #c6f432

Nachtinkt en zure limoen als werkset: twee ondergronden, één middengrijs voor secundaire tekst en het accent. Limoen gebruik je voor één knop en één markering per scherm, nooit voor lopende tekst op wit.

## De vijf delen van een productpalet

Marketingpagina’s komen weg met drie kleuren. Een product niet, want interfaces hebben randen, uitgeschakelde staten, markeringen en meldingen nodig. Plan deze rollen voordat je tinten kiest, en het palet blijft samenhangend naarmate het product groeit.

| Rol | Wat het doet | Voorbeeld |
| --- | --- | --- |
| Donkere ondergrond | Appachtergrond in de donkere modus, voetteksten, heldensecties | `#0b1020` |
| Lichte ondergrond | Appachtergrond in de lichte modus, documenten, e-mail | `#fafaf7` |
| Neutrale reeks | Tekst, randen, scheidingslijnen, uitgeschakelde staten, in 8 tot 10 stappen | `#f2f4f7` tot `#111827` |
| Merkaccent | Primaire knoppen, links, het ene waar je op moet drukken | `#c6f432` |
| Statuskleuren | Succes, waarschuwing, fout, informatie | Groen, amber, rood, blauw |

Eerst rollen, dan tinten. De meeste producten hebben veel meer grijzen nodig dan merkkleuren.

> **Houd statuskleuren saai** Een ongewoon accent is een merkbeslissing. Een ongewone foutkleur is een bruikbaarheidsprobleem. Rood voor fouten en groen voor succes moeten herkenbaar blijven, ook als je hun exacte tint afstemt op je accent.

## Een techpalet omzetten in designtokens

Benoem kleuren naar rol, niet naar uiterlijk. Een token met de naam `--accent` overleeft een rebranding; een token met de naam `--lime` wordt een leugen op de dag dat het accent verandert. Definieer elke rol één keer voor de lichte modus en één keer voor de donkere, en laat componenten alleen naar rollen verwijzen.

```css
:root {
  --ground: #fafaf7;
  --surface: #ffffff;
  --text: #111827;
  --text-muted: #4b5563;
  --border: #d9dde3;
  --accent: #3344ff;
  --on-accent: #ffffff;
  --success: #15803d;
  --warning: #b45309;
  --danger: #b91c1c;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0b1020;
    --surface: #141a2e;
    --text: #eef1f6;
    --text-muted: #8a94a8;
    --border: #1e2a4a;
    --accent: #c6f432;
    --on-accent: #0b1020;
    --success: #4ade80;
    --warning: #fbbf24;
    --danger: #f87171;
  }
}
```

Roltokens voor beide modi. Het accent mag tussen de modi verschuiven: elektrisch blauw op wit, limoen op nachtinkt, zolang beide als hetzelfde merk voelen.

In de donkere modus worden techpaletten beoordeeld, want ontwikkelaars en gevorderde gebruikers leven er vaak in. [Ontwerpen voor de donkere modus](https://gradiently.design/nl/guide/dark-mode-design) behandelt de details, zoals de ondergrond iets optillen van puur zwart en statuskleuren lichter maken zodat ze niet trillen. Voor kleurverlopen die levendig blijven op moderne schermen zijn [oklch-kleurverlopen in CSS](https://gradiently.design/nl/guide/css-gradient-oklch) het bekijken waard.

## Controleer het contrast voordat je live gaat

Felle accenten zoals limoen, mint en amber zien er prachtig uit op donkere ondergronden en falen als tekst op wit. WCAG vraagt 4,5:1 voor lopende tekst en 3:1 voor grote tekst en interface-elementen. Test elke combinatie die je wilt gebruiken en schrijf op welke combinaties zijn toegestaan. [Kleurcontrast en toegankelijkheid](https://gradiently.design/nl/guide/color-contrast-accessibility) heeft de volledige methode.

### Vermijd

- Limoen- of mintkleurige tekst op een witte pagina
- Een accent dat tegelijk voor knoppen, links, grafieken en koppen dient
- Een puur zwarte ondergrond met overal puur witte tekst
- Statuskleuren die zo naar het merk zijn gebogen dat rood oranje lijkt

### Doe dit

- Felle accenten als vlak met donkere tekst erop
- Eén taak voor het accent: de primaire actie
- Een licht opgetilde donkere ondergrond en gebroken witte tekst
- Conventionele statuskleuren die alleen in tint zijn bijgesteld

## Het palet buiten de interface brengen

Lanceringsposts, conferentieslides en changelog-afbeeldingen zijn waar een techpalet een merk wordt. Vlakke vullingen in het accent worden snel eentonig, dus geef de marketingkant een rijker oppervlak: de ondergrondkleur met licht erdoorheen, korrel, een trage drift van het accent. [SaaS-branding](https://gradiently.design/nl/guide/saas-startup-branding) en [fintech-branding](https://gradiently.design/nl/guide/fintech-branding) laten zien hoe dat uitpakt in twee heel verschillende categorieën.

Een liggende lanceringsafbeelding die deploys in vier seconden aankondigt, nu in bèta

Een lanceringsafbeelding op het LinkedIn-linkformaat, 1200×627, waar de achtergrond het merk draagt en de woorden kort blijven.

Een staande socialmediapost die versie 3 van een softwareproduct aankondigt

Hetzelfde systeem als staande feedpost op 1080×1350.

Hier past Gradiently. Een Mark geeft een techmerk een levende achtergrond waarmee alleen jij kunt exporteren zodra je hem claimt, wordt in elk formaat opnieuw opgebouwd van linkafbeelding tot slide, en houdt releasenotities leesbaar door zijn rustigste vlak achter de woorden te leggen. Je kunt de Designer ook om een lanceringspost vragen, waarna die de andere formaten voor je maakt.

## FAQ

### Welke kleuren zijn het best voor een techbedrijf?

Elke kleur werkt als het palet een duidelijke structuur heeft: twee ondergronden, een neutrale reeks, één accent en conventionele statuskleuren. Kies een accent dat je concurrenten nog niet gebruiken.

### Waarom gebruiken zoveel techbedrijven blauw?

Blauw leest als rustig en betrouwbaar en past vanzelf in interfaces. Omdat zoveel bedrijven het om dezelfde redenen kozen, maakt een blauw accent alleen een merk zelden herkenbaar.

### Hoeveel kleuren moet een SaaS-palet hebben?

Meestal één merkaccent, een neutrale grijsreeks van 8 tot 10 stappen, twee ondergronden en vier statuskleuren. Producten hebben veel grijzen nodig en maar heel weinig merkkleuren.

### Kan een fel accent als limoen werken in een techmerk?

Ja, vooral op donkere ondergronden. Gebruik het als vlak met donkere tekst erop, niet als tekst op wit, waar het het contrast niet haalt.