# Felle kleurenpaletten die leesbaar blijven

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

Felle kleuren zijn makkelijk lief te hebben en makkelijk onleesbaar te maken. De truc is weten welke kleuren zwarte tekst willen, welke witte, en het hele palet een rustige plek geven.

## The short version

- Een fel kleurenpalet gebruikt sterk verzadigde kleuren zoals knalroze, mandarijn, citroen, elektrisch blauw en felgroen.
- Felle gele, groene, cyaan, turquoise en oranje tinten zijn lichte kleuren, dus ze hebben donkere tekst nodig in plaats van witte.
- Felle rode en roze tinten meten ongeveer 3,5:1 tegen wit, wat WCAG AA voor lopende tekst niet haalt, dus zet kleine tekst erop in zwart en bewaar wit voor grote koppen.
- Twee felle kleuren met vergelijkbare helderheid die tegen elkaar liggen lijken te trillen, dus scheid ze met een neutrale kleur of een duidelijk verschil in helderheid.
- Elk fel palet heeft een rustig anker nodig, meestal een bijna zwart of een warm gebroken wit, om tekst te dragen en de kleur ruimte te geven.

Een **fel kleurenpalet** blijft leesbaar als je elke felle kleur behandelt naar zijn helderheid en niet naar zijn luidheid. Citroen `#FFD60A`, felgroen `#34C759`, aqua `#00C2FF` en mandarijn `#FF7A00` zijn allemaal licht genoeg om bijna zwarte tekst te vragen. Knalroze `#FF2D87` en klaproosrood `#FF3B30` zitten in een lastig midden: zwarte tekst haalt het, maar wit werkt alleen voor grote koppen. Voeg één rustige ankerkleur toe, geef elke felle kleur zijn eigen ruimte, en een palet dat op een snoepwinkel lijkt, wordt een palet waar je echt woorden op kunt zetten.

## Welke felle kleuren zwarte tekst nodig hebben

Verzadiging laat een kleur sterk voelen, maar leesbaarheid hangt af van helderheid. Veel felle kleuren zijn veel lichter dan ze lijken, en daarom voelt witte tekst op felgroen of geel luid aan en is hij toch moeilijk te lezen. De tabel hieronder meet elf felle kleuren tegen wit en tegen bijna zwart `#111111`.

| Kleur | Hex | Met witte tekst | Met zwarte tekst |
| --- | --- | --- | --- |
| Citroen | `#FFD60A` | 1,41:1 | 13,38:1, gebruik zwart |
| Aqua | `#00C2FF` | 2,07:1 | 9,14:1, gebruik zwart |
| Muntturkoois | `#00D1B2` | 1,95:1 | 9,68:1, gebruik zwart |
| Felgroen | `#34C759` | 2,22:1 | 8,51:1, gebruik zwart |
| Mandarijn | `#FF7A00` | 2,61:1 | 7,23:1, gebruik zwart |
| Klaproosrood | `#FF3B30` | 3,55:1 | 5,32:1, gebruik zwart |
| Knalroze | `#FF2D87` | 3,51:1 | 5,37:1, gebruik zwart |
| Framboos | `#E0115F` | 4,76:1, gebruik wit | 3,97:1 |
| Elektrisch violet | `#8B3DFF` | 4,99:1, gebruik wit | 3,78:1 |
| Kobalt | `#1D4ED8` | 6,70:1, gebruik wit | 2,82:1 |
| Signaalrood | `#C81D11` | 5,77:1, gebruik wit | 3,27:1 |

WCAG AA vraagt 4,5:1 voor lopende tekst en 3:1 voor grote tekst. Framboos en elektrisch violet zijn krap: wit haalt het, maar nét.

