Afdæmpede farvepaletter: støvede koder til rolige brands

En afdæmpet farvepalet er et sæt farver med mætningen skruet ned, så de ser støvede, bløde og let grålige ud frem for rene. Salvie #9CAF88, støvet rosa #C9A9A6, skiferblå #6B7F99, mauve #B48A9B og ler #B5826B er typiske. De passer til brands, der vil føles rolige og gennemtænkte: keramik, wellness, papirvarer, arkitektur, slow fashion. Problemet er, at afdæmpede farver glider mod den samme lyshed, så enhver god afdæmpet palet indeholder én fast mørk farve, der holder den sammen.

Hvad gør en farve afdæmpet

En farve har tre indstillinger: nuance, mætning og lyshed (se nuance, mætning og lysstyrke). Afdæmpning sænker mætningen, mens nuancen forbliver genkendelig. Der er to klassiske måder at gøre det på: bland grå i, hvad designere kalder at lave en tone, eller bland en smule af komplementærfarven i, som malere altid har gjort. Begge trækker farven mod neutral.

Afdæmpet er ikke det samme som pastel. En pastel tilføjer hvid, så den forbliver ren og lys; en afdæmpet farve tilføjer grå, så den kan være lys, mellem eller mørk og altid føles lidt støvet. Pastelfarvepaletter og tints, toner og skygger trækker grænsen mere detaljeret.

Syv afdæmpede farvepaletter med hexkoder

• Havn: tåge #E6E9EA, skiferblå #6B7F99, havgrå #93A3A6, reb #C2AD8E, dyb marineblå #22303C.
• Keramik: biscuit #F1E8DD, ler #B5826B, askeglasur #A7A39A, jern #5B4A42, ovnsort #231D1A.
• Lavendelstøv: dis #F1EBE6, mauve #B48A9B, lyng #8E8AA6, salvie #9CAF88, aubergine #4A3F4F.
• Olivenlund: creme #F2EDE1, oliven #8A8A5C, tørret urt #B1A87F, terrakotta #A9674E, bark #3A3328.
• Nordisk: sne #F2F3F1, birk #D8D1C4, lav #A3AE9D, fjord #5F7A80, fyr #24302E.
• Støvet skumring: pergament #EFE6DA, ferskenstøv #D9A88F, rosenbrun #A06F6B, blommegrå #6E5866, nat #2A2329.

Hver eneste af dem ender i en mørk farve. Det er ikke pynt. Uden den er der intet at sætte tekst i og intet at tegne en kant med, og paletten ligner et fotografi, der har ligget i solen.

Hvorfor afdæmpede paletter bliver til tåge

Afdæmpning fjerner de stærkeste forskelle mellem farver, så lyshed bliver det eneste, der er tilbage til at adskille dem. Salvie #9CAF88 og støvet rosa #C9A9A6 ligner en smuk kontrast mellem grøn og pink, men deres kontrastforhold er 1,09:1: næsten samme lyshed. Tekst i den ene på den anden er ulæselig. Selv salvie på ren hvid når kun 2,36:1.

Tjek dine egne par med vejledningen i farvekontrast. En god vane er at konvertere paletten til gråtoner et øjeblik: bliver to farver den samme grå, så sæt aldrig den ene oven på den anden.

Sådan afdæmper du enhver farve i CSS

Har du allerede en klar brandfarve og vil have en roligere ledsager, så bland den med grå i stedet for at vælge en ny farve på øjemål. color-mix() i oklch-rummet holder nuancen stabil, mens mætningen falder, og den understøttes i alle aktuelle store browsere.

:root {
  --brand: #2f6bff;

  /* the same hue, progressively muted */
  --brand-muted-1: color-mix(in oklch, var(--brand) 70%, #8c8c8c);
  --brand-muted-2: color-mix(in oklch, var(--brand) 45%, #8c8c8c);
  --brand-muted-3: color-mix(in oklch, var(--brand) 25%, #8c8c8c);

  /* or set chroma directly in oklch: low chroma reads as muted */
  --slate: oklch(0.58 0.05 255);
  --sage: oklch(0.72 0.06 130);
}

OKLCH forklaret viser, hvorfor dette farverum opfører sig mere jævnt end HSL, og mætning i design viser, hvornår du skal skrue op for den igen.

Afdæmpede gradienter og baggrunde

Afdæmpede farver giver bløde, stille gradienter, især når stoppene ligger tæt i nuance, og lyset kommer fra én side. Tilføj lidt korn: blandinger med lav kontrast får nemt banding, og tekstur får dem til at ligne en overflade frem for en skærmindstilling.

En afdæmpet palet kan også tage én lidt stærkere farve som accent, som en terrakotta blandt salvier eller en dybere petrol blandt grå. Hold den til ét element pr. design: en pris, en knap, en dato. Det giver øjet et sted at lande uden at bryde roen, og det er sådan, de jordfarvepaletter, som afdæmpede paletter låner fra, som regel fungerer.

Lever dit brand i afdæmpede farver, gør en baggrund med sit eget korn og lys meget af arbejdet. En Gradiently Mark giver dig en blød, karakteristisk flade, der selv holder teksten læsbar, og det betyder mere i en afdæmpet palet end i nogen anden.