Color Shade Generator

Generate balanced color shades for your design system

How to Use These Shades

Each shade is carefully generated to provide a consistent and accessible color scale:

  • 50-200: Use for backgrounds, hover states, and subtle UI elements
  • 300-400: Perfect for secondary elements and borders
  • 500: Your primary color - use for main UI elements
  • 600-700: Great for text that needs to stand out
  • 900: Use for maximum contrast and important headlines

Accessibility Tips

  • Look for the
    AA
    badge on colors that meet WCAG AA standard (4.5:1 contrast ratio)
  • Use colors with AA badges for the best readability

Comments

No comments

There are no comments yet. Share your thoughts and experience with thousands of others!