# Regenboog kleurverlopen die niet op een preset lijken

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

De standaardregenboog heeft een schelle gele streep en een donkerblauw gat. Herstel de lichtheid, kies je boog en het spectrum wordt een van de vrolijkste middelen die je hebt.

## The short version

- Een regenboog kleurverloop mengt door de tinten van het spectrum, en de standaardversie oogt goedkoop omdat de kleuren heel verschillend in lichtheid zijn.
- In OKLCH heeft puur geel een lichtheid van ongeveer 97%, terwijl puur blauw rond 45% zit, en daarom toont een standaardregenboog een heldere streep en een donkere band.
- Regenboog kleurverlopen ogen ontworpen wanneer je elke stop op een vergelijkbare lichtheid houdt, de chroma iets verlaagt en alleen het deel van het spectrum gebruikt dat je nodig hebt.
- CSS kan een regenboog voor je mengen met `linear-gradient(in oklch longer hue, ...)`, dat tussen twee kleuren het hele kleurenwiel rond reist.
- Tekst op een regenboog heeft een rustig gebied of een band erachter nodig, omdat het contrast over het hele kleurverloop verandert.

Een **regenboog kleurverloop** mengt door de tinten van het spectrum, van rood via oranje, geel, groen en blauw naar violet. De versie die de meeste tools je geven lijkt op een standaardinstelling omdat ze in helderheid verspringt: een schelle gele streep, een donkerblauwe band en harde randen ertussen. Een regenboog die ontworpen oogt, houdt elke kleur op een vergelijkbare lichtheid, gebruikt iets minder verzadiging en beslaat vaak maar een deel van het spectrum.

