Blå lila gradient: 20 koder som blandas rent

En blå lila gradient löper mellan närliggande färgtoner på färghjulet: blått #3b82f6, indigo #4f46e5, violett #7c3aed och de mjuka periwinkle- och lavendeltonerna runt dem. Eftersom färgtonerna ligger sida vid sida blir övergången ren nästan av sig själv. Det svårare är att göra en som inte ser ut som de tusentals appikoner och konferensbilder som redan använder en. Nedan finns tjugo koder i fyra stämningar, de fall där övergången faktiskt blir matt och de textfärger som läses på varje.

Varför blått och lila blandas så bra

Lila är blått med lite rött i. Gå från det ena till det andra och varje steg på vägen är en verklig, mättad färg: blått, indigo, violett. Jämför med att blanda blått med orange, där halvvägspunkten är ett platt grått. Analoga färger förklarar principen och färghjulet visar var varje färgton ligger.

Mörka blå lila gradienter: natt och djup

Börja mörkt så ser gradienten genast mindre generisk ut. En midnattsbotten med indigo och violett ljus känns som en natthimmel, en konsertsal eller en exklusiv app. De här fem bär ljus text vackert.

Mjuka blå lila gradienter: periwinkle och lavendel

Gör familjen ljusare så blir den lugn, drömsk och lite nostalgisk. De här passar välmående, sömn, brevpapper och allt som riktar sig till en mild stämning. Håll texten mörk, vitt försvinner på de flesta av dem. Fler finns i pastellgradienter.

Elektriska blå lila gradienter

Höj mättnaden så blir paret högljutt, syntetiskt och mycket digitalt. De här passar spel, musik, tekniklanseringar och allt nattligt. Använd dem i band eller som glöd i stället för över en hel affisch, och para dem med nästan svart så att de har något att lysa mot. Neongradienter har hela tekniken.

Blå lila gradienter med en tredje färg

Det snabbaste sättet att göra en blå lila gradient till din egen är en extra färg som används sparsamt. Rosa tar den mot skymning, turkos mot norrsken, guld mot lyx och persika mot en mjuk soluppgång.

När en blå lila gradient blir lerig

Blått till violett är säkert. Två närliggande övergångar är det inte. Cyan till rosa korsar en stor del av hjulet, och matta, gråaktiga blå till matta lila ger ett livlöst mittparti. I båda fallen är lösningen densamma: interpolera i OKLCH, som håller ljushet och mättnad jämn genom övergången. Leriga gradienter och gradientinterpolering går djupare.

/* Default sRGB blend: can dull in the middle */
.card--srgb {
  background: linear-gradient(90deg, #06b6d4, #ec4899);
}

/* OKLCH blend: stays bright, passes through violet */
.card--oklch {
  background: linear-gradient(90deg in oklch, #06b6d4, #ec4899);
}

/* A safe blue purple hero with a fallback */
.hero {
  background-color: #1e1b4b;
  background-image: linear-gradient(160deg in oklch, #0f0a2e, #4f46e5 60%, #7c3aed);
  color: #eef2ff;
}

Så får du en blå lila gradient att se mindre generisk ut

Diagonalen från violett till blått är så välbekant att folk läser den som en standard innan de läser något du skrivit på den. Du behöver inga exotiska färger för att undvika det. Små, medvetna beslut räcker, och de förstärker varandra.

• Välj en botten först. En midnatts- eller pappersbotten sätter stämningen mer än blått eller lila gör, och skiljer dig genast från den skrikiga standarden.
• Flytta ljuset från diagonalen. Lägg det ljusaste violetta i ett hörn med en radiell gradient i stället för att dra den från kant till kant i 135 grader.
• Använd ojämna stopp. Låt indigo hålla 60 procent av ytan och violett bara den sista biten. Lika tredjedelar ser maskingjorda ut.
• Lägg till en accent på ett ställe. En skärva rosa, turkos eller guld, som i uppsättningen ovan, minns man mycket bättre än grundfärgerna.
• Avsluta med korn. Ett fint brusskikt döljer ränder och förvandlar en skärmövergång till en yta. Korniga gradienter har koden.
• Rendera varje storlek för sig. Ljuset ska hamna på ett vettigt ställe på en story och på en banner, inte där en beskärning råkar lämna det.

Stämningsnamn hjälper också. ”Midnattsindigo med en guldkant” är ett beslut du kan upprepa under ett helt år av inlägg, ”blå lila gradient” är det inte.

Text på en blå lila gradient

När ord går från den mörka till den ljusa änden av samma gradient fungerar ingen enskild textfärg överallt. Text på gradient går igenom alternativen. I Gradiently hanterar Auto-färg det per rad och väljer ljus eller mörk text ur Markens egen palett, så en blå lila bakgrund aldrig sväljer en rubrik.