Lila gradienter: paletter, koder och hur du använder dem

En lila gradient blandar nyanser av violett, lila, plommon eller lavendel, ofta med en angränsande blå eller rosa. Det är en av de populäraste gradientfärgerna för webbplatser, appar och inlägg i sociala medier, eftersom lila känns fantasifull och lite lyxig, och glöder vackert på en mörk skärm. Här nedan finns lila gradientpaletter grupperade efter stämning, var och en med CSS att kopiera, följt av hur du lägger text på dem och hur du hindrar dem från att se ut som alla andras.

Den lila familjen: violett, lila, plommon och lavendel

”Lila” täcker ett brett spann. Violett drar åt blått och känns kyligt och elektriskt. Magenta drar åt rosa och känns varmt och högljutt. Plommon är ett djupt, rödaktigt lila som känns rikt, och lavendel är ett blekt, gråaktigt lila som känns mjukt. Att veta vilken du vill ha gör varje annat val enklare.

Vad en lila gradient signalerar

I stora delar av Europa och Amerika förknippas lila med kreativitet, fantasi och lyx. Lyxkopplingen är historisk: i århundraden var lila färgämne sällsynt och dyrt, så det bars av de mäktiga. På senare år har det också blivit en av de vanligaste färgerna i varumärken för programvara och teknik, där det antyder något uppfinningsrikt utan blåfärgens allvar. Associationerna skiljer sig på andra håll. Färgers betydelse runt om i världen har detaljerna.

• Kreativa verktyg och studior: violett och magenta känns uppfinningsrika och lite lekfulla.
• Skönhet och välmående: lavendel och syrén känns mjuka och återhämtande.
• Musik, nattliv och spel: djupa lila toner med ett starkt sken känns som kväll.
• Exklusiva produkter: plommon och nästan svart ametist känns rika, särskilt med en varm högdager.

Priset är det välbekanta. Eftersom så många teknikvarumärken använder en violett gradient måste din förtjäna sin särart genom djup, värme, material eller hur konsekvent du använder den.

Mörka lila gradienter

Mörka lila gradienter känns rika och nattliga. De fungerar för musik, nattliv, exklusiva produkter och allt som ska kännas som kväll. Håll det mörkaste steget nära svart och låt en enda upplyst färg stiga ur det.

Ljusa och pastelliga lila gradienter

Bleka lila toner känns lugna, milda och lite drömska. De passar välmående, skönhet, pappersvaror och allt som ska kännas mjukt. De behöver mörk text och ser bäst ut med en antydan av värme eller blått, så att de inte läses som platt gråsyrén.

Starka lila gradienter

Starka lila toner är de högljuddaste och vanligaste. Använd dem till lanseringar, spel, evenemang och djärva varumärken, och håll dem borta från långläsning. En övergång från lila mot rosa eller orange håller mitten klar, medan en övergång mot grönt blir grå.

Text på lila gradienter

Lila är lätt att göra fel med för text, eftersom mellanlila ligger på ett obekvämt ställe: för ljusa för vit text, för mörka och mättade för att svart ska kännas lugnt. Välj textfärg efter var texten faktiskt ligger.

På en gradient kontrollerar du den ljusaste punkten bakom vit text och den mörkaste punkten bakom mörk text. Text på en gradient går igenom placering, och färgkontrast förklarar förhållandena.

Så hindrar du en lila gradient från att se generisk ut

Violett till rosa i 135 grader är en av de mest använda gradienterna överhuvudtaget. Den är attraktiv, och den säger inte längre något om vem som använder den. Fyra små förändringar hjälper.

• Fördjupa den. Börja från nästan svart lila i stället för en mellanviolett. Djup läses som exklusivt.
• Värm den. Lägg till en persika-, aprikos- eller guldhögdager i ena änden. Lila med varmt ljus känns som skymning snarare än programvara.
• Ändra formen. Ett lågt radiellt sken eller ett vertikalt fall känns mer som ljus än en diagonal fyllning. Se radiella gradienter.
• Lägg till ett material. Fint korn eller ett mjukt skimmer gör en platt övergång till en yta. Se korniga gradienter.

.hero {
  background-color: #1a0b2e;
  background-image:
    radial-gradient(circle at 75% 110%, #fdba74 0%, transparent 35%),
    linear-gradient(in oklch 170deg, #0f0a1f 0%, #3b1a6e 55%, #7c3aed 100%);
}

Om lila är din varumärkesfärg spelar konsekvens större roll än den exakta övergången. Gradient som varumärke går igenom hur du gör ett lila till ditt. Du kan också söka i Gradientlys Marknad efter ”djup violett” eller ”lavendel” för att se levande lila Marks.