Blå og lilla gradient: 20 koder som blander seg rent

En blå og lilla gradient går mellom nabofarger på fargesirkelen: blå #3b82f6, indigo #4f46e5, fiolett #7c3aed og de myke perivinkel- og lavendeltonene rundt dem. Fordi fargetonene ligger side om side, holder overgangen seg ren nesten automatisk. Det vanskelige er å lage en som ikke ser ut som de tusenvis av appikoner og konferanselysbilder som allerede bruker en. Nedenfor er tjue koder i fire stemninger, tilfellene der overgangen faktisk blir matt, og tekstfargene som kan leses på hver.

Hvorfor blått og lilla blander seg så godt

Lilla er blått med litt rødt i. Gå fra den ene til den andre, og hvert trinn imellom er en ekte, mettet farge: blå, indigo, fiolett. Sammenlign det med å blande blått inn i oransje, der midtpunktet er en flat grå. Analoge farger forklarer prinsippet, og fargesirkelen viser hvor hver fargetone ligger.

Mørke blå og lilla gradienter: natt og dybde

Start mørkt, så ser gradienten straks mindre generisk ut. En midnattsbunn med indigo og fiolett lys føles som en nattehimmel, en konsertsal eller en eksklusiv app. Disse fem bærer lys tekst vakkert.

Myke blå og lilla gradienter: perivinkel og lavendel

Gjør familien lysere, så blir den rolig, drømmende og litt nostalgisk. Disse passer velvære, søvn, papirvarer og alt som sikter mot en mild stemning. Hold teksten mørk; hvitt forsvinner på de fleste av dem. Det finnes flere i pastellgradienter.

Elektriske blå og lilla gradienter

Skru opp metningen, så blir paret høylytt, syntetisk og svært digitalt. Disse passer gaming, musikk, teknologilanseringer og alt som hører natten til. Bruk dem i bånd eller glød i stedet for over en hel plakat, og kombiner med nesten svart så de har noe å lyse mot. Neongradienter har hele teknikken.

Blå og lilla gradienter med en tredje farge

Den raskeste måten å gjøre en blå og lilla gradient til din egen på, er én ekstra farge brukt sparsomt. Rosa drar den mot skumring, blågrønn mot nordlys, gull mot luksus og fersken mot en myk soloppgang.

Når en blå og lilla gradient blir gjørmete

Blått til fiolett er trygt. To beslektede overganger er det ikke. Cyan inn i rosa krysser mye av sirkelen, og matte, gråaktige blåtoner inn i matte lillatoner gir en livløs midte. I begge tilfeller er løsningen den samme: interpoler i OKLCH, som holder lysstyrke og metning jevn gjennom overgangen. Gjørmete gradienter og interpolering i gradienter går dypere.

/* 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;
}

Slik får du en blå og lilla gradient til å se mindre generisk ut

Diagonalen fra fiolett til blått er så kjent at folk leser den som standard før de leser noe du har skrevet på den. Du trenger ikke eksotiske farger for å unngå det. Små, bevisste valg er nok, og de forsterker hverandre.

• Velg en bunn først. En midnatts- eller papirbunn setter stemningen mer enn det blå eller lilla gjør, og skiller deg straks fra den lyse standarden.
• Flytt lyset bort fra diagonalen. Legg den lyseste fioletten i ett hjørne med en radial gradient i stedet for å la den gå kant til kant i 135 grader.
• Bruk ujevne stopp. La indigo holde 60 prosent av flaten og fiolett bare den siste strekningen. Like tredjedeler ser maskinlagde ut.
• Legg til én aksent på ett sted. En stripe rosa, blågrønn eller gull, som i settet over, huskes langt bedre enn grunnfargene.
• Avslutt med korn. Et fint støylag skjuler striper og gjør en skjermovergang til en flate; kornete gradienter har koden.
• Tegn hver størrelse for seg. Lyset bør havne et fornuftig sted i en story og på et banner, ikke der en beskjæring tilfeldigvis etterlater det.

Navn på stemninger hjelper også. «Midnattsindigo med gullkant» er en beslutning du kan gjenta gjennom et helt år med innlegg; «blå og lilla gradient» er det ikke.

Tekst på en blå og lilla gradient

Når ord krysser fra den mørke til den lyse enden av samme gradient, fungerer ingen enkelt tekstfarge overalt. Tekst på en gradient dekker alternativene. I Gradiently håndterer automatisk tekstfarge dette per linje og velger lys eller mørk tekst fra Markens egen palett, så en blå og lilla bakgrunn aldri sluker en overskrift.