Color is one of the most powerful tools in design — and one of the hardest to get right intuitively. The colours you choose affect brand perception, user trust, readability, and emotional response. A colour palette generator removes the guesswork by applying colour theory mathematically.
Whether you're building a website, designing a logo, or prototyping a UI, starting with a coherent palette makes every subsequent design decision easier.
Generate a Colour Palette
Color Palette Generator
Generate 5-color palettes using 6 harmony modes. Export as CSS vars, Tailwind, or JSON.
How Colour Palette Generators Work
Palette generators use the colour wheel and colour theory relationships to produce harmonious combinations. They work in HSL (Hue, Saturation, Lightness) or HSV colour space rather than RGB, because HSL maps more naturally to how humans perceive colour relationships.
Given a base colour, the generator calculates related colours based on one of several harmony rules:
Colour Harmony Rules
Complementary
Two colours directly opposite on the colour wheel (180° apart). High contrast, energetic, attention-grabbing.
Base: Blue (#2563EB) → Complement: Orange (#EB6325)
Best for: Call-to-action buttons, alert states, high-contrast designs.
Analogous
Three colours adjacent on the wheel (30° apart). Natural, cohesive, comfortable to look at.
Base: Blue (#2563EB) → Teal (#25A9EB) → Purple (#6325EB)
Best for: Backgrounds, gradients, brand colour systems with clear hierarchy.
Triadic
Three colours evenly spaced at 120° intervals. Vibrant, balanced, more complex than complementary.
Base: Blue (#2563EB) → Red (#EB2563) → Green (#63EB25)
Best for: Playful, energetic brands; use one colour as dominant and the others as accents.
Split-Complementary
The base colour plus the two colours adjacent to its complement. More nuanced than pure complementary, less tension.
Base: Blue (#2563EB) → Yellow-Orange (#EBA125) → Red-Orange (#EB4925)
Best for: Designs that need contrast without harshness.
Tetradic (Square)
Four colours evenly spaced at 90° intervals. Rich and complex — requires careful balance.
Best for: Complex illustration, branding with multiple sub-brands, diverse UI component libraries.
Monochromatic
A single hue with multiple shades and tints (varying lightness and saturation). Elegant, minimal, highly sophisticated.
Base: Blue (#2563EB) → Shades: #1D4ED8, #1E40AF → Tints: #60A5FA, #BFDBFE
Best for: Minimal UI design, dark modes, high-end corporate brands.
Colour Palette Anatomy
A complete design palette usually has five roles:
| Role | Purpose | Example |
|---|---|---|
| Primary | Main brand colour; most used | Brand blue |
| Secondary | Supports primary; used for accents | Complementary orange |
| Neutral | Backgrounds, text, dividers | Greys, off-whites |
| Semantic | Success, error, warning, info | Green, red, amber, blue |
| Surface | Card backgrounds, overlays | Near-white, near-black |
Applying Your Palette in CSS
Once you have your colours, define them as CSS custom properties (variables) at the :root level. This makes your entire design themeable from one location.
:root {
/* Brand colours */
--color-primary: #2563EB;
--color-primary-dark: #1D4ED8;
--color-primary-light: #60A5FA;
/* Secondary */
--color-secondary: #EB6325;
/* Neutrals */
--color-text: #111827;
--color-text-muted: #6B7280;
--color-bg: #F9FAFB;
--color-surface: #FFFFFF;
/* Semantic */
--color-success: #10B981;
--color-error: #EF4444;
--color-warning: #F59E0B;
}
/* Usage */
button.primary {
background-color: var(--color-primary);
color: #fff;
}
button.primary:hover {
background-color: var(--color-primary-dark);
}
Colour Accessibility: The 4.5:1 Rule
Colour harmony is not enough — your palette must also be accessible. WCAG 2.1 requires:
- Normal text (< 18pt): Minimum 4.5:1 contrast ratio between text and background
- Large text (≥ 18pt bold or 24pt regular): Minimum 3:1 contrast ratio
- UI components and icons: Minimum 3:1 against adjacent colours
A beautiful palette that fails contrast checks means a significant portion of your users — including the 1 in 12 men with colour blindness — will struggle to read your content.
Always verify palette combinations against a contrast checker before finalising.
Colour Psychology in Branding
| Colour | Common Associations | Brands |
|---|---|---|
| Blue | Trust, stability, technology, calm | Facebook, PayPal, Samsung |
| Green | Growth, health, nature, money | Spotify, WhatsApp, Whole Foods |
| Red | Energy, urgency, passion, danger | YouTube, Netflix, Coca-Cola |
| Orange | Enthusiasm, creativity, warmth | Amazon, Fanta, Harley-Davidson |
| Purple | Luxury, creativity, wisdom | Cadbury, Hallmark, Twitch |
| Yellow | Optimism, clarity, caution | McDonald's, IKEA, Snapchat |
| Black | Sophistication, power, elegance | Apple, Nike, Chanel |
| White | Simplicity, cleanliness, minimalism | Apple, Tesla, minimalist UI |
Colour psychology is culturally influenced — these associations are strongest in Western markets and may differ significantly in other cultures.
Exporting Palette Colours
Once you've built a palette, document it in the formats your team needs:
- HEX for web CSS and design tools
- RGB for applications that don't support HEX
- HSL for programmatic colour manipulation and CSS variables
- OKLCH for the most perceptually uniform modern CSS colour (supported in all modern browsers)
Privacy Note
FluxToolkit's colour palette generator runs entirely in your browser. Colour values you generate are not transmitted to our servers or stored in any form.
Frequently Asked Questions
How many colours should a design palette have?
A typical UI design palette has 5–8 colours: 1–2 brand colours, 3–4 neutrals (including white and near-black), and 3–4 semantic colours (success, error, warning, info). More than 10 colours usually indicates a lack of system thinking.
Should I use HEX or HSL in my CSS?
Modern CSS supports both. HSL is often more intuitive for adjusting colours programmatically (increase lightness by 10%, decrease saturation). OKLCH is the most perceptually accurate modern format. HEX is most familiar and universally supported.
Can I generate a palette from an existing brand colour?
Yes — input your brand's primary HEX colour and use the harmony rules to generate complementary and supporting colours. Most palette generators accept any base colour.
What's the difference between a tint, shade, and tone?
- Tint: Original colour + white (lighter)
- Shade: Original colour + black (darker)
- Tone: Original colour + grey (more muted/desaturated)
Does FluxToolkit store the colours I generate?
No. Everything runs client-side. Your palette is not recorded anywhere.
Related Articles
- Color Picker: HEX, RGB, HSL Guide — Pick and convert individual colours.
- CSS Color Formats Guide — Understand HEX, RGB, HSL, and OKLCH in depth.
- Color Contrast Accessibility Guide — Verify your palette meets WCAG contrast ratios.
- CSS Gradient Generator Guide — Build gradients from your palette colours.
- Favicon Generator Guide — Apply your brand palette to a favicon.