Regenboog kleurverlopen die niet op een preset lijken

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

Zo laat je een regenboog kleurverloop ontworpen ogen

1. 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. 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. 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. 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. 5

   Voeg textuur of zachtheid toe

   Korrel, vervaging of een trage radiale afname maakt van kleurbanden licht. Zie korrelige kleurverlopen 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.

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 voor jouw publiek.

.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));
}

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.

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 loopt de opties langs.

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
• Pride-campagnes, waar de regenboogvlag een eigen betekenis en eigen zes strepen heeft, dus gebruik hem met intentie en niet als decoratie

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.