About light to dark mode colour generator
A colour that looks good on white often looks harsh on a dark background. Dark mode colours are usually lighter and slightly less saturated so they feel calm and stay readable.
What the tool does
It inverts lightness and tones down saturation to suggest a dark-theme counterpart of your colour. The output is a starting point you should check by eye in your own layout.
Dark mode design tips
- Avoid pure black backgrounds. A very dark grey reduces harsh contrast and looks softer.
- Reduce the saturation of bright accent colours, which glow too strongly on dark surfaces.
- Keep text contrast high enough, at least 4.5:1 for body text.
- Use elevation, lighter surfaces for raised areas, instead of heavy shadows.
A worked example
A brand blue such as #2449B8 works well on white but looks heavy and dim on a dark grey page. A dark-mode version is lighter and a little softer, for example around #7C9BEA. The hue stays the same so it still feels like your brand, but the lightness rises so it stands out against the dark surface.
Common mistakes
- Simply inverting every colour. Photos, shadows and brand colours need separate treatment.
- Using pure white text on pure black, which causes glare. Off-white on dark grey is easier to read.
- Forgetting to test links, borders and disabled states in the dark theme.
