How to use it
- Enter your light-theme colors, one per line.
- Pick the dark surface the colors will sit on.
- Choose a minimum contrast, or None for backgrounds.
- Copy the result: each line shows
light → dark · ratio.
How it works
- Convert the color to OKLCH (
L,C,h). - Mirror the lightness:
L' = 100% − L. White becomes black, black becomes white and mid-tones stay near the middle. - Keep the hue and scale chroma by 0.9.
- If a minimum contrast is set, raise
L'in steps of 0.5 points until the WCAG ratio on the surface reaches it.
Example
On #121212, white mirrors to black (1.12:1 on the surface) and black mirrors to white (18.73:1). White with a 7:1 minimum becomes #a0a0a0 (7.16:1).
Tips
- Treat the result as a first draft. Brand colors often need hand tuning.
- Check pairs, not just single colors: use the contrast matrix on the dark palette.
- Avoid pure white text on dark surfaces for long reading; a slightly dimmed white is easier on the eyes (rule of thumb).