Color System Generator

Generate complete, accessible color systems for your design projects.

Features

• 9-Step Color Scales - Generate full tonal scales from any base color
• Color Harmonies - Complementary, analogous, and triadic color schemes
• WCAG Contrast Checker - Verify text accessibility on each color
• Multiple Formats - View colors in HEX and RGB
• Export to CSS - Download CSS variables for your project
• Random Generator - Get inspired with random color palettes
• Click to Copy - Copy any color value instantly

Installation

npm install

Usage

Start the development server:

npm run dev

Build for production:

npm run build

How It Works

1. Pick a base color using the color picker or enter a hex value
2. View the generated 9-step scale (100-900)
3. Explore color harmonies (complementary, analogous, triadic)
4. Check WCAG contrast ratios for accessibility
5. Click any color to copy its hex value
6. Export the entire system as CSS variables

Color Theory

• Complementary: Colors opposite on the color wheel (180° apart)
• Analogous: Colors adjacent on the color wheel (±30°)
• Triadic: Three colors evenly spaced on the color wheel (120° apart)

Technologies

• React 18
• Vite
• Lucide React for icons
• Custom color manipulation utilities

License

MIT License - see LICENSE file for details

color-system-generator