# Roze blauw kleurverloop codes: suikerspin tot neon

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

Roze en blauw liggen net te ver uit elkaar om op de automatische piloot te mengen. Pak het midden goed aan en je krijgt suikerspinluchten of neonborden; negeer het en je krijgt een doffe lila veeg.

## The short version

- Een roze-blauw kleurverloop mengt roze tinten zoals #f9a8d4 of #ec4899 met blauwtinten zoals #93c5fd of #3b82f6, meestal via lila of violet in het midden.
- Omdat roze en blauw geen directe buren zijn, kan een rechte overgang ertussen in het midden grijzig worden, en een lila of violette stop lost dat op.
- Bleke roze-blauwe overgangen lezen als suikerspin en vragen donkere inkt, terwijl verzadigd roze en cyaan op bijna zwart als neon lezen.
- Noch felroze noch middelblauw draagt kleine witte tekst goed, dus bewaar wit voor grote koppen of voor donkere ondergronden.
- Roze en blauw passen bij babyshowers, snoepwinkels, creators, gaming en retro-esthetiek zoals vaporwave en Y2K.

Een **roze-blauw kleurverloop** mengt een roze zoals `#f9a8d4` of `#ec4899` naar een blauw zoals `#93c5fd` of `#3b82f6`. De twee liggen op het kleurenwiel net te ver uit elkaar om standaard zuiver te mengen, dus de beste versies lopen via een lila of violette stop in het midden. Houd het paar bleek en je krijgt suikerspin; maak het verzadigd op een donkere ondergrond en je krijgt neon. De codes hieronder dekken dat hele bereik, met de oplossing voor het midden en de tekstkleuren die werken.

## Waarom een roze-blauw kleurverloop in het midden grijs wordt

Browsers mengen verloopkleuren standaard in sRGB, en tussen een warm roze en een koel blauw kan die mix verzadiging verliezen en licht grijs of stoffig ogen. Het is minder dramatisch dan tegenovergestelden mengen, maar je ziet het, vooral in pastelovergangen. De oplossing is het midden zelf benoemen: voeg een lila of hortensiablauwe stop toe zodat elk punt van de overgang helder blijft.

- Twee stops, standaardmix: `linear-gradient(90deg, #f472b6 0%, #60a5fa 100%)`
- Met een violette brug: `linear-gradient(90deg, #f472b6 0%, #c084fc 50%, #60a5fa 100%)`

