Dark Mode Palette Pair Generator

Pair each light-mode hex colour with a dark-mode counterpart using OKLCH lightness inversion.

Light-mode colours (one per line or CSS vars)

Paste at least one hex colour or a CSS custom-property block.

About this tool

Paste a list of hex colours (or a CSS custom-property block like '--bg: #ffffff'). For each colour the tool computes an OKLCH-based dark-mode counterpart by inverting lightness and softening chroma where needed to stay in sRGB gamut. Both swatches are shown side by side with WCAG contrast ratios against black and white, plus a ready-to-paste CSS @media (prefers-color-scheme: dark) block.