Convert any light-mode colour to its dark mode equivalent. Get CSS variables, HEX, RGB and HSL for both themes — instantly.
Use the colour picker or type a HEX code directly. Try the sample buttons for common design system colours like Slate, Blue and Amber.
Choose Desaturate & Lighten for Material Design, Invert Lightness for a quick flip, or Surface-Aware for Apple-style layered dark surfaces.
Use the output values directly in your stylesheet. The CSS variables block includes both --color-light and --color-dark ready for prefers-color-scheme.
Always verify the result with the Contrast Checker to ensure WCAG compliance.
Dark mode colours are adjusted versions of light-mode colours designed to be readable and visually comfortable on dark backgrounds. They are typically desaturated, lightened or shifted in hue to maintain contrast and reduce eye strain in low-light environments.
The tool analyses the input colour in the HSL colour space. For backgrounds it shifts lightness toward dark values. For foreground/text colours it increases lightness to maintain readability. Saturation is slightly reduced to prevent colours from appearing too vivid on dark surfaces — following Material Design and Apple Human Interface Guidelines conventions.
Three strategies are provided: Desaturate & Lighten (Material Design style — reduces saturation and boosts lightness), Invert Lightness (flips light/dark directly — quick and clean), and Surface-Aware (maps the colour relative to a near-black background, following Apple\ layered surface model).
The Desaturate & Lighten strategy follows Material Design 3 colour system principles. The Surface-Aware strategy approximates Apple Human Interface Guidelines. Both are starting points — always verify the result with a contrast checker.
Copy the generated CSS variables block. It contains both --color-light and --color-dark custom properties. Use them with the prefers-color-scheme media query: @media (prefers-color-scheme: dark) { :root { color: var(--color-dark); } }.
Yes. All calculations happen entirely in your browser using JavaScript. No data is ever sent to any server.
