# Cyaan verloop: scherpe, elektrische codes

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

Cyaan is de kleur van schermen, zwembaden en ijs: schoon, helder en een beetje futuristisch. Het is ook veel lichter dan het lijkt, wat verandert hoe je er woorden op zet.

## The short version

- Een cyaan verloop mengt de heldere kleur halverwege groen en blauw met wit, blauw, limoen, magenta of een diep marineblauw.
- Zuiver schermcyaan is `#00ffff`, door CSS ook aqua genoemd, en is lichter en helderder dan blauwgroen of turkoois.
- Witte tekst op zuiver cyaan heeft een contrast van slechts ongeveer 1,3 op 1, dus cyaan heeft donkere letters of een veel diepere achtergrond achter woorden nodig.
- Cyaan ziet er het meest elektrisch uit op een bijna zwarte of marineblauwe ondergrond, waar een kleine hoeveelheid ervan lijkt te gloeien.
- Cyaan gaat netjes over in blauw en limoen, omdat beide zijn buren op het kleurenwiel zijn.

Een **cyaan verloop** mengt de heldere kleur halverwege groen en blauw met een van zijn buren: wit voor ijs, blauw voor een elektrische techlook, limoen voor frisheid, magenta voor een cybergevoel, of een diep marineblauw waar cyaan lijkt te gloeien. Zuiver schermcyaan is `#00ffff`, en het is veel lichter dan de meeste mensen verwachten, dus de belangrijkste vaardigheid is bepalen waar de woorden komen. Hierna volgen kopieerbare codes voor elke look, met de contrastgetallen die ertoe doen.

## Cyaan, blauwgroen en turkoois zijn niet hetzelfde

Deze drie worden voortdurend verwisseld, en het verschil doet ertoe als je een ontwerper briefet of een code kiest. CSS noemt alle drie, en ze zijn duidelijk verschillend. Cyaan is het helderst en het meest in balans tussen groen en blauw. Turkoois is zachter en iets groener, zoals de edelsteen. Blauwgroen (teal) is veel donkerder en rustiger.

| Kleur | CSS-naam en hex | Karakter |
| --- | --- | --- |
| Cyaan | `aqua` / `cyan`, `#00ffff` | Helderst, elektrisch, synthetisch |
| Elektrisch cyaan | `#00e5ff` | Cyaan met een snufje meer blauw, prettiger voor de ogen |
| Turkoois | `turquoise`, `#40e0d0` | Zachter en groener, tropisch |
| Teal | `teal`, `#008080` | Donker, rustig, volwassen |

Vier buren. Als je verloop rustig in plaats van helder moet aanvoelen, wil je waarschijnlijk teal, geen cyaan.

