Dark Mode Color Converter

Convert light mode colors to dark mode equivalents. Get proper color inversions for dark themes.

White/Black

#ffffff#0a0a0a

Gray 50/900

#f7fafc#1a202c

Slate

#f3f4f6#111827

Red Tint

#fef2f2#1f1315

Blue Tint

#eff6ff#0c1929

Green Tint

#f0fdf4#0a1f13

Yellow Tint

#fffbeb#1a1608

Purple Tint

#faf5ff#1a0f24

Features

  • Smart inversion
  • HSL-based conversion
  • Preset color pairs
  • Common UI mappings
  • One-click copy
  • Visual preview

How to Use

  1. 1
    Enter a light mode color
  2. 2
    Click Convert
  3. 3
    View dark mode equivalent
  4. 4
    Copy and use in CSS

Frequently Asked Questions

How does the conversion work?

Colors are converted to HSL, lightness is inverted intelligently, and saturation is adjusted for better dark mode appearance.

Why not just invert colors?

Simple inversion often looks bad. This tool adjusts for perceived brightness and maintains color harmony.