Desaturation Rule

The desaturation rule is the calculated reduction of color intensity required to make dark interfaces comfortable after dark. Saturated colors that cut cleanly through light backgrounds become aggressive haloing monsters when the lights go out. Drop accent chroma 15 to 25 percent. Pull text and borders back even further. Lift lightness to compensate. Hold hue constant. The adjustment accounts for how human eyes process color differently against low lightness surfaces in dim ambient conditions. Applied correctly the brand stays recognizable. The interface stops causing pain at 2 a.m.

The desaturation rule is not a blunt instrument that mutes every color the same way. It is not the desaturate everything approach that turns your palette into various shades of sad gray. It is not simple inversion of your light mode values or the result of automated scripts that promise one click dark mode. Those paths create interfaces that either look flat and lifeless or burn with oversaturated accents that make users regret opening the app at night. The rule is surgical. Different roles get different reductions. Accents get moderate adjustment. Supporting colors get more aggressive cuts. Background tints follow their own warmth rules.

Linear shipped the definitive example in their 2023 interface update. The light mode purple carries substantial chroma that feels right on white. Their dark mode version lifts lightness from 0.58 to 0.72 and drops chroma from 0.19 to 0.15. That 21 percent reduction stops the vibration against their oklch(0.10 0.012 30) background while keeping the purple unmistakably theirs. Stripe followed suit in 2020 with their brand purple and blue. The calibrated dark versions sit on their four tier surface model without creating bloom in data heavy views. Vercel went binary in 2022 with their orange accent desaturated to 0.09 chroma against deep backgrounds. The restraint makes the few color moments land harder. GitHub added their dimmed theme in 2019 precisely because their original dark mode ignored the rule and felt too cool and harsh for long coding sessions. Notion stripped chroma almost to zero in 2020 trusting their typography and surface steps instead. Figma tuned their dark mode magentas in 2021 using the same principles so artists could work late without eye strain. Each case shows the rule adapting to product context while delivering the same core benefit.

Deploy this rule on every dark mode that targets real users who work at night. Productivity software code editors reading apps and financial tools all demand it. The four surface elevation model only functions when paired with properly desaturated text and accents at each level. Run the rule after you set your primitive OKLCH values and before you map the semantic tokens. Check the results with APCA then with your own eyes at 1 a.m. on multiple displays. The rule catches the shimmer halo and bloom that WCAG misses. Use it when your brand colors sit at high chroma in light mode because those are the ones that explode in dark mode.

Skip the rule for light mode only products where high saturation reads as lively and engaging. Avoid it on interfaces meant for bright daylight use like maps or outdoor kiosks. Do not apply one universal reduction percentage across all tokens because primary accents need to retain more presence than disabled states or hairline borders. Never trust fully automated dark mode generators to apply it correctly. The original Slack dark theme from 2018 ignored these nuances and drew constant complaints until the 2021 refresh that finally warmed the backgrounds and pulled back the blues. Teams that treat dark mode as an inverted afterthought rather than a parallel system always regret it when usage metrics drop after sunset.

The token map from the dark mode color systems article puts the rule into practice. The accent at oklch(0.72 0.17 25) reflects a deliberate chroma drop from its light mode counterpart. The muted variant at 0.12 and the subtle background tint at 0.04 follow the same logic preventing color from competing with content or creating muddy overlaps with the surface tokens at 0.14 0.18 and 0.22 lightness. Text tokens receive their own desaturated treatment with primary at 0.005 chroma so it reads as white without the haloing pure white would produce.

Desaturate with surgical precision or accept that your dark mode will hurt to look at after midnight.