Mättnad i design: när du ska höja och sänka färgen

Mättnad i design är hur intensiv en färg är: helt mättad är livlig och ren, helt omättad är grå. Höj den där du vill ha uppmärksamhet och energi, på en knapp, ett reapris eller en enskild höjdpunkt. Sänk den för stora ytor, långläsning, exklusiva varumärken och mörka gränssnitt, där livliga färger snabbt blir tröttsamma. De flesta bra paletter blandar de två med avsikt: en lugn bas med lägre mättnad och en eller två mättade toner.

Vad mättnad är, och vad den inte är

Varje färg kan beskrivas med tre egenskaper: nyans (vilken färg det är), ljushet (hur nära vitt eller svart) och mättnad (hur ren eller gråad den är). Ändra bara mättnaden och ett körsbärsrött glider mot dammigt rosa, sedan mot grått, utan att bli ljusare eller mörkare. Nyans, mättnad och ljusstyrka förklarar hur de tre hänger ihop.

I HSL är mättnad det andra talet. I det nyare färgrummet oklch är motsvarigheten chroma, och den beter sig jämnare över nyanser, så att ett gult och ett blått med samma chroma ser lika intensiva ut. HSL-färger tar upp den äldre modellen och hur du läser dess siffror.

När du ska höja mättnaden

• Det enda man ska trycka på. En mättad knapp på en stilla sida behöver ingen pil som pekar på den. Det är jobbet för en accentfärg.
• Korta, högljudda ögonblick. Reameddelanden, lanseringsinlägg och nedräkningar till evenemang är till för att avbryta scrollandet.
• Unga, lekfulla eller sportiga varumärken. Barnprodukter, energidrycker och festivaler bär ofta hög mättnad som en del av sin personlighet.
• Data som måste sticka ut. I ett diagram, mätta den serie som är viktig och gråa resten.
• Små ytor på mörk bakgrund. En livlig färg på en liten yta mot nästan svart läses som ljus, vilket är varför neon fungerar på natten.

När du ska sänka mättnaden

• Stora ytor. En hel skärm med ren mättad färg är tröttsam. Bakgrunder fungerar oftast bättre lätt gråade.
• Exklusiv positionering. Dämpade, komplexa färger som oliv, oxblod och skiffer läses ofta som mer genomtänkta och dyra än primärfärger.
• Långläsning. Artiklar, dokument och instrumentpaneler behöver en lugn yta folk kan titta på en timme.
• Mörkt läge. Mättade färger glöder och smetar på mörka bakgrunder. Sänk mättnaden och höj ljusheten något; design för mörkt läge har detaljerna.
• Bakom fotografier och text. En stillsammare bakgrund låter fotot och orden leda.

Vibrationsproblemet

Lägg två starkt mättade komplementfärger sida vid sida, som rött på grönt eller blått på orange, och gränsen mellan dem verkar skimra. Det är en optisk effekt, och den gör text på de paren verkligt obekväm att läsa även när kontrastförhållandet ser acceptabelt ut. Lösningen är att avmätta den ena i paret, eller skilja dem åt med en neutral.

Så justerar du mättnad i CSS

Hex-koder döljer mättnad, vilket är varför det går långsamt att justera den med ögat i hex. Arbeta i HSL eller oklch i stället, eller blanda en färg med grått med color-mix().

:root {
  /* HSL: the second value is saturation */
  --brand: hsl(350 80% 48%);
  --brand-muted: hsl(350 35% 48%);

  /* oklch: the second value is chroma */
  --accent: oklch(0.65 0.2 30);
  --accent-soft: oklch(0.65 0.08 30);

  /* color-mix: blend towards a grey of similar lightness */
  --brand-quiet: color-mix(in oklch, var(--brand) 60%, #808080);
}

En användbar vana är att definiera varje varumärkesfärg i två mättnader från början: en full version för accenter och en dämpad version för stora fyllnader. Då behöver ingen improvisera en mjukare nyans senare.

Fotografier följer samma logik. Ett rörigt, mättat foto bakom en rubrik konkurrerar med den; dra ner fotots mättnad med en tredjedel eller så, så tar orden ledningen utan någon ruta eller skugga bakom. Åt andra hållet är ett enda mättat föremål i ett annars dämpat foto, en röd kappa på en grå gata, ett av de äldsta sätten att styra blicken.

Mättnad i tryck

Skärmar kan visa mer mättad färg än CMYK-bläck kan trycka, särskilt klara blå, gröna, orange och lila toner. En livlig skärmfärg trycks ofta märkbart mattare. Om mättnad är central för ditt varumärke, överväg ett Pantone-specialfärgbläck för tryck och kontrollera ett provtryck före en stor upplaga. RGB mot CMYK förklarar skillnaden.

Mättnad samverkar också med färgtemperatur: en varm dämpad palett känns vintage, en sval dämpad känns skandinavisk. För färdiga uppsättningar i varje ände av reglaget, se dämpade färgpaletter och klara färgpaletter.

Gradiently Marks tillämpar samma princip på en levande bakgrund: den lugnaste, bäst kontrasterande delen flyttar sig bakom texten och rörigare detaljer slappnar av där, så att orden ligger på en stillsammare fläck medan resten av Marken behåller sin färg.