# Pastellfärgpaletter: mjuka koder för milda varumärken [Canonical HTML page](https://gradiently.design/sv/guide/pastel-color-palettes) Pastellfärger är lätta att älska och svåra att använda: de kan inte bära text själva. Varje palett här kommer med de två extra färgerna som får den att fungera. ## The short version - En pastellfärgpalett består av ljusa färger med mild mättnad, vanligen över 85 % ljushet i HSL. - Pastellfärger är för ljusa för att användas som text på vitt, så en pastellpalett behöver en mörk textfärg för ord. - De flesta pastellvarumärken behöver också en djupare ankarfärg, stark nog att bära vit text på knappar och etiketter. - Pastellfärger ser mest sammanhållna ut när de delar samma ljushet och främst skiljer sig i nyans. - En varm off-white botten passar pastellfärger bättre än ren vit, som kan få dem att se urvattnade ut. En **pastellfärgpalett** är en uppsättning bleka, mjukt mättade färger: persika, smör, salvia, puderblått, lila. De känns milda, fräscha och vänliga, vilket är varför bagerier, hudvård, babyvarumärken och bröllopspapperier väljer dem. Haken är att ingen pastell är mörk nog för text. Varje palett nedan kombinerar därför tre pastellfärger med två arbetsfärger: en mörk **textfärg** för ord och en djupare **ankarfärg** för knappar och accenter. Koderna är redo att kopiera och kontrasten är redan kontrollerad. ## Fem pastellfärgpaletter med hexkoder **Persika och salvia** är varm, naturlig och lugn, ett starkt val för mat, keramik och varumärken inom långsamt liv. Ankarfärgen terrakotta hindrar den från att kännas sockrig. - Persika #f9d5c7: #f9d5c7 - Smör #fbe7b5: #fbe7b5 - Salvia #cfe3d1: #cfe3d1 - Terrakotta #ad5a45: #ad5a45 - Kakaosvart #3a2e2a: #3a2e2a Kakaosvart på persika är 9,6:1. Vitt på terrakotta är 4,9:1, nog för knapptexter. **Havsglas** är sval och ren, passar välmående, hudvård och allt som ska kännas som frisk luft. - Havsglas #c9e9e4: #c9e9e4 - Puderblått #c9dff2: #c9dff2 - Dimma #e3f1ec: #e3f1ec - Djup lagun #3f7f86: #3f7f86 - Skifferblått #2f3a4a: #2f3a4a Skifferblått på havsglas är 8,9:1. Vitt på djup lagun är 4,6:1. **Lavendel och citron** sätter två nästan motsatta färger tillsammans i samma mjuka ljushet, vilket håller den glad utan att den skär sig. Bra för pappersvaror, blomsterbutiker och barnböcker. - Lavendel #ddd3f2: #ddd3f2 - Citron #fbf0b5: #fbf0b5 - Rodnad #f6cfdc: #f6cfdc - Violett #7a5ba8: #7a5ba8 - Plommonsvart #3b2f48: #3b2f48 Plommonsvart på lavendel är 8,7:1 och på citron 10,8:1. Vitt på violett är 5,4:1. **Sorbet** är den sötaste av de fem, varma rosa och aprikostoner för bagerier, nagelstudior och sommarkampanjer. - Jordgubb #f6cfdc: #f6cfdc - Aprikos #fcd9b8: #fcd9b8 - Vanilj #fbe7b5: #fbe7b5 - Hallon #b54f6e: #b54f6e - Bärsvart #4a2e37: #4a2e37 Bärsvart på jordgubb är 8,6:1. Vitt på hallon är 4,9:1. **Pistage** är fräsch och grön, naturlig utan att vara jordig. Den passar växtbutiker, kaféer och miljövarumärken. - Pistage #d9e8c4: #d9e8c4 - Blekselleri #eef3d9: #eef3d9 - Persika #f9d5c7: #f9d5c7 - Löv #4f7a3f: #4f7a3f - Mossvart #2e3b33: #2e3b33 Mossvart på pistage är 9,1:1. Vitt på löv är 5:1. Persikan är en liten varm accent. För att välja mellan dem, börja med temperaturen. Varma pastellfärger (persika, aprikos, smör) känns hemtrevliga och ätbara; svala pastellfärger (havsglas, puderblått, lavendel) känns rena och luftiga. Titta sedan på din ankarfärg, eftersom den kommer att synas på varje knapp och prislapp och är färgen folk kommer ihåg. Om ingen av dessa ankarfärger passar dig, behåll pastellfärgerna och byt in din egen varumärkesfärg, mörkad tills vit text på den klarar 4,5:1. Behöver du mer återhållsamhet än pastellfärger tillåter? [Dämpade färgpaletter](https://gradiently.design/sv/guide/muted-color-palettes) ligger ett steg gråare. ## Därför behöver pastellfärger en textfärg och en ankarfärg Varje pastellfärg ovan har ett kontrastförhållande mellan ungefär 1,1:1 och 1,4:1 mot vitt. Det är långt under de 4,5:1 som brödtext kräver, vilket betyder att pastellfärgade ord på en vit sida helt enkelt är oläsliga för många. Pastellknappar med vita etiketter faller lika illa. Textfärgen och ankarfärgen löser båda problemen och håller ändå paletten mjuk i helhet. | Användning | Färg att välja | Varför | | --- | --- | --- | | Sid- och sektionsbakgrunder | En pastell, eller en varm off-white | Stora mjuka ytor sätter stämningen | | Rubriker och brödtext | Textfärgen | Mörk nog för 8:1 eller mer på varje pastell | | Knappar och etiketter | Ankarfärgen, med vit text | Klarar 4,5:1 och ger ögat en brännpunkt | | Illustrationer och former | Valfri pastell, plus ankarfärgen sparsamt | Variation utan brus | | Text på foton | Textfärgen på en pastellpanel, eller vitt på ett mörkt fotoområde | Pastellfärger försvinner över stökiga bilder | En enkel uppgiftslista för varje pastellpalett. Kontrollera dina egna par med en kontrastkontroll innan du publicerar. Välj en textfärg som lutar åt en av dina pastellfärger i stället för en platt grå: kakao för varma paletter, skiffer eller plommon för svala. En tonad textfärg får hela paletten att se designad ut. Reglerna bakom talen finns i [färgkontrast och tillgänglighet](https://gradiently.design/sv/guide/color-contrast-accessibility). ## Så gör du vilken färg som helst till en pastell En pastell är vilken nyans som helst med hög ljushet och måttlig mättnad. I [HSL](https://gradiently.design/sv/guide/hsl-colors) siktar du på 85 % till 92 % ljushet och 40 % till 80 % mättnad. Problemet med HSL är att gult och blått med samma tal ser mycket olika ljusa ut. [OKLCH](https://gradiently.design/sv/guide/oklch-explained) löser det, så en enda formel ger dig en jämn pastell i varje nyans. ```css :root { /* lightness 90%, gentle chroma, any hue */ --pastel-peach: oklch(90% 0.06 60); --pastel-lemon: oklch(90% 0.06 100); --pastel-mint: oklch(90% 0.06 150); --pastel-aqua: oklch(90% 0.06 200); --pastel-pink: oklch(90% 0.06 340); /* the ink: same idea, very dark */ --ink: oklch(30% 0.03 40); } ``` Ändra bara nyansen så behåller varje pastell samma visuella tyngd. Håll kromat kring 0,04 till 0,07; högre börjar se ut som godis. Samma metod gör din varumärkesfärg till sin egen pastell: behåll nyansen, höj ljusheten, sänk mättnaden. Det ger dig en mjuk bakgrundsfärg som omisskännligt är din. För teorin om ljusare toner, se [nyanser, toner och skuggor](https://gradiently.design/sv/guide/tints-tones-shades). ## Misstag som får pastellfärger att se billiga ut ### Undvik - Pastellfärgad text på vitt eller på en annan pastell - Sex pastellfärger på en gång utan någon mörk färg - Pastellfärger med olika ljushet, så att en ser smutsig ut - Rent vita bottnar som urvattnar pastellfärger - Tunna skrivstilstypsnitt i bleka färger ### Gör så här - Mörk, tonad textfärg för varje ord - Tre pastellfärger plus en ankarfärg och en textfärg - Pastellfärger med matchande ljushet - En varm off-white som #fdf8f2 - Solida vikter med tydliga bokstavsformer ## Pastellpaletter i ett riktigt inlägg Så här ser idén ut i bruk: mjuk bakgrund, mörk textfärg, en ankarfärg använd en gång. Vill du ha pastellfärger som flödande bakgrunder i stället för platta block har [pastellgradienter](https://gradiently.design/sv/guide/pastel-gradients) koder, och den [mjuka estetiken](https://gradiently.design/sv/guide/soft-aesthetic) visar hur utseendet bärs genom ett helt flöde. Ett mjukt pastellfärgat Instagraminlägg för ett bageri som meddelar att citrontårtan är tillbaka i helgen En mjuk bakgrund med mörk, självsäker text. Pastellen sätter stämningen; textfärgen för ordet. Bleka bakgrunder är där läsbarheten oftast brister, och Gradiently tar hand om det åt dig. En Marks automatiska textfärg väljer ljus eller mörk text för varje rad utifrån dess egen palett, så ord på en mjuk pastell-Mark förblir mörka nog att läsa utan att du kontrollerar varje par. ## FAQ ### Vilka färger ingår i en pastellfärgpalett? Bleka, mjukt mättade versioner av vilken nyans som helst: persika, smörgult, salvia, mynta, puderblått, lavendel och rodnad är de vanligaste. ### Vilken är hexkoden för pastellrosa? Det finns ingen enskild kod, men #f6cfdc är en balanserad pastellrosa. Para den med en mörk textfärg som #4a2e37 för text. ### Vilken textfärg passar till pastellfärger? En mörk, lätt tonad färg som kakao #3a2e2a, skiffer #2f3a4a eller plommon #3b2f48, som ger ungefär 8:1 till 10:1 på typiska pastellfärger. ### Är pastellfärger tillgängliga? Som bakgrunder, ja. Som text eller som knappfärg bakom vit text, nej: pastellfärger är för ljusa. Använd en mörk textfärg för ord och en djupare ankarfärg för knappar. ### Hur gör jag en färg pastell? Höj dess ljushet till cirka 85 % till 92 % och håll mättnaden måttlig. I CSS ger `oklch(90% 0.06 H)` en jämn pastell för vilken nyans H som helst.