Pastellfärgpaletter: mjuka koder för milda varumärken

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.

Havsglas är sval och ren, passar välmående, hudvård och allt som ska kännas som frisk luft.

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.

Sorbet är den sötaste av de fem, varma rosa och aprikostoner för bagerier, nagelstudior och sommarkampanjer.

Pistage är fräsch och grön, naturlig utan att vara jordig. Den passar växtbutiker, kaféer och miljövarumärken.

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 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.

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.

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 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 löser det, så en enda formel ger dig en jämn pastell i varje nyans.

: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);
}

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.

Misstag som får pastellfärger att se billiga ut

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 koder, och den mjuka estetiken visar hur utseendet bärs genom ett helt flöde.

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.