Roze blauw kleurverloop codes: suikerspin tot neon

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.

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.

Voor meer van het zachte palet gaan pastelverlopen en pastelkleurpaletten breder.

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.

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 en synthwave-kleuren behandelen de stijl uitgebreid.

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.

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

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

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.