Deze gids laat zien waarom de preset niet klopt, drie manieren om dat op te lossen, kopieerbare regenboogcodes en de CSS waarmee je in moderne browsers vloeiende regenbogen maakt. Zijn tint, lichtheid en chroma nieuw voor je, dan behandelt [kleurcodes uitgelegd](https://gradiently.design/nl/guide/color-codes-explained) ze eerst.

## Waarom de standaardregenboog goedkoop oogt

De klassieke regenboog wordt in HSL gebouwd door de tint te verschuiven terwijl verzadiging en lichtheid vaststaan. De lichtheid van HSL is een formule, geen maat voor hoe helder kleuren ogen. Voor je oog is puur geel veel helderder dan puur blauw, ook al noemt HSL ze allebei 50%. OKLCH meet de waargenomen lichtheid, en de cijfers laten het probleem duidelijk zien.

| Kleur | Hex | HSL-lichtheid | OKLCH-lichtheid |
| --- | --- | --- | --- |
| Rood | `#ff0000` | 50% | 62,8% |
| Geel | `#ffff00` | 50% | 96,8% |
| Groen | `#00ff00` | 50% | 86,6% |
| Cyaan | `#00ffff` | 50% | 90,5% |
| Blauw | `#0000ff` | 50% | 45,2% |
| Magenta | `#ff00ff` | 50% | 70,2% |

HSL zegt dat deze even licht zijn. De waargenomen lichtheid loopt van 45% tot 97%, en daarom oogt de standaardregenboog gestreept.

- Standaardregenboog in HSL: `linear-gradient(90deg, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%)`
- Regenboog met gelijke lichtheid: `linear-gradient(90deg, #e68485 0%, #d49648 17%, #9bb054 33%, #43bd99 50%, #2fb5d8 67%, #87a0f0 83%, #c68bd3 100%)`

Dezelfde reis rond het kleurenwiel. De tweede houdt elke stop rond 72% OKLCH-lichtheid, dus geen kleur springt eruit of zakt weg.

## Zo laat je een regenboog kleurverloop ontworpen ogen

1. **Trek de lichtheid gelijk** Kies één waargenomen lichtheid, zoals 72% in OKLCH, en houd elke stop daar. Deze ene verandering haalt de gele streep en het blauwe gat weg.
2. **Verlaag de chroma een beetje** Volledig verzadigde schermkleuren vechten met elkaar. Een chroma rond 0,12 in OKLCH houdt elke tint levendig en toch binnen wat gewone schermen kunnen tonen.
3. **Gebruik een boog, niet het hele wiel** Drie of vier naburige tinten, zoals koraal naar goud of teal naar violet, lezen als een doordachte keuze. Het volledige spectrum leest als een testbeeld, tenzij het juist het punt is.
4. **Geef het een ondergrond** Een regenboog op wit voelt als kinderspeelgoed; dezelfde regenboog die uit bijna zwart oprijst, voelt als licht door een prisma. Beslis welke je wilt.
5. **Voeg textuur of zachtheid toe** Korrel, vervaging of een trage radiale afname maakt van kleurbanden licht. Zie [korrelige kleurverlopen](https://gradiently.design/nl/guide/grainy-gradients) voor de korrelkant.

## Codes voor regenboog kleurverlopen om te kopiëren

De eerste drie beslaan het hele spectrum op verschillende lichtheidsniveaus. De rest zijn bogen: een deel van de regenboog, gekozen voor een sfeer, en zo werken de meeste regenboogidentiteiten in de praktijk.

- Spectrum in balans: `linear-gradient(90deg, #e68485 0%, #d49648 17%, #9bb054 33%, #43bd99 50%, #2fb5d8 67%, #87a0f0 83%, #c68bd3 100%)`
- Pastelregenboog: `linear-gradient(90deg, #fcbfbe 0%, #efca9f 17%, #cbd8a5 33%, #a3e0ca 50%, #9ddcf1 67%, #bfd0ff 83%, #e6c3ee 100%)`
- Spectrumwiel: `conic-gradient(from 0deg at 50% 50%, #e68485, #d49648, #9bb054, #43bd99, #2fb5d8, #87a0f0, #c68bd3, #e68485)`
- Zonsopgangboog: `linear-gradient(120deg, #ff6b6b 0%, #ff9f43 50%, #feca57 100%)`
- Laguneboog: `linear-gradient(120deg, #1dd1a1 0%, #0abde3 50%, #5f27cd 100%)`
- Schemerboog: `linear-gradient(120deg, #5f27cd 0%, #c44569 50%, #ff9f43 100%)`
- Prisma op zwart: `radial-gradient(120% 90% at 50% 110%, #c68bd3 0%, #87a0f0 20%, #2fb5d8 35%, #43bd99 48%, #9bb054 60%, #d49648 72%, #e68485 82%, #0b0b10 100%)`
- Parelglans: `linear-gradient(135deg, #f5e1ff 0%, #d8f3ff 35%, #e1ffe9 65%, #fff4d6 100%)`

Acht regenboog kleurverlopen. In balans en pastel houden elke stop op één lichtheid; de bogen kiezen een hoek van het wiel; de laatste twee gebruiken het spectrum als licht.

## Vloeiende regenbogen in CSS met tintinterpolatie in OKLCH

Moderne CSS kan voor je rond het kleurenwiel reizen. Zet je de interpolatie op `oklch` en de tintmethode op `longer hue`, dan neemt de browser de lange weg tussen twee kleuren, zodat twee stops op dezelfde tint een volledige, gelijkmatige regenboog opleveren. Het werkt in de huidige versies van Chrome, Edge, Safari en Firefox; raadpleeg [de compatibiliteitstabel van MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient) voor jouw publiek.

```css
.rainbow {
  /* Fallback: hand-picked stops at even lightness */
  background: linear-gradient(90deg, #e68485, #d49648, #9bb054, #43bd99, #2fb5d8, #87a0f0, #c68bd3);
  /* One colour, all the way round the hue wheel, at one lightness */
  background: linear-gradient(in oklch longer hue 90deg, oklch(72% 0.12 20), oklch(72% 0.12 20));
}

.rainbow-arc {
  /* Only the short way from coral to teal, still perceptually even */
  background: linear-gradient(in oklch 90deg, oklch(72% 0.12 20), oklch(72% 0.12 170));
}
```

De eerste regel tekent een volledige regenboog vanuit één kleur. De tweede tekent een boog en neemt de kortere route tussen twee tinten.

Houd de chroma bescheiden als je dit doet. Bij hoge chroma vallen sommige tinten, vooral blauw en violet, buiten wat een gewoon sRGB-scherm kan tonen, en moet de browser ze terugduwen, waardoor de ongelijke banden terugkomen. Meer hierover in [vloeiendere CSS-kleurverlopen met OKLCH](https://gradiently.design/nl/guide/css-gradient-oklch).

## Tekst op een regenboog kleurverloop zetten

Een regenboog is de lastigste achtergrond voor tekst, omdat het contrast over de hele lengte verandert. Donkere tekst die goed leest op teal kan op violet verdwijnen. Zet woorden op het rustigste deel, zet ze op een stille band of kaart, of gebruik een pastelregenboog met donkere letters en controleer de lichtste en donkerste punten achter elke regel. [Tekst op een kleurverloop](https://gradiently.design/nl/guide/text-on-gradient) loopt de opties langs.

Een vierkante post waarop de woorden Hallo kleur dwars over een regenboog kleurverloop lopen, met enkele letters die lastiger te lezen zijn

Zonder hulp kruisen de woorden elke tint en blijft hun contrast veranderen.

Dezelfde vierkante post waarop het kleurverloop achter de woorden Hallo kleur verzacht, zodat de tekst duidelijk leest

Nu het vlak achter de woorden tot rust komt, blijft de regenboog vrolijk en leest de regel.

## Waar regenboog kleurverlopen passen

- **Creatieve tools en kleurproducten**, waar het spectrum bereik laat zien
- **Kindermerken en onderwijs**, meestal in de pastelversie
- **Muziek, festivals en nachtleven**, als een prisma op een donkere ondergrond
- **Holografische en iriserende looks**, als een bleke parelglans; zie [holografische kleurverlopen](https://gradiently.design/nl/guide/holographic-gradients)
- **Pride-campagnes**, waar de regenboogvlag een eigen betekenis en eigen zes strepen heeft, dus gebruik hem met intentie en niet als decoratie

> **Kies eerst de boog** Vraag je, voordat je naar het volledige spectrum grijpt, af welke drie of vier tinten de sfeer dragen. De meeste regenboogontwerpen die duur aanvoelen, zijn eigenlijk bogen.

Een Mark van Gradiently kan tot acht kleuren bevatten, genoeg voor een volledige, gelijkmatige regenboog met een materiaal en korrel erbovenop. Je bouwt er een, regelaar voor regelaar, in de Forge.

## FAQ

### Hoe maak ik een regenboog kleurverloop in CSS?

Gebruik `linear-gradient(in oklch longer hue 90deg, oklch(72% 0.12 20), oklch(72% 0.12 20))` voor een vloeiende, gelijkmatige regenboog, met ervoor een kleurverloop met hex-stops als terugvaloptie.

### Waarom heeft mijn regenboog kleurverloop een felgele streep?

Geel wordt bij dezelfde HSL-lichtheid als veel lichter waargenomen dan blauw of rood. Houd elke stop op één waargenomen lichtheid, zoals 72% in OKLCH, om de streep weg te halen.

### Wat zijn de hexcodes voor een pastel regenboog kleurverloop?

Probeer `#fcbfbe`, `#efca9f`, `#cbd8a5`, `#a3e0ca`, `#9ddcf1`, `#bfd0ff` en `#e6c3ee`, die allemaal op een vergelijkbare hoge lichtheid zitten.

### Kun je tekst op een regenboog kleurverloop zetten?

Ja, maar het contrast verandert over het kleurverloop. Zet tekst op het rustigste gebied, op een band of kaart, of gebruik een pastelregenboog met donkere tekst en controleer elk punt achter de woorden.