# Lavendelgradient: mjuka lila koder [Canonical HTML page](https://gradiently.design/sv/guide/lavender-gradient) Lavendel är lila med ljudet nedskruvat: lugnt, lite drömskt, aldrig högljutt. Det svåra är att hålla den mjuk utan att den blir grå eller sockersöt. De här koderna klarar båda. ## The short version - En lavendelgradient blandar bleka, något blåaktiga lila, ofta med vitt, rosa, persika eller ett mjukt blått. - Lavendel blir grå när dess färgpunkter är för avmättade, och sockersöt när varje punkt är pastellrosa och violett. - En varm partner som persika eller smör, eller ett svalt grönt som salvia, ger lavendel karaktär. - Vit text läses inte på blek lavendel, men ett djupt plommon som #2e1065 gör det. - Lavendel passar välmående, sömn, bröllop, skönhet och lugna digitala produkter. En **lavendelgradient** blandar bleka, milt blåaktiga lila, oftast från nästan vitt till en len syrén eller blåklocka. Den känns lugn, lätt och lite drömsk, vilket är varför varumärken inom välmående, sömn, skönhet och bröllop älskar den. Två saker går fel med den: tar du bort för mycket färg blir den dammigt grå, och lägger du till för mycket rosa blir den sockersöt. Behåll en färgpunkt tydligt färgad, para den med en varm eller grön partner och sätt dina ord i djupt plommon. ## Lavendel, syren, blåklocka och malva Mjuka lila har flera namn, och vart och ett lutar åt sitt håll. Att veta vilket du vill ha gör blandningen lättare: lavendel och blåklocka lutar åt blått, syren och malva lutar åt rosa. - Lavendeldimma: #f5f3ff - Lavendel: #e6e0f8 - Mjuk violett: #ddd6fe - Syren: #c4b5fd - Blåklocka: #c7d2fe - Orkidé: #d8b4e2 - Malva: #b497bd - Plommonbläck: #2e1065 Familjen av mjuka lila och ett djupt plommon för text. Lavendel och blåklocka är svalare, orkidé och malva är varmare. ## Bleka lavendelgradienter Det här är de stilla, närmast vitt, för bakgrunder som bär mycket text: menyer till ett tehus, ett nyhetsbrev, en apps välkomstskärmar. De är knappt där, så använd dem där innehållet är poängen. - Lavendeldimma: `linear-gradient(180deg, #faf9ff 0%, #e6e0f8 100%)` - Mjuk violett: `linear-gradient(135deg, #f5f3ff 0%, #ddd6fe 100%)` - Blåklockslavering: `linear-gradient(135deg, #eef2ff 0%, #e6e0f8 50%, #f5f3ff 100%)` - Syrenljus: `radial-gradient(circle at 70% 25%, #ddd6fe 0%, #f5f3ff 55%, #ffffff 100%)` Lavendel nära vitt. Var och en behåller en färgpunkt med verklig färg så att den aldrig läses som grå. ## Gradienter i syren och blåklocka Ett steg djupare blir lavendel en tydlig färg snarare än en nyans. Syren till blåklocka ger en sval, modern blandning som ser bra ut på mobilskärmar. Syren till orkidé är varmare och mer romantisk. Håll båda ändarna på liknande ljushet så förblir övergången mjuk. - Syren till blåklocka: `linear-gradient(135deg, #c4b5fd 0%, #a5b4fc 100%)` - Syren till orkidé: `linear-gradient(135deg, #ddd6fe 0%, #d8b4e2 100%)` - Skymningssyren: `linear-gradient(160deg, #e0e7ff 0%, #c4b5fd 50%, #a78bfa 100%)` - Babyblått till syren: `linear-gradient(90deg, #bfdbfe 0%, #c4b5fd 100%)` Mellanlavendel. De blåaktiga känns digitala och lugna, de rosaaktiga känns romantiska. ## Lavendel med persika, smör eller salvia Ensam kan lavendel kännas för söt. En partner utanför den lila familjen löser det. Persika och smör ger värme och får lavendel att kännas som ljuset en tidig kväll. Salvia tillför något vuxet och botaniskt, vilket är varför lavendel och salvia är ett så populärt bröllopspar. I de här bleka nyanserna blandas motsatta färger utan att bli leriga, eftersom det finns lite mättnad att förlora. [Pastellgradienter](https://gradiently.design/sv/guide/pastel-gradients) tar upp den principen över hela färghjulet. - Lavendel och persika: `linear-gradient(135deg, #ddd6fe 0%, #fde2cf 100%)` - Lavendel och smör: `linear-gradient(135deg, #e6e0f8 0%, #fef3c7 100%)` - Lavendel och salvia: `linear-gradient(135deg, #e6e0f8 0%, #dbe5d4 100%)` - Kvällshimmel: `linear-gradient(180deg, #c7d2fe 0%, #ddd6fe 45%, #fbcfe8 100%)` Lavendel med en partner. Var och en känns mindre söt och mer som en verklig plats eller tid på dygnet. ## Dova lavendelgradienter Låter du lavendel gå ner mot violett eller plommon får du skymning: fortfarande mjuk överst, rik nederst. De fungerar för sömnappar, ljusvarumärken, kvällsyoga, parfym och bokhandlar. Den djupa änden ger också vit text en plats att vila på. För hela skalan av djärvare lila, se [lila gradienter](https://gradiently.design/sv/guide/purple-gradient). - Skymning: `linear-gradient(180deg, #e6e0f8 0%, #a78bfa 50%, #4c1d95 100%)` - Läggdags: `linear-gradient(180deg, #ddd6fe 0%, #8b5cf6 55%, #2e1065 100%)` - Malvaskymning: `radial-gradient(circle at 50% 20%, #ede9fe 0%, #b497bd 40%, #4a2e5c 100%)` Lavendel överst, plommon nederst. Lägg rubriker i den nedre halvan i vitt, eller i den övre halvan i plommon. ## Idéer med lavendelgradient att publicera den här veckan Lavendel väljs ofta för att den känns fin, och används sedan utan plan. Här är konkreta fall där den verkligen hjälper: - **En app för sömn eller meditation:** ”Läggdags” som bakgrund för välkomstskärmarna, plommontext överst, knappen i det djupa violetta området. - **En blomsterbutiks inlägg inför mors dag i 1080×1350:** ”Lavendel och persika” med en rad: ”Beställ senast torsdag.” - **En hudvårdslansering:** ”Lavendeldimma” bakom produktfoton, så att förpackningen bär färgen. - **En terapeuts eller coachs LinkedIn-banner i 1584×396:** ”Blåklockslavering” läses lugn och professionell utan kylan i företagsblått. - **En prislista för ett spa på en A4-affisch:** ”Lavendel och salvia” med aubergintext, läsbar från andra sidan receptionen. ## Undvik grå och sockersöt lavendel ### Blir grå eller sockersöt - Varje färgpunkt avmättad, som `#e2e0e6` - Lavendel bredvid kallgrått - Lavendel, babyrosa och violett på en gång - Vit text på en blek syren ### Förblir mjuk och tydlig - Minst en färgpunkt med tydlig färg, som `#c4b5fd` - Lavendel bredvid varmvitt eller grädde - En partner: persika, smör eller salvia - Djup plommontext över de bleka ytorna En användbar kontroll: lägg en ren grå provbit bredvid din lavendel. Om du har svårt att se skillnad med en blick, skruva upp färgen ett snäpp. Kontrollera också på en mobil med låg ljusstyrka, där mycket bleka nyanser lätt går förlorade. ## Text på en lavendelgradient Lavendel är mycket ljus, så vit text fungerar inte på nästan någon del av den: vitt på syren `#c4b5fd` mäter under 2 till 1. Djupt plommon `#2e1065` på samma syren mäter över 8 till 1, och det håller texten inom den lila familjen i stället för svartets skärpa. För ett mjukare uttryck på de blekaste lavendelnyanserna klarar en dämpad aubergine som `#3b2f4a` fortfarande kontrasten med råge. [Färgkontrast och tillgänglighet](https://gradiently.design/sv/guide/color-contrast-accessibility) har detaljerna. En save the date-inbjudan till bröllop med djup plommontext på en blek gradient i lavendel och persika En inbjudan i 5×7 tum vid 300 dpi, i blek lavendel med plommontext. Samma save the date-design som en hög mobilstory på lavendelgradienten Samma design som en story för att dela nyheten, renderad i sin egen storlek. Med Pro kan Gradiently föra den enda designen från tryck till varje storlek för sociala medier i ett steg: Marken renderas på nytt i varje format, och Auto-bläck väljer ljus eller mörk text per rad ur Markens egen palett. För mer om pappersvarorna, se [färgpaletter för bröllop](https://gradiently.design/sv/guide/wedding-color-palettes). ## CSS för lavendelgradient Som standard blandar webbläsare gradientfärger i sRGB, vilket kan dämpa mitten av en blandning mellan två nyanser. Att interpolera i OKLCH håller mittpunkten ren, och en hex-reserv täcker webbläsare utan stöd. Se [CSS-gradienter i OKLCH](https://gradiently.design/sv/guide/css-gradient-oklch) för stöd. ```css .card-lavender { background: linear-gradient(135deg, #f5f3ff, #ddd6fe, #fde2cf); color: #2e1065; } @supports (background: linear-gradient(in oklch, red, blue)) { .card-lavender { background: linear-gradient(in oklch 135deg, #f5f3ff, #ddd6fe, #fde2cf); } } ``` Lavendeldimma till mjuk violett till persika, med plommontext. OKLCH-versionen håller blandningen ljus genom mitten. ## FAQ ### Vad är hexkoden för lavendel? CSS-färgnamnet `lavender` är `#e6e6fa`, ett mycket blekt blåaktigt lila. Många designers använder något rikare versioner som `#e6e0f8` eller `#ddd6fe`. ### Vilka färger passar bra till en lavendelgradient? Persika, smörgult, salviagrönt, grädde och mjukt blått. Ett djupt plommon fungerar bra för text. ### Varför ser min lavendelgradient grå ut? Färgpunkterna är för avmättade eller ligger bredvid kallgrått. Ge minst en punkt tydlig färg och para den med varmvitt i stället för grått. ### Vad skiljer lavendel från syren? Lavendel lutar något åt blått och är oftast blekare. Syren lutar något åt rosa och är lite starkare. ### Vilken textfärg passar på lavendel? Djupt plommon eller aubergine, som `#2e1065`. Vit text klarar inte kontrasten på blek lavendel.