Dempede fargepaletter: støvete koder for rolige merkevarer

En dempet fargepalett er et sett farger med redusert metning, slik at de virker støvete, myke og litt grålige fremfor rene. Salvie #9CAF88, støvet rosa #C9A9A6, skiferblå #6B7F99, mauve #B48A9B og leire #B5826B er typiske. De passer merkevarer som vil virke rolige og gjennomtenkte: keramikk, velvære, papirvarer, arkitektur og langsom mote. Utfordringen er at dempede farger nærmer seg samme lyshet. Derfor har enhver god dempet palett én tydelig mørk farge som holder den sammen.

Hva som gjør en farge dempet

En farge har tre innstillinger: fargetone, metning og lyshet. Se fargetone, metning og lysstyrke. Demping senker metningen, men lar fargetonen være gjenkjennelig. Det finnes to klassiske måter: å blande inn grått, som designere kaller å lage en tone, eller litt av komplementærfargen, slik malere alltid har gjort. Begge trekker fargen mot det nøytrale.

Dempet er ikke det samme som pastell. En pastell tilsettes hvitt og forblir ren og lys. En dempet farge tilsettes grått og kan være lys, middels eller mørk, men virker alltid litt støvete. Pastellpaletter og lyse, grå og mørke fargevarianter forklarer skillet mer detaljert.

Sju dempede fargepaletter med heksadesimalkoder

• Havn: tåke #E6E9EA, skiferblå #6B7F99, sjøgrå #93A3A6, tau #C2AD8E, dyp marineblå #22303C.
• Keramikk: bisque #F1E8DD, leire #B5826B, askeglasur #A7A39A, jern #5B4A42, ovnssvart #231D1A.
• Lavendelstøv: dis #F1EBE6, mauve #B48A9B, lyng #8E8AA6, salvie #9CAF88, aubergine #4A3F4F.
• Olivenlund: krem #F2EDE1, oliven #8A8A5C, tørket urt #B1A87F, terrakotta #A9674E, bark #3A3328.
• Nordisk: snø #F2F3F1, bjørk #D8D1C4, lav #A3AE9D, fjord #5F7A80, furu #24302E.
• Støvet skumring: pergament #EFE6DA, ferskenstøv #D9A88F, rosabrun #A06F6B, plommegrå #6E5866, natt #2A2329.

Alle disse ender med en mørk farge. Det er ikke dekor. Uten den finnes ingen farge å sette tekst i eller tegne en kant med, og paletten ligner et fotografi som har ligget i solen.

Hvorfor dempede paletter blir utydelige

Demping fjerner de sterkeste forskjellene mellom fargene, slik at lyshet er det eneste som skiller dem. Salvie #9CAF88 og støvet rosa #C9A9A6 virker som en fin kontrast mellom grønt og rosa, men kontrastforholdet er 1,09:1: nesten samme lyshet. Tekst i den ene på den andre er uleselig. Selv salvie på rent hvitt når bare 2,36:1.

Sjekk dine egne par med veiledningen i fargekontrast. En god vane er å gjøre paletten om til gråtoner et øyeblikk: Blir to farger samme grå, må du aldri legge den ene oppå den andre.

Slik demper du en farge i CSS

Har du en klar merkevarefarge og ønsker en roligere ledsager, bland den med grått fremfor å velge en ny farge på øyemål. color-mix() i oklch-fargerommet holder fargetonen stabil mens metningen faller, og støttes i alle dagens store nettlesere.

: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 forklart dekker hvorfor dette fargerommet oppfører seg jevnere enn HSL, og metning i design forklarer når du bør øke den igjen.

Dempede gradienter og bakgrunner

Dempede farger gir myke, stillferdige gradienter, særlig når fargestoppene har nærliggende fargetoner og lyset kommer fra én side. Legg til litt korn: Blandinger med lav kontrast får lett synlige fargebånd, og tekstur får dem til å ligne en flate fremfor en skjerminnstilling.

En dempet palett kan også ha én litt sterkere aksentfarge, som terrakotta blant salviefarger eller dypere blågrønn blant gråtoner. Bruk den til ett element per design: en pris, en knapp eller en dato. Det gir øyet et sted å lande uten å bryte roen. Slik fungerer vanligvis jordfargepalettene som dempede paletter låner fra.

Lever merkevaren din i dempede farger, gjør en bakgrunn med eget korn og lys mye av jobben. En Mark fra Gradiently gir deg en myk, særpreget flate som selv holder teksten leselig, noe som betyr mer i en dempet palett enn i noen annen.