Gedempte kleurenpaletten: stoffige codes voor rustige merken

Een gedempt kleurenpalet is een set kleuren waarvan de verzadiging omlaag is gedraaid, zodat ze stoffig, zacht en een tikje grijs ogen in plaats van zuiver. Salie #9CAF88, oudroze #C9A9A6, leisteenblauw #6B7F99, mauve #B48A9B en klei #B5826B zijn typisch. Ze passen bij merken die rustig en doordacht willen overkomen: keramiek, welzijn, schrijfwaren, architectuur, slow fashion. De adder onder het gras is dat gedempte kleuren naar dezelfde helderheid neigen, dus elk goed gedempt palet bevat één stevig donker om het bij elkaar te houden.

Wat een kleur gedempt maakt

Een kleur heeft drie instellingen: tint, verzadiging en helderheid (zie tint, verzadiging en helderheid). Dempen verlaagt de verzadiging terwijl de tint herkenbaar blijft. Er zijn twee klassieke manieren: grijs erdoor mengen, wat ontwerpers een tint (tone) maken noemen, of een beetje van de complementaire kleur erdoor mengen, wat schilders altijd al deden. Beide trekken de kleur naar neutraal.

Gedempt is niet hetzelfde als pastel. Een pastel voegt wit toe en blijft daardoor schoon en licht; een gedempte kleur voegt grijs toe, dus hij kan licht, middel of donker zijn en voelt altijd een beetje stoffig. Pastelkleurenpaletten en tinten, tonen en schaduwen trekken de lijn preciezer.

Zeven gedempte kleurenpaletten met hexcodes

• Haven: mist #E6E9EA, leisteenblauw #6B7F99, zeegrijs #93A3A6, touw #C2AD8E, diep marineblauw #22303C.
• Keramiek: biscuit #F1E8DD, klei #B5826B, asglazuur #A7A39A, ijzer #5B4A42, ovenzwart #231D1A.
• Lavendelstof: nevel #F1EBE6, mauve #B48A9B, heide #8E8AA6, salie #9CAF88, aubergine #4A3F4F.
• Olijfgaard: crème #F2EDE1, olijf #8A8A5C, gedroogde kruiden #B1A87F, terracotta #A9674E, schors #3A3328.
• Nordic: sneeuw #F2F3F1, berk #D8D1C4, korstmos #A3AE9D, fjord #5F7A80, den #24302E.
• Stoffige schemering: perkament #EFE6DA, perzikstof #D9A88F, roosbruin #A06F6B, pruimgrijs #6E5866, nacht #2A2329.

Elk van deze eindigt in een donker. Dat is geen versiering. Zonder dat is er niets om tekst in te zetten en niets om een rand mee te trekken, en ziet het palet eruit als een foto die in de zon is blijven liggen.

Waarom gedempte paletten in mist veranderen

Dempen haalt de sterkste verschillen tussen kleuren weg, dus helderheid blijft het enige over om ze te scheiden. Salie #9CAF88 en oudroze #C9A9A6 lijken een mooi contrast van groen en roze, maar hun contrastverhouding is 1,09:1: bijna dezelfde helderheid. Tekst in de ene op de andere is onleesbaar. Zelfs salie op zuiver wit haalt maar 2,36:1.

Controleer je eigen paren met de richtlijnen in kleurcontrast. Een goede gewoonte is het palet even naar grijstinten om te zetten: als twee kleuren hetzelfde grijs worden, zet dan nooit de ene op de andere.

Zo demp je elke kleur in CSS

Heb je al een felle merkkleur en wil je een rustiger partner, meng hem dan met grijs in plaats van op het oog een nieuwe kleur te kiezen. color-mix() in de oklch-ruimte houdt de tint stabiel terwijl de verzadiging daalt, en wordt ondersteund in alle huidige grote browsers.

: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 uitgelegd behandelt waarom deze ruimte gelijkmatiger werkt dan HSL, en verzadiging in ontwerp behandelt wanneer je hem weer omhoog draait.

Gedempte verlopen en achtergronden

Gedempte kleuren maken zachte, stille verlopen, vooral als de stops dicht bij elkaar liggen in tint en het licht van één kant komt. Voeg een beetje korrel toe: verlopen met laag contrast vertonen makkelijk banding, en textuur laat ze eruitzien als een oppervlak in plaats van een schermstand.

Een gedempt palet kan ook één iets sterkere kleur als accent hebben, zoals terracotta tussen salietinten of een dieper turquoise tussen grijzen. Houd het bij één element per ontwerp: een prijs, een knop, een datum. Het geeft het oog een plek om te landen zonder de rust te breken, en zo werken ook de aardetintenpaletten waar gedempte paletten uit lenen.

Leeft je merk in gedempte kleuren, dan doet een achtergrond met eigen korrel en licht veel van het werk. Een Gradiently Mark geeft je een zacht, onderscheidend oppervlak dat tekst vanzelf leesbaar houdt, en dat telt in een gedempt palet zwaarder dan in welk ander ook.