Dämpade färgpaletter: dammiga koder för lugna varumärken

En dämpad färgpalett är en uppsättning färger med nedskruvad mättnad, så att de ser dammiga, mjuka och lätt gråa ut i stället för rena. Salvia #9CAF88, dammig rosa #C9A9A6, skifferblått #6B7F99, lila #B48A9B och lera #B5826B är typiska. De passar varumärken som vill kännas lugna och genomtänkta: keramik, välmående, pappersvaror, arkitektur, långsamt mode. Haken är att dämpade färger glider mot samma ljushet, så varje bra dämpad palett har en fast mörk färg som håller ihop den.

Vad som gör en färg dämpad

En färg har tre inställningar: kulör, mättnad och ljushet (se kulör, mättnad och ljusstyrka). Dämpning sänker mättnaden men låter kulören vara igenkännbar. Det finns två klassiska sätt att göra det: blanda in grått, vilket designers kallar att göra en ton, eller blanda in lite av komplementfärgen, vilket målare alltid har gjort. Båda drar färgen mot neutralt.

Dämpad är inte detsamma som pastell. En pastell tillför vitt, så den förblir ren och ljus; en dämpad färg tillför grått, så den kan vara ljus, medel eller mörk och känns alltid lite dammig. Pastellpaletter och nyanser, toner och skuggor drar gränsen mer i detalj.

Sju dämpade färgpaletter med hexkoder

• Hamn: dimma #E6E9EA, skifferblått #6B7F99, havsgrått #93A3A6, rep #C2AD8E, djup marin #22303C.
• Keramik: kex #F1E8DD, lera #B5826B, askglasyr #A7A39A, järn #5B4A42, ugnssvart #231D1A.
• Lavendeldamm: dis #F1EBE6, lila #B48A9B, ljung #8E8AA6, salvia #9CAF88, aubergine #4A3F4F.
• Olivlund: kräm #F2EDE1, oliv #8A8A5C, torkad ört #B1A87F, terrakotta #A9674E, bark #3A3328.
• Nordiskt: snö #F2F3F1, björk #D8D1C4, lav #A3AE9D, fjord #5F7A80, tall #24302E.
• Dammig skymning: pergament #EFE6DA, persikodamm #D9A88F, rosenbrunt #A06F6B, plommongrått #6E5866, natt #2A2329.

Var och en av dessa slutar i en mörk färg. Det är inte dekoration. Utan den finns inget att sätta text i och inget att dra en kant med, och paletten ser ut som ett fotografi som glömts kvar i solen.

Därför blir dämpade paletter till dimma

Dämpning tar bort de största skillnaderna mellan färger, så ljusheten blir det enda som återstår för att skilja dem åt. Salvia #9CAF88 och dammig rosa #C9A9A6 ser ut som en vacker kontrast av grönt och rosa, men deras kontrastförhållande är 1,09:1: nästan samma ljushet. Text i den ena på den andra är oläsbar. Till och med salvia på rent vitt når bara 2,36:1.

Kontrollera dina egna par med hjälp av färgkontrast. En bra vana är att en stund göra paletten till gråskala: om två färger blir samma grå, lägg aldrig den ena ovanpå den andra.

Så dämpar du vilken färg som helst i CSS

Om du redan har en klar varumärkesfärg och vill ha en lugnare följeslagare, blanda den med grått i stället för att välja en ny färg på känn. color-mix() i oklch-rymden håller kulören stabil medan mättnaden sjunker, och stöds i alla nuvarande större webbläsare.

: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 förklarat går igenom varför den här rymden beter sig jämnare än HSL, och mättnad i design tar upp när du ska skruva upp den igen.

Dämpade gradienter och bakgrunder

Dämpade färger ger mjuka, tysta gradienter, särskilt när stoppen ligger nära varandra i kulör och ljuset kommer från ena sidan. Lägg till lite korn: gradienter med låg kontrast bandar lätt, och textur får dem att se ut som en yta snarare än en skärminställning.

Ett dämpat schema kan också få en något starkare färg som accent, som terrakotta bland salvia eller ett djupare blågrönt bland grått. Håll den till ett enda element per design: ett pris, en knapp, ett datum. Den ger ögat en plats att landa på utan att bryta lugnet, och så fungerar oftast de jordtonspaletter som dämpade scheman lånar från.

Om ditt varumärke lever i dämpade färger gör en bakgrund med eget korn och eget ljus mycket av jobbet. En Gradiently-Mark ger dig en mjuk, särpräglad yta som håller texten läsbar av sig själv, vilket spelar större roll i ett dämpat schema än i något annat.