Color Palette Generator
Generate harmonious color palettes with color theory, lock favorites, and export as CSS, SCSS, JSON, or Tailwind. 100% client-side.
💡 Click lock (🔒) to keep colors while shuffling
primary
rgb(20, 225, 85)
hsl(139, 84%, 48%)
secondary
rgb(20, 225, 188)
hsl(169, 84%, 48%)
accent
rgb(20, 160, 225)
hsl(199, 84%, 48%)
muted
rgb(20, 57, 225)
hsl(229, 84%, 48%)
surface
rgb(85, 20, 225)
hsl(259, 84%, 48%)
:root {
--color-primary: #14E155;
--color-secondary: #14E1BC;
--color-accent: #14A0E1;
--color-muted: #1439E1;
--color-surface: #5514E1;
}🔒 100% private: All generation happens in your browser. Click any HEX to copy it. Works offline.
About Color Palette Generator
Color palettes are the foundation of good design — they set the mood, guide attention, and create visual hierarchy. Professional designers use color theory to build palettes: analogous colors sit next to each other on the wheel (harmonious), complementary colors are opposite (high contrast), triadic colors form a triangle (balanced), and tetradic uses two complementary pairs (rich and varied). This tool generates palettes based on these rules, lets you lock colors you like, and shuffle the rest to explore variations. You can export your palette as CSS custom properties, SCSS variables, JSON, or a Tailwind config snippet — ready to drop into any project. Everything runs in your browser.
How It Works
- Choose a harmony rule: Analogous, Complementary, Triadic, Tetradic, Monochromatic, or Split-Complementary.
- Click "Generate" to create a fresh palette, or pick a base color from the color picker.
- Click the lock icon (🔒) on colors you want to keep; shuffle only updates the unlocked ones.
- Export as CSS, SCSS, JSON, or Tailwind config — copy or download.
✨ Key Features
- ✓6 color harmony rules (analogous, complementary, triadic, tetradic, monochromatic, split-complementary)
- ✓Live color picker for the base color
- ✓Lock individual colors while shuffling
- ✓Click any swatch to copy its HEX
- ✓Export as CSS custom properties
- ✓Export as SCSS variables
- ✓Export as JSON
- ✓Export as Tailwind config snippet
- ✓Shows HEX, RGB, and HSL for each color
- ✓Random palette generator
- ✓100% client-side — no data sent to any server
🎯 Common Use Cases
- →Designing a color palette for a new website or app
- →Building a design system color scale
- →Creating a brand color palette
- →Choosing colors for a presentation or poster
- →Exploring color combinations for illustration
- →Generating CSS variables for a project
- →Creating a Tailwind theme color set
- →Learning color theory by experimenting
💡 Advanced Tips & Pro Insights
- ▸Analogous palettes (colors next to each other on the wheel) create calm, harmonious designs. Complementary palettes (opposite colors) create high contrast and energy.
- ▸The 60-30-10 rule: use 60% dominant color, 30% secondary, and 10% accent. This works for almost any palette.
- ▸For accessibility, ensure contrast between text and background is at least 4.5:1 (WCAG AA). Darker colors work better for text on light backgrounds.
- ▸Modern CSS custom properties (--color-primary: #hex) make palettes easy to theme. Export as CSS to get them ready to paste.
- ▸Lock 1–2 colors before shuffling when you want to keep a brand color while exploring accents.
Frequently Asked Questions
Is this color palette generator free?▾
Yes, this color palette generator is completely free with no signup, email, or usage limits.
Is my data safe?▾
Yes, 100% safe. All palette generation happens in your browser. No data is sent to any server.
What are color harmony rules?▾
Color harmony rules are mathematical relationships on the color wheel that produce visually pleasing combinations. Common rules: analogous (neighbors), complementary (opposites), triadic (triangle), tetradic (rectangle), and monochromatic (single hue).
What is the difference between HEX, RGB, and HSL?▾
HEX is a 6-digit code (#FF5733) used in CSS/HTML. RGB defines colors as red, green, blue values (0-255). HSL defines colors by hue (0-360°), saturation (0-100%), and lightness (0-100%) — better for design adjustments.
How do I export my palette?▾
Choose the export format (CSS, SCSS, JSON, or Tailwind config) and click the "Copy" button. The snippet is ready to paste into your project.
What does "lock" do?▾
Locking a color prevents it from changing when you shuffle. Use it to keep your brand colors while exploring accent variations.
How many colors should a palette have?▾
For most projects, 5 colors work well: 1 primary, 1 secondary, 1 accent, plus 1–2 neutrals. Larger palettes (7–9 colors) work for design systems with multiple shades.
Can I use these palettes in commercial projects?▾
Yes. Color values (HEX, RGB, HSL) are not copyrightable. You can freely use any generated palette in personal or commercial projects.