Voor de rustigere verwanten, zie [teal verloop](https://gradiently.design/nl/guide/teal-gradient) en [turkoois verloop](https://gradiently.design/nl/guide/turquoise-gradient). Dit artikel blijft aan het heldere uiteinde.

- IJs: #f0fdff
- Zwembadlicht: #a5f3fc
- Zuiver cyaan: #00ffff
- Elektrisch cyaan: #00e5ff
- Diep cyaan: #0891b2
- Lagune: #0e7490
- Nachtmarine: #082f49
- Limoenaccent: #b6f73a

Een cyaanfamilie van ijs tot marineblauw, plus limoen als partner die het fris houdt.

## Cyaanverlopen voor ijs en zwembad

Het lichte uiteinde van cyaan voelt als koud water en schone lucht. IJs is bijna wit met een zweem kleur; gletsjer en zwembad lopen dieper, via helder cyaan naar een blauwgroen dat onderaan witte letters kan dragen. Ze passen bij zomeraanbiedingen, huidverzorging met een verkoelend verhaal, drankjes en alles wat verfrissend wil overkomen.

- IJs: `linear-gradient(180deg, #f0fdff 0%, #b8f3ff 50%, #5fdcf5 100%)`
- Gletsjer: `linear-gradient(160deg, #e0fbff 0%, #67e8f9 45%, #0891b2 100%)`
- Zwembad: `linear-gradient(180deg, #a5f3fc 0%, #22d3ee 50%, #0e7490 100%)`

Lichte cyaantinten. Zet donkere letters op het bovenste deel van elk; alleen de diepste stop onderaan gletsjer en zwembad verdraagt wit.

## Elektrisch cyaan op donkere achtergronden

Cyaan wordt elektrisch wanneer het op duisternis staat. Een klein cyaan licht op een bijna zwarte of marineblauwe ondergrond lijkt op een scherm, een laser of een datavisualisatie, daarom zie je het overal in software, gaming en wetenschap. Houd het grootste deel van het beeld donker en laat cyaan een hoek of rand innemen. Het **cyaanblauwe verloop** in deze set is het veelzijdigst van allemaal, helder aan de ene kant en stevig blauw aan de andere.

- Cyaan naar elektrisch blauw: `linear-gradient(135deg, #00e5ff 0%, #00a3ff 50%, #2563eb 100%)`
- Cyaanlicht op zwart: `radial-gradient(circle at 30% 30%, #00e5ff 0%, #0077a8 30%, #04202e 65%, #01070c 100%)`
- Schakelnacht: `linear-gradient(160deg, #020617 0%, #082f49 50%, #06b6d4 100%)`

Donkere ondergronden met cyaanlicht. Schakelnacht stijgt van zwart naar cyaan, perfect voor een hero waar de kop in de donkere bovenhelft staat.

Voor volledige schema’s rond deze look heeft [techkleurenpaletten](https://gradiently.design/nl/guide/tech-color-palettes) er meerdere, en [neonverlopen](https://gradiently.design/nl/guide/neon-gradients) duwt het verder richting nachtleven.

## Cyaan met limoen en met magenta

Cyaan naar limoen loopt via mint en voelt sportief, fris en optimistisch. Cyaan met magenta is de cyberpunkcombinatie: twee van de drie drukprimaire kleuren, allebei op volle sterkte. Laat die door een donker indigo midden lopen en het voelt als een neonstraat bij nacht in plaats van kinderspeelgoed. Het artikel [magenta verloop](https://gradiently.design/nl/guide/magenta-gradient) behandelt de andere kant van deze combinatie.

- Cyaan naar limoen: `linear-gradient(135deg, #00e5ff 0%, #34f5c5 50%, #b6f73a 100%)`
- Cyberpunk: `linear-gradient(135deg, #00e5ff 0%, #3b2aa8 50%, #ff2bd6 100%)`

Twee gedurfde combinaties. Beide zijn luid, dus geef ze korte woorden en veel ruimte.

## De contrastval: woorden op cyaan

Cyaan is een van de lichtste verzadigde kleuren die een scherm kan tonen. Witte letters op zuiver `#00ffff` hebben een contrast van slechts ongeveer 1,3 op 1, wat onleesbaar is, terwijl zwart op hetzelfde cyaan ongeveer 16,7 op 1 haalt. Wit gaat werken zodra het cyaan verdiept tot rond `#0e7490`, waar het ruwweg 5,4 op 1 haalt. [Kleurcontrast en toegankelijkheid](https://gradiently.design/nl/guide/color-contrast-accessibility) legt de verhoudingen en de doelen uit.

### Moeilijk te lezen

- Witte letters op helder cyaan
- Cyaankleurige letters op een witte pagina
- Kleine tekst over het heldere midden van een verloop
- Lichtblauwe letters op ijs

### Makkelijk te lezen

- Marineblauwe of bijna zwarte letters op helder cyaan
- Cyaankleurige letters op een marineblauwe of zwarte pagina
- Kleine tekst alleen op de diepste stop
- Witte letters op lagune #0e7490 of donkerder

Dit is het soort afweging dat Gradiently voor je maakt. Auto-inkt kiest voor elke regel lichte of donkere letters uit het eigen palet van de Mark, en de Mark verplaatst zijn rustigste, best contrasterende gebied achter de woorden, dus een heldere cyaan achtergrond laat nooit witte tekst in de steek.

## Een cyaan verlooprand in CSS

Op donkere interfaces werkt cyaan prachtig als rand in plaats van als vulling. Een verlooprand houdt de kaart leesbaar en voegt het elektrische gevoel toe. Dit gebruikt twee achtergronden, een bijgesneden op de padding en een op de rand, zodat afgeronde hoeken blijven.

```css
.card {
  border: 2px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(#0b1220, #0b1220) padding-box,
    linear-gradient(135deg, #00e5ff 0%, #2563eb 100%) border-box;
  color: #e6f9ff;
}
```

Een donkere kaart met een rand van cyaan naar blauw. Vervang het tweede verloop door cyaan naar limoen voor een frissere indruk.

Meer technieken, ook voor geanimeerde randen, staan in [CSS-verloopranden](https://gradiently.design/nl/guide/css-gradient-border).

## Waar een cyaan verloop past

Cyaan is een natuurlijke keuze voor softwarelanceringen, ontwikkelaarstools, gaming, zwemkleding, drankjes en alles wat snel of koud wil aanvoelen. Houd op lanceerdag één cyaanlook over de aankondigingspost, de linkvoorvertoning en de changelogbanner, zodat mensen hem in elke feed herkennen. [Branding voor SaaS-startups](https://gradiently.design/nl/guide/saas-startup-branding) laat zien hoe je een hele identiteit bouwt rond één heldere kleur als deze.

Een brede socialpost met een donkermarineblauwe achtergrond, een helder cyaanlicht aan één rand en de woorden Deploys in seconden in wit

Een lanceerpost voor X op 1600×900. Witte letters aan de donkere kant, met het cyaanlicht uit de buurt van de woorden.

## FAQ

### Wat is de hexcode voor cyaan?

Zuiver schermcyaan is #00ffff, in CSS ook aqua genoemd. Een iets blauwer, prettiger elektrisch cyaan is #00e5ff.

### Wat is het verschil tussen cyaan en teal?

Cyaan is helder en licht, halverwege groen en blauw. Teal, #008080 in CSS, is een veel donkerder en rustiger blauwgroen.

### Welke tekstkleur werkt op een cyaan achtergrond?

Marineblauw of bijna zwart op helder cyaan. Wit werkt alleen op diepe cyaantinten zoals #0e7490 of donkerder.

### Welke kleuren passen goed bij een cyaan verloop?

Blauw en limoen mengen netjes omdat ze de buren van cyaan zijn. Magenta geeft een gedurfde cyberpunkcombinatie, en marineblauw of zwart laat cyaan gloeien.