365Lab ColorCOLOR LAB
中 EN
Light & Dark

Light & Dark Theme Preview

The same color feels different on white vs black. Preview both modes at once to confirm your brand color still works in dark mode.

Light mode

Dark mode


      

    

  






  

    
About light & dark themes

    
Why two modes
One color can be harsh on white and dull on black. A good palette stays clear and on-brand in both backgrounds.
How it builds
From a base color it takes two lighter and two darker steps, previewed on light-gray and dark-gray canvases, and outputs :root plus .dark CSS variables.
Pair with contrast
Theme preview only answers “does it look right”; verify text readability with the Contrast tool or the Palette Audit.

  






  

    
Related tools

    

    
      
      
Design System

      
One brand color in, get primary/secondary/accent/semantic plus a neutral scale.

    
    
      
      
Contrast

      
WCAG contrast checks with one-click accessible fixes.

    
    
      
      
Color Scale

      
Enter a base color and get a full 50–950 shade scale for design systems.

    

  





  

    

      
About this tool
📘

      

        
Theme preview takes a brand color and shows its full swatch under both light and dark interfaces, with CSS variables.

        
  • Enter a brand color and the tool previews both light and dark theme swatches.
  • Review how each semantic color behaves in both themes to keep contrast safe.
  • Export CSS variables directly for your theme-switching logic.

      

    

  






  

    

      
Tips
💡

      

        
    
          
  • Dark mode is not just dimming colors - lower lightness and rebalance contrast.
  • When happy, copy the CSS straight into your :root and .dark blocks.
  • Confirm text stays readable in both modes with the Contrast tool.
    •