Hetzelfde roze en blauw, met en zonder brugstop. De tweede blijft verzadigd door het midden. [Troebele verlopen](https://gradiently.design/nl/guide/muddy-gradients) legt de kleurenleer uit.

In CSS kun je ook `linear-gradient(90deg in oklch, #f472b6, #60a5fa)` schrijven, wat helderheid en verzadiging gelijk houdt over de overgang. De brugstop werkt echter overal en geeft je controle over precies welke lila verschijnt.

## Suikerspin-kleurverlopen: pastelroze en blauw

Bleekroze dat overgaat in babyblauw voelt zoet, licht en een beetje nostalgisch. Houd een zacht lila of crème ertussen en zet de woorden in donker leisteen in plaats van wit.

- Suikerspin: `linear-gradient(135deg, #fbcfe8 0%, #e9d5ff 50%, #bfdbfe 100%)`
- Babydekentje: `linear-gradient(180deg, #fce7f3 0%, #e0f2fe 100%)`
- Suikerwolk: `radial-gradient(circle at 20% 20%, #fbcfe8 0%, #ddd6fe 45%, #a5f3fc 100%)`
- Perzikochtend: `linear-gradient(160deg, #fff7ed 0%, #fbcfe8 40%, #c7d2fe 100%)`

Pastelroze-blauwe overgangen. Elk heeft een lila, hortensiablauwe of crèmestap, zodat niets in het midden stoffig wordt.

Voor meer van het zachte palet gaan [pastelverlopen](https://gradiently.design/nl/guide/pastel-gradients) en [pastelkleurpaletten](https://gradiently.design/nl/guide/pastel-color-palettes) breder.

> **Pastelroze en blauw drukken** Heel bleke overgangen kunnen op ongecoat papier bijna verdwijnen, en heldere schermblauwen drukken vaak doffer. Maak elke stop iets dieper voor uitnodigingen en flyers en vraag om een proef. [Verlopen in druk](https://gradiently.design/nl/guide/print-gradients) behandelt de details.

## Lucht en sorbet: helderder roze en blauw

Verhoog de verzadiging een beetje en het paar wordt zonnig en speels: een zomerlucht aan het eind van de dag, een sorbetkraam, een flyer voor een zwembadfeest. Deze lezen nog steeds vriendelijk in plaats van luid.

- Avondlucht: `linear-gradient(180deg, #7dd3fc 0%, #c4b5fd 50%, #f9a8d4 100%)`
- Sorbet: `linear-gradient(120deg, #f472b6 0%, #a78bfa 50%, #38bdf8 100%)`
- Zwembadfeest: `radial-gradient(circle at 80% 80%, #fda4af 0%, #a5b4fc 45%, #7dd3fc 100%)`

Roze-blauwe verlopen met middelmatige verzadiging. Ideaal voor zomeracties en creator-content.

## Neon roze-blauwe verlopen

Felroze en elektrisch cyaan op bijna zwart is het handelsmerk van vaporwave, synthwave en veel gamingontwerp. De donkere ondergrond is niet optioneel: hij laat de kleuren gloeien. Houd het neon in banden, randen of gloeden en laat het grootste deel van het beeld donker. [Neonverlopen](https://gradiently.design/nl/guide/neon-gradients) en [synthwave-kleuren](https://gradiently.design/nl/guide/synthwave-colors) behandelen de stijl uitgebreid.

- Nachtrit: `linear-gradient(180deg, #0b0720 0%, #3b0764 55%, #ec4899 100%)`
- Neonbord: `linear-gradient(90deg, #ec4899 0%, #8b5cf6 50%, #06b6d4 100%)`
- Roze lamp, cyaan waas: `radial-gradient(ellipse at 20% 80%, #f0abfc 0%, #7e22ce 30%, #155e75 60%, #0b0720 85%)`
- Arcadezonsopgang: `conic-gradient(from 180deg at 50% 100%, #06b6d4, #8b5cf6, #ec4899, #06b6d4)`

Neon roze en blauw. Bleekroze en cyaan zijn allebei uitstekende tekstkleuren op de donkere delen.

## Tekstkleuren op roze-blauwe verlopen

Beide uiteinden van een pastelroze-blauw verloop zijn licht, dus donkere leisteentekst leest over het hele vlak, wat dit tot een van de makkelijkste paren maakt om tekst op te zetten. Verzadigde versies zijn lastiger: felroze en middelblauw zijn elk te licht voor kleine witte tekst. De waarden hieronder gebruiken de WCAG-contrastformule.

| Achtergrond | Tekst | Contrast | Oordeel |
| --- | --- | --- | --- |
| Kauwgomroze `#f9a8d4` | Leisteen `#1e293b` | 8,1:1 | Uitstekend |
| Babyblauw `#93c5fd` | Leisteen `#1e293b` | 8,1:1 | Uitstekend |
| Suikerroze `#fbcfe8` | Wit | 1,4:1 | Faalt |
| Felroze `#ec4899` | Wit | 3,5:1 | Alleen grote koppen |
| Blauw `#3b82f6` | Wit | 3,7:1 | Alleen grote koppen |
| Nacht `#0b0720` | Cyaan `#67e8f9` | 13,6:1 | Uitstekend, neon als inkt |

Leisteen scoort hetzelfde op beide pastelkanten, dus één inkt werkt over de hele suikerspinovergang.

Een uitnodiging voor een babyshower met donkere leisteenletters op een zacht roze, lila en babyblauw verloop

Een uitnodiging van 5×7 in op suikerspin, met leisteenkleurige letters.

Een liggende streamaankondiging met lichte letters op een donkere achtergrond verlicht met neonroze en cyaan

Een streamaankondiging op neonroze en cyaan over bijna zwart.

## Waar een roze-blauw kleurverloop bij past

- **Babyshowers en gender reveals:** het meest traditionele gebruik, het best in de bleekste pastels.
- **Snoepwinkels, bakkerijen en ijs:** sorbettinten zien er eetbaar uit.
- **Creators en streamers:** neonversies op donkere ondergronden passen bij gaming en content voor laat op de avond.
- **Retro-esthetiek:** vaporwave, synthwave en [Y2K-esthetiek](https://gradiently.design/nl/guide/y2k-aesthetic) leunen allemaal op het paar.
- **Pride:** lichtblauw, roze en wit zijn de kleuren van de transgendervlag, dus het paar komt veel voor in ontwerp voor Pride-maand.

## Roze-blauw kleurverloop in CSS

```css
.cotton-candy {
  background: linear-gradient(135deg, #fbcfe8 0%, #e9d5ff 50%, #bfdbfe 100%);
  color: #1e293b;
}

.neon {
  background-color: #0b0720;
  background-image:
    radial-gradient(circle at 15% 85%, #ec4899 0%, transparent 40%),
    radial-gradient(circle at 85% 15%, #06b6d4 0%, transparent 40%);
  color: #fce7f3;
}
```

Een pastelsectie met leisteentekst en een donkere neonsectie met twee gekleurde lichten.

Het neonpatroon, twee radiale lichten op een donkere basis, is makkelijk aan te passen: verplaats de lichten, verander hun grootte, voeg een derde in violet toe waar ze elkaar ontmoeten. Houd de lichten klein; zodra ze meer dan de helft van het beeld beslaan, verdwijnt de donkere ondergrond en daarmee de gloed. In Gradiently gaat een Mark verder: zijn licht beweegt langzaam en zijn tekst past zich aan het deel van het verloop aan waarop hij staat. Eén ontwerp exporteert als stilstaande post, of met Pro als looping MP4 of GIF.

## FAQ

### Wat is een goede code voor een roze-blauw kleurverloop?

Probeer voor suikerspin `linear-gradient(135deg, #fbcfe8 0%, #e9d5ff 50%, #bfdbfe 100%)`. Voor neon `linear-gradient(90deg, #ec4899 0%, #8b5cf6 50%, #06b6d4 100%)`.

### Waarom ziet mijn roze-blauwe kleurverloop er in het midden grijs uit?

Een rechte sRGB-overgang tussen een warm roze en een koel blauw verliest halverwege verzadiging. Voeg een lila of violette stop in het midden toe, of schrijf `in oklch` na de hoek.

### Welke tekstkleur past op een pastelroze-blauw kleurverloop?

Een donkere leisteen zoals `#1e293b` leest aan beide kanten met een contrast van ongeveer 8:1. Wit faalt op pastelroze en blauw.

### Wat is een suikerspin-kleurverloop?

Een pastelovergang van roze en babyblauw, meestal met een lila stap ertussen, vernoemd naar het snoep.

### Hoe maak ik een neon roze-blauw kleurverloop?

Gebruik verzadigd roze en cyaan op een bijna zwarte ondergrond, als gloeden of banden in plaats van een volledige vulling. De donkere ondergrond laat de kleuren verlicht lijken.