🌙Dark Mode Color Guide

Guide how to convert light mode colors to appropriate dark mode equivalents

Dark Mode Color Guide — How to Use

Enter a light mode HEX color to get an automatic dark mode suggestion. Instead of simple inversion, the tool uses HSL (hue, saturation, lightness) adjustment to generate colors that work on dark backgrounds.

Core principles: very light colors (background #FFFFFF) become dark (#121212 range); dark text colors become light. High-saturation accent colors are slightly desaturated and lightened so they remain visible without being harsh on dark surfaces.

For dark mode backgrounds, #121212 (Material Design) or #1C1C1E (Apple) reduce eye strain better than pure black (#000000). Always verify colors against WCAG AA contrast requirements (4.5:1 for body text).

Frequently Asked Questions

Why not just invert colors for dark mode?

Simple inversion creates unexpected results — blue becomes orange, green becomes purple. HSL-based adjustment maintains brand tone while adapting for dark backgrounds.

What background color should I use for dark mode?

Material Design recommends #121212, Apple HIG recommends #1C1C1E. Avoid pure black (#000000) due to OLED burn-in risk and harsh contrast.

How do I check WCAG contrast ratio?

Use tools like WebAIM Contrast Checker. Body text needs at least 4.5:1 contrast against its background for WCAG AA compliance.