Dark Mode CSS Generator
Professional-grade theme builder. Automatically generates accessible dark mode palettes using Hue-Preservation algorithms, checks WCAG contrast ratios real-time, and exports to CSS Variables, Tailwind, and Bootstrap.
About
Dark mode is no longer a luxury; it is an accessibility requirement and a battery-saving standard expected by modern users. However, creating a high-quality dark theme is not as simple as inverting colors. Simple inversion often leads to desaturated, muddy grays or vibrating, neon colors that cause eye strain. Furthermore, maintaining brand identity while ensuring WCAG AA compliance (4.5:1 contrast ratio) requires precise mathematical adjustments to Luminance (L) and Saturation (S).
This tool solves these engineering challenges by employing a Hue-Preservation Algorithm. It analyzes your Light Mode palette, locks the chromatic essence (Hue), and mathematically projects the Lightness and Saturation into a dark spectrum optimized for readability. It simultaneously validates contrast ratios in real-time, ensuring your site remains accessible to users with visual impairments.
Formulas
The core of accessibility is the Contrast Ratio, derived from the Relative Luminance of the foreground and background colors.
Where L (Luminance) is calculated for each sRGB channel:
For dark mode generation, we map the input Lightness (Lin) to a target Dark Lightness (Lout) using an inverse scaling function that preserves the original Hue (H):
Reference Data
| Standard / Paradigm | Min Contrast (AA) | Min Contrast (AAA) | Typical Dark Surface HSL-L | Typical Text HSL-L |
|---|---|---|---|---|
| WCAG 2.1 Normal Text | 4.5 : 1 | 7.0 : 1 | 10% - 18% | 85% - 95% |
| WCAG 2.1 Large Text | 3.0 : 1 | 4.5 : 1 | 10% - 18% | 80% - 90% |
| Material Design 2 | 4.5 : 1 | N/A | 12% (#121212) | 87% (High Emphasis) |
| Material Design 3 | 4.5 : 1 | N/A | 6% - 10% (Tonal) | 90% - 95% |
| Apple Human Interface | 4.5 : 1 | N/A | 0% (Pure Black) | 100% (White) |
| GitHub Dark | 4.5 : 1 | 7.0 : 1 | 6% (#0d1117) | 88% (#c9d1d9) |
| Solarized Dark | 4.5 : 1 | N/A | 15% (#002b36) | 58% (#839496) |
| Dracula Theme | 4.5 : 1 | N/A | 17% (#282a36) | 97% (#f8f8f2) |