Kortversionen
- 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.
På den här sidan
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.
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.
| 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 |
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.
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 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.
.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 */
}Håll pastellpar nära varandra i nyans för renaste resultat, som i tvåfärgsgradienter. 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
Ett pastellfält med mörkt bläck läses som lugnt och tryggt i flödesstorlek.
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 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.
Vanliga frågor
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.
Skriven av Gradiently
Teamet bakom Gradiently, ett designverktyg byggt kring Marks: levande gradienter som får allt du gör att kännas som ditt.
Se vår profil
