Dark Mode and Brand Colour: Adapting Palettes Without Losing Identity
Why Dark Mode Changes Everything About Brand Colour
Brand palettes are usually designed for light backgrounds. A confident navy, a warm cream, or a vivid coral all read beautifully on white. Drop that same palette onto a near-black surface and the results can feel muddy, harsh, or simply wrong. Dark mode is not a filter you apply at the end of a project; it is a different optical environment that demands its own decisions.
At design-logix, we treat dark themes as an extension of the brand, not a rejection of it. The goal is recognition: a user should know instantly whose product they are using, even when the lights are off.
Start With Contrast, Not With Colour
Before touching hue, check luminance. Pure white text on pure black is technically high contrast but visually tiring, and it can cause halation for readers with astigmatism. Most mature dark themes use a soft off-white for body text and a deep charcoal rather than true black for surfaces.
Use these practical starting points:
- Body text: 85 to 92 percent lightness, never pure white.
- Background: 8 to 14 percent lightness, tinted toward the brand hue.
- Borders and dividers: one step lighter than the surface, not grey by default.
Contrast ratios still matter. WCAG AA remains the floor for accessibility, and the same rules apply in the dark.
Extending Hue Without Losing Identity
The simplest mistake is desaturating everything until the palette turns grey. The opposite mistake is keeping full saturation, which makes colours glow and vibrate against dark surfaces. The middle path is to reduce saturation slightly while raising lightness just enough to preserve the brand's character.
A brand colour in dark mode should feel like the same voice speaking in a quieter room.
In practice, that means creating dark-mode tokens rather than reusing light-mode hex values. Treat the dark palette as its own system with its own rules.
A Workflow You Can Repeat
Adapting a palette is a process, not a guess. The following order keeps decisions deliberate:
- List every brand colour and its role, such as primary action, accent, or surface.
- Convert each colour to a perceptual space such as OKLCH or HSL for predictable adjustments.
- Lower saturation and lift lightness for small elements, then test at real sizes.
- Verify contrast on the darkest and lightest surfaces in the theme.
- Document the dark tokens next to the light ones so future work stays consistent.
This sequence prevents the common trap of fixing one colour and breaking three others downstream.
Surfaces, Elevation, and Mood
Dark interfaces communicate depth differently. Shadows disappear, so elevation has to be expressed through lighter surfaces instead. Each layer above the base should be a small, deliberate step in lightness, often with a subtle tint of the brand hue.
| Layer | Lightness | Brand Tint |
|---|---|---|
| Base surface | 10% | Low |
| Raised card | 16% | Low |
| Modal or menu | 22% | Medium |
| Primary action | 60% | High |
Mood matters as much as mechanics. A playful brand may keep brighter accents in dark mode, while a luxury brand may lean into deeper, moodier tones. The palette should still feel like the same company after sunset.
Test, Then Trust Your Tokens
Finally, review the dark theme on real devices and in real conditions, including at night with reduced brightness. Adjust only the tokens, never the brand's core identity. Done well, dark mode becomes a natural second home for your colours rather than a compromise.
