Color Palette Generator

About

Color Palette Generator is a lightweight, fast tool for creating beautiful color palettes. Whether you're starting a new design project or looking for inspiration, our algorithm generates harmonious color combinations that just work.

Features

Intelligent Color Generation

Our algorithm considers color theory principles to create palettes that are visually appealing and work well together. Each palette is designed to be versatile and usable across different design contexts.

Lock and Regenerate

Found a color you love? Lock it in place and regenerate the rest of the palette. This lets you build around a specific brand color or favorite shade.

Accessibility Built-in

Every palette includes WCAG contrast ratio checks. Hover over any color pair to see if it meets AA or AAA standards for text readability.

Export Anywhere

/* Export as CSS Custom Properties */
:root {
  --color-primary: #6366f1;
  --color-secondary: #8b5cf6;
  --color-accent: #ec4899;
  --color-neutral: #64748b;
  --color-background: #f1f5f9;
}

Or export to Tailwind config, SCSS variables, or save the palette as a PNG image for sharing.

How It Works

1. Generate: Click the generate button or press spacebar
2. Customize: Lock colors you like, adjust with the color picker
3. Check: Review accessibility scores for your color combinations
4. Export: Download in your preferred format

Use Cases

• Design Projects: Get started quickly with a harmonious color scheme
• Web Development: Generate and export colors directly to your CSS
• Brand Exploration: Discover new color combinations for branding
• Learning: Understand color relationships and accessibility

Technical Details

Built with modern web technologies for a fast, responsive experience:

• React 18 with hooks for state management
• TypeScript for type safety
• Vite for lightning-fast builds
• Tailwind CSS for styling
• Color.js for color manipulation and accessibility checks

Open Source

This project is open source and available on GitHub. Contributions are welcome!

Check out the repository to:

• Report bugs or request features
• Contribute code improvements
• Learn from the source code
• Fork and customize for your needs

Getting Started

Just visit color-palette-gen.example.com and start generating! No sign-up required.

Keyboard Shortcuts

• Space: Generate new palette
• C: Copy hex code of selected color
• L: Lock/unlock selected color
• E: Open export menu
• ?: Show all shortcuts

Free Forever

Color Palette Generator is completely free to use. No accounts, no limits, no ads. We built it to help the design community, and we're committed to keeping it accessible to everyone.

Happy designing! We hope this tool helps bring your creative visions to life.