Blå lilla gradient: 20 koder, der blander rent

En blå lilla gradient løber mellem nabofarver på farvehjulet: blå #3b82f6, indigo #4f46e5, violet #7c3aed og de bløde lavendelblå og syren toner omkring dem. Fordi farverne ligger side om side, forbliver overgangen næsten automatisk ren. Det sværere er at lave en, der ikke ligner de tusindvis af app-ikoner og konferenceslides, der allerede bruger en. Herunder er tyve koder i fire stemninger, de tilfælde, hvor overgangen bliver kedelig, og de tekstfarver, der læses på hver.

Hvorfor blå og lilla blander så godt

Lilla er blå med lidt rød i. Gå fra den ene til den anden, og hvert trin imellem er en ægte, mættet farve: blå, indigo, violet. Sammenlign med at blande blå ind i orange, hvor midtpunktet er et fladt gråt. Analoge farver forklarer princippet, og farvehjulet viser, hvor hver farve sidder.

Mørke blå lilla gradienter: nat og dybde

Start mørkt, og gradienten ser straks mindre generisk ud. En midnatsbund med indigo og violet lys føles som en nattehimmel, en koncertsal eller en eksklusiv app. De fem her bærer lys tekst smukt.

Bløde blå lilla gradienter: lavendelblå og syren

Gør familien lysere, og den bliver rolig, drømmende og en smule nostalgisk. De passer til wellness, søvn, papirvarer og alt, der sigter mod en blid stemning. Hold blækket mørkt; hvid forsvinder på de fleste af dem. Der er flere i pastelgradienter.

Elektriske blå lilla gradienter

Skru op for mætningen, og parret bliver højt, syntetisk og meget digitalt. De passer til gaming, musik, tech-lanceringer og alt, der hører natten til. Brug dem i bånd eller skær frem for over en hel plakat, og par dem med næsten sort, så de har noget at gløde mod. Neongradienter har hele teknikken.

Blå lilla gradienter med en tredje farve

Den hurtigste måde at gøre en blå lilla gradient til din egen er én ekstra farve brugt sparsomt. Pink fører den mod skumring, turkis mod nordlys, guld mod luksus og fersken mod en blød solopgang.

Når en blå lilla gradient bliver mudret

Blå til violet er sikkert. To beslægtede overgange er ikke. Cyan til pink krydser store dele af hjulet, og kedelige, grålige blå til kedelige lilla giver en livløs midte. I begge tilfælde er løsningen den samme: interpolér i OKLCH, som holder lysstyrke og mætning jævn hen over overgangen. Mudrede gradienter og gradientinterpolation går dybere.

/* 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ådan får du en blå lilla gradient til at virke mindre generisk

Diagonalen fra violet til blå er så velkendt, at folk læser den som en standard, før de læser noget af det, du har skrevet på den. Du behøver ikke eksotiske farver for at undgå det. Små, bevidste beslutninger er nok, og de lægger sig oven på hinanden.

• Vælg en bund først. En midnats- eller papirbund sætter stemningen mere end den blå eller lilla gør og adskiller dig straks fra den skarpe standard.
• Flyt lyset væk fra diagonalen. Læg den lyseste violet i ét hjørne med en radial gradient i stedet for at køre den kant til kant i 135 grader.
• Brug ujævne stop. Lad indigo holde 60 procent af fladen og violet kun det sidste stykke. Lige store tredjedele ser maskinlavede ud.
• Tilføj én accent ét sted. En stribe pink, turkis eller guld, som i sættet ovenfor, huskes langt mere end grundfarverne.
• Afslut med korn. Et fint støjlag skjuler striber og forvandler en skærmovergang til en overflade; kornede gradienter har koden.
• Gengiv hver størrelse for sig. Lyset skal lande et fornuftigt sted på en story og på et banner, ikke hvor en beskæring nu lader det ligge.

Stemningsnavne hjælper også. "Midnatsindigo med en guldkant" er en beslutning, du kan gentage over et helt års opslag; "blå lilla gradient" er ikke.

Tekst på en blå lilla gradient

Når ord krydser fra den mørke ende til den lyse ende af samme gradient, virker intet enkelt blæk overalt. Tekst på en gradient gennemgår mulighederne. I Gradiently håndterer Automatisk tekstfarve det pr. linje og vælger lys eller mørk skrift fra Mark’ens egen palet, så en blå lilla baggrund aldrig sluger en overskrift.