De korte versie
- Verzadiging in ontwerp is de intensiteit van een kleur, van volledig levendig tot helemaal grijs, los van de tint.
- Hoge verzadiging trekt aandacht en voelt energiek, dus ze werkt het best op kleine vlakken zoals knoppen, accenten en highlights.
- Lagere verzadiging voelt rustiger en vaak duurder, en past bij grote vlakken zoals achtergronden en lange leesoppervlakken.
- Twee sterk verzadigde complementaire kleuren naast elkaar kunnen lijken te trillen, waardoor tekst erop vermoeiend leest.
- Verzadigde kleuren moeten in donkere modus meestal worden getemperd en zijn in CMYK-druk vaak niet exact te evenaren.
Op deze pagina
Verzadiging in ontwerp is hoe intens een kleur is: volledig verzadigd is levendig en puur, volledig onverzadigd is grijs. Draai het open waar je aandacht en energie wilt, op een knop, een actieprijs of één highlight. Draai het dicht voor grote vlakken, lang lezen, premiummerken en donkere interfaces, waar levendige kleur snel vermoeiend wordt. De meeste goede paletten mengen beide met opzet: een rustige basis met lagere verzadiging en één of twee verzadigde noten.
Wat verzadiging is en wat niet
Elke kleur is te beschrijven met drie eigenschappen: tint (welke kleur het is), helderheid (hoe dicht bij wit of zwart) en verzadiging (hoe puur of vergrijsd). Wijzig alleen de verzadiging en een kersenrood glijdt naar stoffig roze en dan naar grijs, zonder lichter of donkerder te worden. Tint, verzadiging en helderheid legt uit hoe de drie zich tot elkaar verhouden.
In HSL is verzadiging het tweede getal. In de nieuwere kleurruimte oklch is het equivalent chroma, dat zich gelijkmatiger over tinten gedraagt, zodat een geel en een blauw met dezelfde chroma even intens lijken. HSL-kleuren behandelt het oudere model en hoe je de getallen leest.
Wanneer je de verzadiging opendraait
- Het ene ding om op te drukken. Een verzadigde knop op een rustige pagina heeft geen pijl nodig. Dit is de taak van een accentkleur.
- Korte, luide momenten. Aankondigingen van acties, lanceringsposts en aftellers voor evenementen zijn bedoeld om een scroll te onderbreken.
- Jonge, speelse of sportieve merken. Kinderproducten, energiedrankjes en festivals dragen hoge verzadiging vaak als deel van hun persoonlijkheid.
- Data die moet opvallen. Verzadig in een grafiek de reeks die telt en maak de rest grijs.
- Kleine vlakken op donkere ondergrond. Een levendige kleur op een klein vlak op bijna zwart leest als licht, daarom werkt neon in het donker.
Wanneer je de verzadiging dichtdraait
- Grote vlakken. Een heel scherm van pure verzadigde kleur is vermoeiend. Achtergronden werken meestal beter licht vergrijsd.
- Premium positionering. Gedempte, complexe kleuren zoals olijf, ossenbloed en leisteen komen vaak doordachter en duurder over dan primaire kleuren.
- Lang lezen. Artikelen, documenten en dashboards hebben een rustig oppervlak nodig waar mensen een uur naar kunnen kijken.
- Donkere modus. Verzadigde kleuren gloeien en smeren uit op donkere achtergronden. Verlaag de verzadiging en verhoog de helderheid een beetje. Ontwerpen voor donkere modus heeft de details.
- Achter foto’s en tekst. Een rustiger achtergrond laat de foto en de woorden leiden.
Een kort, luid moment zoals een weekendactie is waar hoge verzadiging haar plek verdient. Staande post van 1080×1350.
Iets waar mensen bij moeten blijven hangen, zoals een journalpost, is waar rustiger kleur met lagere verzadiging thuishoort.
Het trillingsprobleem
Zet twee sterk verzadigde complementaire kleuren naast elkaar, zoals rood op groen of blauw op oranje, en de rand ertussen lijkt te schemeren. Het is een optisch effect en het maakt tekst op die paren echt onprettig om te lezen, ook als de contrastverhouding acceptabel lijkt. De oplossing is een van het paar te onverzadigen, of ze te scheiden met een neutrale kleur.
Trilt
- Puur rode tekst op puur groen
- Verzadigd blauw op verzadigd oranje
- Magenta naast limoen op volle sterkte
- Levendige kleuren naast elkaar over een hele poster
Leest rustig
- Diep rode tekst op gedempt salie
- Marineblauw op zacht abrikoos
- Magenta-accent op een vergrijsde limoenondergrond
- Eén levendige kleur op een basis met lagere verzadiging
Hoe je verzadiging in CSS aanpast
Hexcodes verbergen verzadiging, daarom is aanpassen op het oog in hex traag. Werk in plaats daarvan in HSL of oklch, of meng een kleur met grijs met 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);
}Een nuttige gewoonte is om elke merkkleur vanaf het begin in twee verzadigingen te definiëren: een volle versie voor accenten en een gedempte voor grote vlakken. Dan hoeft niemand later een zachtere tint te improviseren.
Foto’s volgen dezelfde logica. Een drukke, verzadigde foto achter een kop concurreert ermee. Haal de verzadiging van de foto ongeveer een derde omlaag en de woorden nemen de leiding zonder kader of schaduw erachter. Andersom is één verzadigd voorwerp in een verder gedempte foto, een rode jas in een grijze straat, een van de oudste manieren om het oog te sturen.
Verzadiging in druk
Schermen kunnen verzadigder kleur tonen dan CMYK-inkt kan drukken, vooral heldere blauwen, groenen, oranjes en paarsen. Een levendige schermkleur wordt vaak merkbaar doffer gedrukt. Als verzadiging centraal staat in je merk, overweeg dan een Pantone-steunkleur voor druk en controleer een proef voor een grote oplage. RGB versus CMYK legt het verschil uit.
Verzadiging werkt ook samen met kleurtemperatuur: een warm gedempt palet voelt vintage, een koel gedempt palet Scandinavisch. Voor kant-en-klare sets aan beide uiteinden van de knop zie gedempte kleurenpaletten en felle kleurenpaletten.
De Marks van Gradiently passen hetzelfde principe toe op een levende achtergrond: het rustigste, best contrasterende gebied verschuift achter de tekst en drukke details ontspannen daar, zodat de woorden op een stillere plek staan terwijl de rest van de Mark zijn kleur behoudt.
Vragen die mensen stellen
Wat is verzadiging in ontwerp?
De intensiteit of zuiverheid van een kleur, van volledig levendig tot helemaal grijs. Het staat los van tint en helderheid.
Is hoge verzadiging slecht?
Nee, maar ze werkt het best op kleine vlakken en in korte momenten. Grote vlakken met hoge verzadiging zijn vermoeiend en kunnen goedkoop ogen.
Wat is het verschil tussen verzadiging en helderheid?
Verzadiging is hoeveel grijs er in een kleur zit, helderheid is hoe dicht hij bij wit of zwart ligt. Je kunt het ene wijzigen zonder het andere.
Waarom zien verzadigde kleuren er in donkere modus slechter uit?
Op donkere achtergronden lijken levendige kleuren te gloeien en aan de randen te vervagen. De verzadiging licht verlagen en de helderheid verhogen houdt ze scherp.
Hoe maak ik een kleur minder verzadigd in CSS?
Verlaag de tweede waarde in hsl() of oklch(), of meng met grijs via color-mix(in oklch, jouwkleur 60%, #808080).
Geschreven door Gradiently
Het team achter Gradiently, een ontwerptool rond Marks: levende kleurverlopen die alles wat je ontwerpt op jou laten lijken.
Bekijk ons profiel