Een handige vuistregel: de lichte kant van het wiel, van oranje via geel en groen naar cyaan, neemt zwart, net als de felste roze en rode tinten; de diepe kant, van blauw via violet naar karmozijn, neemt wit. Ontwerp je voor een breed publiek, lees dan ook [kleurenblindvriendelijke paletten](https://gradiently.design/nl/guide/color-blindness-design), want felle kleuren die alleen in tint verschillen kunnen voor sommige lezers hetzelfde lijken.

## Zes felle kleurenpaletten met hexcodes

- Warm wit: #fff8ec
- Knalroze: #ff2d87
- Mandarijn: #ff7a00
- Citroen: #ffd60a
- Inkt: #111111

Fruitkraam. Drie warme felle kleuren tussen een warm wit en een inktzwart. De inkt draagt alle tekst; de felle kleuren dragen vormen en grote woorden.

- Nachtviolet: #1a1033
- Muntturkoois: #00d1b2
- Citroen: #ffd60a
- Knalroze: #ff2d87
- Lila wit: #f4f1ff

Speelhal. Een donkere achtergrond laat felle kleuren gloeien, en alle drie halen AA ertegen: citroen op 12,76:1, muntturkoois op 9,23:1, knalroze op 5,13:1.

- **Zwembadfeest:** aqua `#00C2FF`, felgroen `#34C759`, citroen `#FFD60A`, wit `#FFFFFF`, diep marineblauw `#0B1F3A` voor tekst.
- **Basisschool:** kobalt `#1D4ED8`, signaalrood `#C81D11`, citroen `#FFD60A`, papier `#FAF7F0`, inkt `#111111`.
- **Risodruk:** fluorescerend roze `#FF48B0`, blauw `#0078BF`, geel `#FFE800`, krantenpapier `#F2EFE6`, zwart `#1A1A1A`.
- **Tropisch:** framboos `#E0115F`, mango `#FFA51F`, palm `#00A86B`, zand `#F6EBD9`, cacao `#2B1B14`.

## Zo houd je een fel palet leesbaar

1. **Kies eerst een anker** Kies een bijna zwart of een warm gebroken wit en laat dat het grootste deel van het oppervlak bedekken. Warm wit `#FFF8EC` met inkt `#111111` meet 17,89:1, dus elk woord in inkt is leesbaar.
2. **Zet tekst in het anker, niet in een felle kleur** Lopende tekst hoort in de ankerkleur. Felle kleuren kunnen een kop of één groot getal dragen, waar de drempel van 3:1 voor grote tekst geldt.
3. **Scheid felle kleuren van gelijke helderheid** Knalroze naast een elektrisch blauw zoals `#2F6BFF` meet 1,28:1, en de rand lijkt te schemeren. Zet wit, zwart of ruimte ertussen, of combineer een lichte felle kleur met een diepe.
4. **Beperk hoeveel felle kleuren de woorden raken** Drie felle kleuren in een palet is ruim voldoende, en er mag er maar één achter een tekstblok zitten. De [60-30-10-regel](https://gradiently.design/nl/guide/60-30-10-rule) helpt hierbij: anker 60, leidende felle kleur 30, accenten 10.
5. **Controleer het op een telefoon buiten** Felle kleuren verbleken in zonlicht en op schermen met lage helderheid. Als de woorden nog leesbaar zijn op een gedimde telefoon, werkt het palet.

Een felle zomersalepost waarin de kleine ondersteunende tekst verdwijnt tegen de felle achtergrond

Een luide achtergrond met de woorden er recht bovenop: de kop overleeft, de detailregel verdwijnt.

Dezelfde felle zomersalepost waarbij elke tekstregel duidelijk leesbaar is tegen een rustiger gebied erachter

Dezelfde kleuren, met de achtergrond die achter de tekst tot rust komt. Nog steeds fel, en elke regel is leesbaar.

Die rechterversie is wat Gradiently standaard doet. Een Mark weet waar je woorden staan, laat zijn drukste kleur daar wegzakken en kiest regel voor regel lichte of donkere letters, zodat je een palet luid kunt houden zonder kader of schaduw achter de tekst.

## Felle verlopen zonder grijs midden

Meng je twee felle kleuren van tegenovergestelde kanten van het wiel in gewoon sRGB, dan wordt het midden grijs of bruin. Kies dan buurkleuren, of laat de browser interpoleren in oklch, wat het midden verzadigd houdt. [Verloopinterpolatie](https://gradiently.design/nl/guide/gradient-interpolation) legt het verschil uit.

- Roze naar citroen: `linear-gradient(135deg, #ff2d87 0%, #ff7a00 55%, #ffd60a 100%)`
- Aqua naar groen: `linear-gradient(135deg, #00c2ff 0%, #00d1b2 50%, #34c759 100%)`
- Roze naar aqua in oklch: `linear-gradient(in oklch 135deg, #ff2d87 0%, #00c2ff 100%)`
- Roze gloed op nacht: `radial-gradient(circle at 30% 30%, #ff2d87 0%, #8b3dff 45%, #1a1033 90%)`

Aangrenzende felle kleuren mengen netjes. Tegenpolen blijven levendig als je in oklch interpoleert.

Voor meer combinaties zie [levendige verlopen](https://gradiently.design/nl/guide/vibrant-gradients) en [neonverlopen](https://gradiently.design/nl/guide/neon-gradients). Voor volledige contrastrichtlijnen lees je [kleurcontrast](https://gradiently.design/nl/guide/color-contrast-accessibility).

Een waarschuwing als het palet gedrukt wordt: de meest elektrische schermkleuren, vooral aqua, knalroze en felgroen, liggen buiten wat standaard CMYK-inkten kunnen weergeven, en ze komen merkbaar doffer terug van de drukker. Vraag om een proef, of plan met steunkleuren of fluorescerende inkten. [RGB versus CMYK](https://gradiently.design/nl/guide/rgb-vs-cmyk) legt uit wat je kunt verwachten.

## FAQ

### Wat is een fel kleurenpalet?

Een set sterk verzadigde kleuren zoals knalroze, mandarijn, citroen, aqua en felgroen, meestal in balans gebracht met een neutraal anker voor tekst.

### Moet ik witte of zwarte tekst op felle kleuren gebruiken?

Gebruik zwart op lichte felle kleuren zoals geel, oranje, groen, aqua en turquoise, en ook op knalroze en klaproosrood. Gebruik wit op diepe felle kleuren zoals kobalt, violet, framboos en signaalrood.

### Waarom lijken sommige felle kleuren te trillen?

Twee verzadigde kleuren van vergelijkbare helderheid naast elkaar, zoals knalroze en elektrisch blauw, laten de rand ertussen schemeren. Scheid ze met een neutrale kleur of verander de helderheid van een van de twee.

### Hoeveel felle kleuren moet een palet hebben?

Twee of drie felle kleuren plus een of twee neutrale is ruim voldoende. Er mag maar één felle kleur achter een tekstblok zitten.

### Zijn felle kleuren slecht voor toegankelijkheid?

Niet op zich. Problemen komen van tekst op felle kleuren met te weinig contrast, dus controleer elk tekstpaar tegen WCAG en houd lopende tekst in een donker of licht anker.