365Lab ColorCOLOR LAB
中 EN
Shades

Lightness Shades

Enter a base color and get an even light-to-dark ramp ready for design-system states.


      

    

  






  

    
Shade preview

    

  






  

    
When to use

    
States
One hue at different lightness is inherently harmonious — perfect for default/hover/active/disabled.
Layers
Light shades for card backgrounds, dark shades for borders — more designed than plain gray.

  






  

    
Related tools

    

    
      
      
Color Scale

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

    
    
      
      
Hue Tune

      
Rotate hue and nudge saturation/lightness, compare with the original and read ΔE.

    
    
      
      
Neutral Grays

      
A balanced neutral scale with a warm or cool cast; export CSS variables.

    

  





  

    

      
About this tool
📘

      

        
Shades splits any color into an even light-to-dark gradient you can use directly for UI hierarchy.

        
  • Enter a color and the tool splits it into an even lightness ramp with HEX values.
  • Click any swatch to copy; export as CSS variables to apply in one go.
  • Great for button, border and background layering within the same hue family.

      

    

  






  

    

      
Tips
💡

      

        
    
          
  • 5–9 steps is enough; reserve the ends for lightest background and darkest text.
  • Copy as CSS vars and reference different steps for hover/active/disabled.
  • In dark mode push the darkest steps darker or they merge with the background.
    •