RubanTools
Suggest a Tool

Dark Mode Color Converter

Convert your light-mode hex palette to dark-mode equivalents - side-by-side preview and ready CSS custom properties.

Light Mode Colors

Enter hex colors one per line. Optionally add a name: name: #hex

Side-by-Side Preview
CSS Custom Properties

Dark Mode FAQ

The @media (prefers-color-scheme: dark) media query detects the user's OS preference. You can override CSS custom properties inside it to swap colors without duplicating your entire stylesheet. JavaScript can also check: window.matchMedia('(prefers-color-scheme: dark)').matches.

Avoid pure black (#000000) - use dark grays (#121212, #1e1e1e). Reduce saturation slightly on dark backgrounds (bright colors look harsh). Ensure contrast ratios still meet WCAG AA (4.5:1 for text). Use elevation shadows with opacity rather than hard borders for depth. Avoid inverting images or icons.

HSL = Hue (0–360°, the color), Saturation (0–100%, intensity), Lightness (0–100%, dark to light). It is more intuitive for dark mode conversion than RGB - you can directly adjust lightness without changing the hue or saturation. Dark mode conversion essentially inverts or reduces the lightness component.