# Pastellgradienter som förblir friska, inte sockersöta [Canonical HTML page](https://gradiently.design/sv/guide/pastel-gradients) Pasteller är de gradienter som är lättast att gilla och lättast att överdriva. Några regler får dem att kännas som vårljus på papper i stället för en prinsesstårta. ## The short version - En pastellgradient blandar bleka färger med hög ljushet och mild mättnad, som puder, smörgult, lila och mint. - Vit text fungerar nästan aldrig på pastellgradienter; ett mörkt bläck i en djup närliggande nyans är mycket lättare att läsa. - Pastellgradienter blir sockersöta när alla färger är lika söta och mättade, och friska när en färg är dammigare, djupare eller oväntad. - En off-white pappersbotten under pastellfärgen får den att kännas tryckt och lugn i stället för digital. - OKLCH gör även pasteller enkla: håll ljushet och kroma fasta och ändra bara nyansen. En **pastellgradient** är en övergång mellan bleka, milt färgade toner: puderrosa in i smörgult, lila in i himmelsblått, mint in i grädde. Pasteller har hög ljushet och bara lite mättnad, och därför känns de milda, friska och vänliga. Haken är att de också lätt blir för söta och att det nästan är omöjligt att läsa vit text på dem. Båda går att lösa med ett mörkt bläck, en pappersbotten och en färg som är lite mindre självklar än resten. ## Vad som gör en färg till en pastell En pastell är en färg med mycket vitt i: hög ljushet, låg till måttlig mättnad. I färgrymden OKLCH ligger de flesta pasteller kring 0,88 till 0,95 i ljushet med en liten kroma. Det ger ett enkelt knep för att göra jämna pastellgradienter: lås ljusheten och kroman och ändra bara nyansen. Då bär varje färg samma visuella tyngd, och ingen skriker. - Pastellspektrum i OKLCH: `linear-gradient(90deg in oklch, oklch(0.9 0.07 20), oklch(0.9 0.07 140), oklch(0.9 0.07 260))` - Puderrosa och smörgult: `linear-gradient(135deg, #fecdd3 0%, #fef3c7 100%)` - Blåregn: `linear-gradient(135deg, #e9d5ff 0%, #bfdbfe 100%)` - Pistagegrädde: `linear-gradient(135deg, #f7fee7 0%, #d9f99d 100%)` - Himmel och mint: `linear-gradient(135deg, #e0f2fe 0%, #d1fae5 100%)` - Blåklockedis: `linear-gradient(135deg, #e0e7ff 0%, #fbcfe8 100%)` - Dammig ros och salvia: `linear-gradient(135deg, #f3d9d5 0%, #d5e3d0 100%)` - Havsskum: `linear-gradient(135deg, #ccfbf1 0%, #a5f3fc 100%)` - Aprikosrodnad: `linear-gradient(135deg, #ffedd5 0%, #fecaca 100%)` Pastellpar med koder du kan kopiera. Den första är byggd i OKLCH med fast ljushet och kroma, så dess tre nyanser känns lika mjuka. ## Frisk eller sockersöt: skillnaden Pasteller tippar över till sockersött när allt är lika sött: rosa, babyblått och lila i samma mättnad, vit text, allt rundat. De känns friska när något i designen står emot. Det kan vara en dammigare, gråare färg, ett djupt bläck för orden, en off-white pappersbotten eller ett skarpt, allvarligt typsnitt. ### Sockersött - Rosa, babyblått och lila i samma styrka - Vit text på en blek bakgrund - Rent vit botten, helt slät - Allt rundat och bubbligt ### Friskt - En dammig eller oväntad färg, som salvia eller aprikos - Ett djupt bläck från en närliggande nyans - En off-white pappersbotten med lätt korn - En trygg serif eller en tät sans för orden ## Para pasteller med ett mörkt bläck Vit text på en pastell klarar nästan alltid inte kontrastkravet, eftersom båda är mycket ljusa. Lösningen är ett mörkt bläck: en djup version av en av gradientens egna nyanser, som indigo på lila eller vinrött på puderrosa. Det håller paletten i en familj och läses bekvämt. Här är uppmätta förhållanden för vanliga bläckfärger på pastellbottnar. För reglerna bakom dem, se [färgkontrast och tillgänglighet](https://gradiently.design/sv/guide/color-contrast-accessibility). | Textfärg | På puderrosa `#fbcfe8` | På lila `#c4b5fd` | | --- | --- | --- | | `#ffffff` vit | 1,4:1, underkänt | 1,9:1, underkänt | | `#6b7280` mellangrå | 3,5:1, bara stor text | 2,6:1, underkänt | | `#9d174d` vinrött | 5,7:1, klarar AA | 4,3:1, bara stor text | | `#312e81` indigo | 8,3:1, klarar AAA | 6,2:1, klarar AA | | `#1f2937` bläck | 10,6:1, klarar AAA | 8,0:1, klarar AAA | Kontrastförhållanden enligt WCAG 2. Brödtext kräver minst 4,5:1, stor text minst 3:1. Ju djupare pastellen är, desto mörkare måste bläcket vara. - Papper: #f8f1ea - Puderrosa: #fbcfe8 - Lila: #e9d5ff - Salvia: #d5e3d0 - Smörgult: #fde68a - Indigobläck: #312e81 Ett komplett pastellsystem: en pappersbotten, tre pasteller, en varm accent och ett mörkt bläck för varje ord. ## Använd en pappersbotten Pasteller på rent vitt kan se urblekta ut, och på skärmar är rent vitt det ljusaste som finns. En varm off-white botten, som `#f8f1ea`, får pastellfärger att se avsiktliga ut, som akvarell eller riso-färg på papper. Låt pastellen blomma fram från ett hörn och tona ut i papperet i stället för att fylla hela ytan. - Puderrosa blomning på papper: `radial-gradient(circle at 20% 20%, #fbcfe8 0%, #f8f1ea 55%)` - Salviablomning på papper: `radial-gradient(circle at 85% 80%, #d5e3d0 0%, #f8f1ea 60%)` - Lila ovanifrån: `radial-gradient(ellipse at 50% 0%, #e9d5ff 0%, #f8f1ea 65%)` Pastellblomningar på en pappersbotten. Det mesta av ytan förblir papper, och det är det som håller dem lugna. Ett lätt korn driver pappersintrycket längre. Håll det mycket diskret på pasteller, eftersom brus syns lätt på ljusa färger; [korniga gradienter](https://gradiently.design/sv/guide/grainy-gradients) har mängder att utgå från. ## En pastellgradient i CSS I CSS hänger pappersbotten, blomningen och bläcket ihop på några rader. Att blanda pasteller i OKLCH hindrar mitten från att bli kritig när nyanserna ligger långt ifrån varandra, och en färgtipp låter papperet ta det mesta av ytan. ```css .pastel { background-color: #f8f1ea; /* paper */ background-image: radial-gradient(circle at 15% 10%, #fbcfe8 0%, transparent 45%), radial-gradient(circle at 90% 85%, #d5e3d0 0%, transparent 50%), linear-gradient(160deg in oklch, #f8f1ea, 60%, #e9d5ff); color: #312e81; /* indigo ink */ } ``` Blomningar i puderrosa och salvia över en toning från papper till lila, med indigobläck för orden. Håll pastellpar nära varandra i nyans för renaste resultat, som i [tvåfärgsgradienter](https://gradiently.design/sv/guide/two-color-gradients). När du ändå vill ha avlägsna pasteller ihop, led dem via ett blekt lila eller smörgult så att mitten förblir färgad i stället för att bli vitgrå. ## Där pastellgradienter fungerar - Skönhet, hudvård, välmående och doft - Baby, bröllop, brevpapper och presenter - Vår- och påskkampanjer, bagerier och caféer - Lugn introduktion i programvara och hjälpsidor - Mjuka, drömska estetiker, särskilt med holografisk glans; se [holografiska gradienter](https://gradiently.design/sv/guide/holographic-gradients) Ett stående reainlägg med titeln Vårens urval på en mjuk pastellgradient med mörk text Ett pastellfält med mörkt bläck läses som lugnt och tryggt i flödesstorlek. En stående storyversion av samma pastelldesign för rea Samma look som en story, med färgen som blommar fram från toppen. Om du gillar mjukheten men vill ha mer kontrast, ta ett steg mot [estetiska bakgrunder](https://gradiently.design/sv/guide/aesthetic-backgrounds) med en djupare accent. Du kan också söka på Marknaden efter ord som ”mjuk lila” eller ”blek persika” för att hitta pastell-Marks och designa med dem direkt. ## FAQ ### Vad är en pastellgradient? En pastellgradient är en övergång mellan bleka, milt mättade färger som puderrosa, lila, smörgult och mint. ### Vilken textfärg passar på en pastellgradient? Ett mörkt bläck, helst en djup version av en av gradientens nyanser, som indigo eller vinrött. Vit text klarar oftast inte kontrastkravet på pasteller. ### Hur får jag färgerna i en pastellgradient att kännas jämna? Bygg dem i OKLCH med samma ljushet och kroma och ändra bara nyansen, så att varje färg bär samma tyngd. ### Hur hindrar jag en pastellgradient från att bli för söt? Lägg till en dammig eller oväntad färg, använd ett mörkt bläck för texten, sätt den på en off-white pappersbotten och para den med en trygg typografi. ### Vilken bakgrundsfärg passar till pasteller? En varm off-white som `#f8f1ea` får pasteller att se tryckta och lugna ut; rent vitt kan få dem att se urblekta ut.