Color in Dark Mode

Dark mode changes every color psychology rule. Saturated colors glow brighter, white text replaces dark text, and your entire palette needs to be recalibrated for OLED screens.

Cultural Associations

User preference

82% of developers and 65% of general users prefer dark mode

Health

Reduced eye strain in low-light, lower blue light emission

Premium perception

Dark interfaces feel more sophisticated and modern

Battery life

OLED screens save up to 60% battery with dark backgrounds

Dark mode is not light mode with the colors inverted. It is a completely different design system. Every color, every shadow, every contrast ratio needs to be rethought.

In Web Design

  1. Desaturate brand colors by 1-2 Tailwind shades (600 to 400) for dark backgrounds
  2. Use Gray 950 or Slate 900 instead of pure black for comfortable backgrounds
  3. Increase spacing and padding to prevent dark mode claustrophobia
  4. Add subtle borders (Slate 700/800) to maintain card separation

Recommended Tailwind Colors

Slate 900 (background)

slate-900

Slate 800 (surface)

slate-800

Slate 700 (border)

slate-700

Gray 300 (body text)

gray-300

Gray 100 (headings)

gray-100

Case Studies

Twitter/X

Multiple dark mode options (dim and lights out) cater to different user preferences and environments

Discord

Dark mode is the default, establishing dark-first as the norm for communities and communication

Linear

Dark-mode-first design with desaturated accent colors sets the standard for modern SaaS aesthetics

Frequently Asked Questions

Should I design dark mode first or light mode first?▼
Design light mode first for most products — it is still the default for business tools and content sites. Design dark mode first only for developer tools, gaming, entertainment, and social platforms where dark is the expected default.
How do I adjust my brand colors for dark mode?▼
Shift 1-2 Tailwind steps lighter. Blue 600 in light mode becomes Blue 400 in dark mode. This prevents oversaturation on dark backgrounds. Test every color on Slate 900 and verify a minimum 4.5:1 contrast ratio.

Related Articles

Blue in Web Design

Blue is the most used color on the web. It signals trust, professionalism, and stability. Used by 33% of top brands.

Red in Web Design

Red is the color of urgency, passion, and action. It increases heart rate, creates FOMO, and drives the highest click-through rates on CTA buttons.

Yellow in Web Design

Yellow is the color of optimism, attention, and caution. It is the most visible color in daylight and the hardest to read on screen when used poorly.

Green in Web Design

Green is the color of growth, success, and go-ahead signals. It is the easiest color for the human eye to process and the best choice for positive feedback states.

Orange in Web Design

Orange is the color of enthusiasm, creativity, and affordable value. It combines red's energy with yellow's friendliness, making it the top performer for e-commerce CTAs.

Purple in Web Design

Purple is the color of luxury, creativity, and premium quality. Historically the most expensive dye, it still communicates exclusivity and imagination in digital design.

Explore More Color Psychology

Discover how colors influence design decisions and user behavior with our Tailwind CSS color tools.

Browse Color Tools