Rosa og blå gradient: fra sukkerspinn til neon

En rosa og blå gradient blander en rosafarge som #f9a8d4 eller #ec4899 med en blå som #93c5fd eller #3b82f6. De to ligger litt for langt fra hverandre i fargesirkelen til å blandes rent som standard. De beste versjonene går derfor gjennom et syrin- eller fiolettstopp i midten. Hold paret lyst for sukkerspinn, eller mett det på mørk bunn for neon. Kodene nedenfor dekker hele spennet, med løsningen for midten og tekstfargene som virker.

Hvorfor rosa og blå gradient blir grå i midten

Nettlesere blander gradientfarger i sRGB som standard. Mellom varmt rosa og kjølig blått kan blandingen miste metning og se litt grå eller støvet ut. Det er mindre dramatisk enn å blande motsetninger, men synlig, særlig i pasteller. Løsningen er å bestemme midten selv: legg til et syrin- eller lavendelblått stopp, så alle punkter i blandingen holder seg klare.

I CSS kan du også skrive linear-gradient(90deg in oklch, #f472b6, #60a5fa), som holder lyshet og metning jevne gjennom blandingen. Brostoppet fungerer likevel overalt og lar deg styre nøyaktig hvilken syrintone som dukker opp.

Sukkerspinngradienter: pastellrosa og blått

Lyst rosa som glir inn i babyblått, virker søtt, lett og litt nostalgisk. Hold en myk syrin- eller kremtone mellom dem, og sett ordene i mørk skifer fremfor hvitt.

Pastellgradienter og pastellpaletter dekker mer av den myke paletten.

Himmel og sorbet: klarere rosa og blått

Øk metningen litt, så blir paret solrikt og lekent: en sommerhimmel mot slutten av dagen, en sorbetbod, en bassengfestflyer. Disse virker fortsatt vennlige fremfor høylytte.

Neonrosa og blå gradienter

Sterkt rosa og elektrisk cyan på nesten svart er signaturen til vaporwave, synthwave og mye spilldesign. Mørk bunn er nødvendig: den får fargene til å gløde. Hold neon i bånd, kanter eller lysfelt, og la det meste være mørkt. Neongradienter og synthwave-farger dekker stilen i dybden.

Tekstfarger på rosa og blå gradienter

Begge endene av en pastellrosa og blå gradient er lyse. Mørk skifertekst er derfor lesbar over hele flaten, noe som gjør dette til et av de enkleste parene å sette tekst på. Mettede versjoner er vanskeligere: både sterkt rosa og mellomblått er for lyse for liten hvit tekst. Verdiene nedenfor bruker WCAGs kontrastformel.

Hvor rosa og blå gradient passer

• Babyshower og kjønnsavsløringer: den mest tradisjonelle bruken, helst i de lyseste pastellene.
• Godteributikker, bakerier og iskrem: sorbettoner ser spiselige ut.
• Skapere og strømmere: neonversjoner på mørk bunn passer til spill og nattinnhold.
• Retrouttrykk: vaporwave, synthwave og Y2K-estetikk bruker alle paret.
• Pride: lyseblått, rosa og hvitt er fargene i transflagget, så paret brukes mye i Pride-design.

CSS for rosa og blå gradient

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

Neonmønsteret, to radiale lys på mørk base, er enkelt å tilpasse: flytt lysene, endre størrelsen, legg til et tredje i fiolett der de møtes. Hold lysene små. Når de dekker mer enn halve rammen, forsvinner den mørke bunnen og dermed gløden. I Gradiently går en Mark videre: lyset beveger seg langsomt, og skriften tilpasser seg delen av blandingen den står på. Ett design eksporteres som et stillbildeinnlegg, eller med Pro som en MP4- eller GIF-sløyfe.