Mætning i design: hvornår du skruer farven op eller ned

Mætning i design er, hvor intens en farve er: fuldt mættet er kraftig og ren, fuldt afmættet er grå. Skru op, hvor du vil have opmærksomhed og energi, på en knap, en udsalgspris eller en enkelt fremhævning. Skru ned til store flader, lang læsning, eksklusive brands og mørke grænseflader, hvor kraftig farve hurtigt bliver trættende. De fleste gode paletter blander de to med vilje: en rolig base med lavere mætning og en eller to mættede toner.

Hvad mætning er, og hvad den ikke er

Enhver farve kan beskrives ved tre egenskaber: nuance (hvilken farve den er), lyshed (hvor tæt på hvid eller sort) og mætning (hvor ren eller gråtonet den er). Ændr kun mætningen, og en kirsebærrød glider mod støvet rosa, så til grå, uden at blive lysere eller mørkere. Nuance, mætning og lysstyrke forklarer, hvordan de tre hænger sammen.

I HSL er mætning det andet tal. I det nyere farverum oklch er det tilsvarende chroma, og det opfører sig mere jævnt på tværs af nuancer, så en gul og en blå med samme chroma ser lige intense ud. HSL-farver dækker den ældre model og hvordan du læser dens tal.

Hvornår du skruer mætningen op

• Den ene ting, der skal trykkes på. En mættet knap på en rolig side behøver ingen pil, der peger på den. Det er opgaven for en accentfarve.
• Korte, højlydte øjeblikke. Udsalgsannonceringer, lanceringsopslag og nedtællinger til events er beregnet til at afbryde et scroll.
• Unge, legende eller sportslige brands. Børneprodukter, energidrikke og festivaler bærer ofte høj mætning som en del af deres personlighed.
• Data, der skal skille sig ud. I et diagram mætter du den serie, der betyder noget, og gør resten grå.
• Små områder på mørk baggrund. En kraftig farve i et lille område på næsten sort læses som lys, og derfor virker neon om natten.

Hvornår du skruer mætningen ned

• Store flader. En hel skærm af ren mættet farve er trættende. Baggrunde virker som regel bedre en anelse gråtonede.
• Eksklusiv positionering. Dæmpede, komplekse farver som oliven, okseblod og skifer læses ofte som mere gennemtænkte og dyre end primærfarver.
• Lang læsning. Artikler, dokumenter og dashboards har brug for en rolig overflade, folk kan se på i en time.
• Mørk tilstand. Mættede farver gløder og smører ud på mørke baggrunde. Sænk mætningen, og hæv lysheden lidt; design til mørk tilstand har detaljerne.
• Bag fotografier og tekst. En roligere baggrund lader fotoet og ordene føre.

Vibrationsproblemet

Sæt to meget mættede komplementære farver side om side, som rød på grøn eller blå på orange, og kanten imellem dem ser ud til at flimre. Det er en optisk effekt, og den gør tekst på de par direkte ubehagelig at læse, selv når kontrastforholdet ser acceptabelt ud. Løsningen er at afmætte den ene i parret eller adskille dem med en neutral.

Sådan justerer du mætning i CSS

Hex-koder skjuler mætning, og derfor er det langsomt at justere den efter øjemål i hex. Arbejd i stedet i HSL eller oklch, eller bland en farve med grå 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 nyttig vane er at definere hver brandfarve i to mætninger fra starten: en fuld version til accenter og en dæmpet version til store flader. Så behøver ingen at improvisere en blødere nuance senere.

Fotografier følger den samme logik. Et travlt, mættet foto bag en overskrift konkurrerer med den; træk fotoets mætning ned med omkring en tredjedel, og ordene tager føringen uden en boks eller skygge bag sig. Den anden vej rundt er et enkelt mættet objekt i et ellers dæmpet foto, en rød frakke i en grå gade, en af de ældste måder at styre øjet på.

Mætning i tryk

Skærme kan vise mere mættet farve, end CMYK-blæk kan trykke, især klare blå, grønne, orange og lilla nuancer. En kraftig skærmfarve trykkes ofte mærkbart mattere. Hvis mætning er central for dit brand, så overvej en Pantone-specialfarve til tryk, og tjek et prøvetryk før et stort oplag. RGB vs CMYK forklarer forskellen.

Mætning virker også sammen med farvetemperatur: en varm dæmpet palet føles vintage, en kølig dæmpet føles skandinavisk. For færdige sæt i hver ende af drejeknappen, se dæmpede farvepaletter og klare farvepaletter.

Marks fra Gradiently anvender det samme princip på en levende baggrund: det roligste, mest kontrastrige område flytter sig bag teksten, og travle detaljer dæmpes der, så ordene sidder på et roligere stykke, mens resten af Marken beholder sin farve.