Dark & Light Mode Color Preview
Preview how your colors look in both dark and light UI modes side by side. Test your palette's versatility before committing to a design direction.
Light Mode Preview
See how your colors appear in light mode
Primary
Secondary
Accent
Background
Surface
UI Components
Input field placeholder
Heading Text
Body text showing how readable your color choices are in light mode.
Muted text for secondary information and captions.
Dark Mode Preview
See how your colors appear in dark mode
Primary
Secondary
Accent
Background
Surface
UI Components
Input field placeholder
Heading Text
Body text showing how readable your color choices are in dark mode.
Muted text for secondary information and captions.
Light Mode: Use darker colors for text and lighter colors for backgrounds. Ensure sufficient contrast for readability.
Dark Mode: Invert your approach - use lighter text on darker backgrounds. Avoid pure black (#000000) as it can cause eye strain.
Related Color Tools
Why Preview Colors in Both Light and Dark Mode
Modern apps need to work in both light and dark themes. A color that looks great on a white background can disappear or clash when the background switches to dark gray. This tool shows your palette side-by-side in both modes so you catch visibility issues before they reach production.
How Dark Mode Color Adjustment Works
The preview simulates how your colors behave when the UI theme changes. Light backgrounds get darkened, vibrant colors stay vibrant, and text colors invert for readability.
Light Mode Behavior
Colors display as-is. White or near-white backgrounds work well. Darker colors provide contrast for text and interactive elements.
Dark Mode Behavior
Light backgrounds automatically darken to prevent eye strain. Pure white becomes a dimmed gray. Accent colors remain visible against the darker surface.
Real Use Cases for This Preview Tool
Building a Design System
A design team defines their brand palette. They use this tool to verify that their primary blue works as a button background in both themes, and that their light gray surface color doesn't turn muddy when darkened.
Redesigning an Existing App
Someone's adding dark mode to their SaaS dashboard. They paste in their current brand colors, check the dark mode preview, and realize their light accent color vanishes. They adjust to a brighter shade before implementing.
Client Presentations
A freelancer shows a client two theme options. The split view lets the client see both modes simultaneously, making it easier to approve the palette without switching between mockups.
Accessibility Audits
A developer checks whether their color choices maintain sufficient contrast in both themes. They spot low-contrast text in dark mode and adjust the gray values before users complain.
Marketing Site Theming
A marketing team wants their landing page to support system preferences. They test their brand gradient in both modes and discover it needs a slightly different secondary color for dark backgrounds.
What to Know Before Using This Tool
The dark mode preview is a simulation. It approximates how colors behave in a dark theme, but your actual implementation may vary depending on your CSS framework and how you apply theme tokens.
Background colors get special treatment. Very light colors (like #FFFFFF or #F3F4F6) are automatically darkened in dark mode. This mimics real-world dark theme behavior where pure white backgrounds would cause eye strain.
Accent colors stay mostly unchanged. Vibrant brand colors like blues, purples, and greens don't get darkened — they're meant to pop against both light and dark surfaces.
You can add up to 10 colors. Start with your core palette (primary, secondary, accent, background, surface) and add more as needed for states like success, warning, and error.
Use split view for quick comparisons. The default split view shows both modes side-by-side. Switch to single-mode view if you want to focus on one theme at a time.
Tips for Better Dark Mode Colors
Avoid pure black backgrounds. Use #1F2937 or #111827 instead of #000000. Pure black can cause smearing on OLED screens and feels harsh on the eyes.
Desaturate your dark mode accents. Highly saturated colors can vibrate against dark backgrounds. If your bright yellow looks jarring in dark mode, try a slightly muted version.
Test text contrast separately. This preview shows approximate readability, but use the Contrast Checker tool to verify your specific text/background combinations meet WCAG AA or AAA standards.
Keep surface colors distinct. In dark mode, your card background should be noticeably lighter than your page background. A 10-15% lightness difference usually works.
Don't invert your brand. Dark mode doesn't mean inverting every color. Your primary brand blue should still be blue — just make sure it has enough contrast against dark surfaces.
Frequently Asked Questions
Why does my light gray turn dark in dark mode?
Light grays and whites are treated as background colors. In dark mode, backgrounds need to be dark to reduce eye strain. The tool automatically darkens colors with high luminance (above 200 on a 0-255 scale).
Can I export my palette for use in my project?
This tool focuses on preview rather than export. Copy individual color values using the copy button next to each swatch. For full palette export, use the Palette Export Tool or CSS Variables Generator.
How do I create a dark mode-specific palette?
Start with your light mode colors, preview them in dark mode, then adjust any that don't work. For a dedicated dark mode palette tool, try the Color Palette Generator and manually set darker base values.
What's the difference between this and the Contrast Checker?
This tool shows how colors look in different themes. The Contrast Checker calculates exact WCAG contrast ratios between two specific colors. Use both — preview here, then verify accessibility in the Contrast Checker.
Can I preview more than 5 colors at once?
Yes, add as many colors as you need using the color editor panel. The preview cards show the first 5 colors in the main swatch row, but all your colors are available for UI component previews.
Why do my vibrant colors look different in dark mode?
Colors appear more intense against dark backgrounds due to simultaneous contrast — a perceptual effect where colors look more saturated against dark gray than against white. The tool shows this visual difference.
Should I use different colors for light and dark mode?
Sometimes. Backgrounds and surfaces definitely need different values. Accent colors can often stay the same, but you might need slightly adjusted versions if they don't have enough contrast in one mode.
How do I implement dark mode in my actual app?
Use CSS custom properties (variables) for your colors, then swap the values based on a data-theme attribute or prefers-color-scheme media query. Export your palette as CSS variables and reference them throughout your stylesheets.
When to Use This vs. Other Color Tools
Use this preview tool when you need to see how your existing palette behaves in both light and dark themes. It's for validation, not generation.
Use the Color Palette Generator when you're starting from scratch and need to create a monochromatic scale from a single base color.
Use the Contrast Checker when you need to verify specific color pairs meet WCAG accessibility requirements for text readability.
Use the Text Color Suggestion Tool when you have a background color and need recommendations for readable text colors.
Other Free Color Tools
Color Contrast Checker — WCAG Compliance
Check the contrast ratio between text and background colors against WCAG AA and AAA accessibility standards. Ensure your designs are readable for all users.
Color Palette Generator from Base Color
Generate a beautiful, harmonious color palette from a single base color. Perfect for building consistent UI color schemes and brand identities.
Color Picker
Pick any color using an interactive palette or enter HEX, RGB, or HSL values. Copy your color code instantly for use in any design or development project.
Color Harmony Generator
Generate complementary, analogous, triadic, and tetradic color palettes based on color theory. Build harmonious color schemes for any design project.
CSS Gradient Generator
Create beautiful linear and radial CSS gradients with a live preview and export clean, ready-to-use CSS code. No design skills required.