Lilla gradienter: paletter, koder og hvordan du bruker dem

En lilla gradient blander nyanser av fiolett, lilla, plomme eller lavendel, ofte med en nabofarge i blått eller rosa. Det er en av de mest populære gradientfargene for nettsteder, apper og innlegg i sosiale medier, fordi lilla føles fantasifull og litt luksuriøs, og den gløder vakkert på en mørk skjerm. Under finner du lilla gradientpaletter gruppert etter stemning, hver med CSS du kan kopiere, og deretter hvordan du setter tekst på dem og hindrer at de ser ut som alle andres.

Lillafamilien: fiolett, lilla, plomme og lavendel

«Lilla» dekker et bredt spenn. Fiolett heller mot blått og føles kjølig og elektrisk. Magenta heller mot rosa og føles varm og høylytt. Plomme er en dyp, rødlig lilla som føles fyldig, og lavendel er en blek, gråaktig lilla som føles myk. Når du vet hvilken du vil ha, blir alle andre valg enklere.

Hva en lilla gradient signaliserer

I store deler av Europa og Amerika forbindes lilla med kreativitet, fantasi og luksus. Koblingen til luksus er historisk: i århundrer var lilla fargestoff sjeldent og kostbart, så det ble båret av de mektige. De siste årene har det også blitt en av de vanligste fargene i merkevarer for programvare og teknologi, der den antyder noe oppfinnsomt uten alvoret til blått. Assosiasjonene er andre andre steder, og fargers betydning rundt om i verden har detaljene.

• Kreative verktøy og studioer: fiolett og magenta føles oppfinnsomme og litt lekne.
• Skjønnhet og velvære: lavendel og syrin føles mykt og gjenoppbyggende.
• Musikk, uteliv og gaming: dype lillatoner med en livlig glød føles som kveld.
• Premiumprodukter: plomme og nesten svart ametyst føles fyldig, særlig med et varmt høylys.

Prisen er at det er velkjent. Fordi så mange teknologimerker bruker en fiolett gradient, må din gjøre seg fortjent til forskjellen gjennom dybde, varme, materiale eller hvor konsekvent du bruker den.

Mørke lilla gradienter

Mørke lilla gradienter føles fyldige og nattlige. De fungerer for musikk, uteliv, premiumprodukter og alt som skal føles som kveld. Hold det mørkeste stoppet nær svart, og la én opplyst farge stige opp fra det.

Lyse lilla gradienter og pasteller

Bleke lillatoner føles rolige, milde og litt drømmende. De passer til velvære, skjønnhet, papirvarer og alt som skal føles mykt. De trenger mørk tekst, og de ser best ut med et hint av varme eller blått, så de ikke leses som flat grålilla.

Livlige lilla gradienter

Livlige lillatoner er de mest høylytte og de vanligste. Bruk dem til lanseringer, gaming, arrangementer og dristige merkevarer, og hold dem unna lang lesing. Når du blander lilla mot rosa eller oransje, holder midten seg klar. Blander du mot grønt, blir den grå.

Tekst på lilla gradienter

Lilla er lett å bomme på når det gjelder tekst, fordi mellomlilla ligger på et vanskelig sted: for lyst for hvit skrift, for mørkt og mettet til at svart føles rolig. Velg blekket etter hvor teksten faktisk står.

På en gradient sjekker du det lyseste punktet bak hvit tekst og det mørkeste punktet bak mørk tekst. Tekst på en gradient tar for seg plassering, og fargekontrast forklarer forholdstallene.

Slik unngår du at en lilla gradient ser generisk ut

Fiolett til rosa i 135 grader er en av de mest brukte gradientene som finnes. Den er pen, og den sier ikke lenger noe om hvem som bruker den. Fire små endringer hjelper.

• Gjør den dypere. Start fra nesten svart lilla i stedet for en mellomfiolett. Dybde leses som premium.
• Varm den opp. Legg til et høylys i fersken, aprikos eller gull i den ene enden. Lilla med varmt lys føles som skumring, ikke som programvare.
• Endre formen. En lav radial glød eller et loddrett fall føles mer som lys enn en diagonal fylling. Se radiale gradienter.
• Legg til et materiale. Fint korn eller en myk glans gjør en flat overgang til en overflate. Se kornete 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%);
}

Hvis lilla er merkevarefargen din, betyr konsekvens mer enn den nøyaktige blandingen. Merkevarebygging med gradienter tar for seg hvordan du gjør én lilla til din. Du kan også søke i Markedet til Gradiently etter «deep violet» eller «lavender» for å se levende lilla Marks.