Color Palette Generator

About Color Palette Generator

Colour Harmony Modes Explained

Each mode applies a specific rule from colour theory to the HSL wheel so that the resulting palette has a mathematical relationship, not just five random swatches. The rules below trace back to Johannes Itten's 1961 book The Art of Color and the Munsell colour system published in 1905, both still standard references in art schools and design programmes.

Mode	How It Works	Visual Feel	Best For
Analogous	Colours adjacent on the wheel (within ~30° of each other)	Harmonious, calm, low contrast	Backgrounds, gradients, nature-inspired designs
Complementary	Colours opposite on the wheel (180° apart)	High contrast, vibrant, attention-grabbing	Call-to-action buttons, feature highlights, sports branding
Triadic	Three colours equally spaced (120° apart)	Balanced, colourful, dynamic	Illustrations, dashboards, playful designs
Monochromatic	Single hue with different saturation and lightness values	Cohesive, elegant, professional	Corporate branding, minimal UI, text-heavy layouts
Random	No constraint - purely random HSL values	Unpredictable, experimental	Exploration, finding unexpected combinations

The 60-30-10 Rule

A five-colour palette gives you more than enough to follow the classic design proportion rule. The idea is to use a dominant colour for 60% of the design, a secondary colour for 30%, and an accent for 10%.

Role	Proportion	Where to Use It	Which Palette Colour
Primary / Dominant	60%	Backgrounds, large surfaces, negative space	Lightest or most neutral colour in the palette
Secondary	30%	Cards, sections, navigation, secondary backgrounds	A mid-tone from the palette
Accent	10%	Buttons, links, icons, highlights, CTAs	The most vibrant colour in the palette
Text / Dark	-	Body text, headings	Darkest colour or near-black
Muted / Border	-	Borders, dividers, disabled states, subtle backgrounds	Desaturated or light variant

How to Use the Generator

Feature	How It Works
Generate button	Creates a new five-colour palette in the selected harmony mode
Spacebar shortcut	Same as clicking Generate - quick way to cycle through options
Lock icon	Keeps that colour fixed when regenerating the others
Click a swatch	Shows HEX, RGB, and HSL values with copy buttons
Export as CSS Variables	Copies the full palette as CSS custom properties ready for your stylesheet

Colour Formats Available

Every colour in the palette shows three formats. Each serves a different purpose in design and development:

Format	Example	Best For
HEX	#3B82F6	CSS, design tools (Figma, Sketch), quick copy-paste
RGB	rgb(59, 130, 246)	CSS, when you need to add alpha (rgba), JavaScript
HSL	hsl(217, 91%, 60%)	Adjusting lightness or saturation programmatically, creating tints and shades

Building a Design System Palette

A five-colour palette is a starting point, not a complete design system. To build a full set of colours for a real project, you typically need shades and tints of each base colour. Here is a practical workflow:

Step	What to Do	Tool
1. Generate base colours	Use this palette generator to find 3-5 base colours	This tool
2. Create shade scales	Generate 50-950 shade scales for each base colour	Colour Shades Generator
3. Check contrast	Test every text/background pair against WCAG AA and AAA	Colour Contrast Checker
4. Convert formats	Get colours in HEX, RGB, HSL, or CMYK as needed	Colour Converter

Colour Psychology Quick Reference

Colour Family	Common Associations	Often Used In
Blue	Trust, calm, professionalism, security	Finance, healthcare, tech, social media
Green	Growth, nature, health, money	Environment, health, finance, organic brands
Red	Energy, urgency, passion, danger	Sales, food, entertainment, warnings
Orange	Friendly, energetic, playful, affordable	Ecommerce, food delivery, creative agencies
Purple	Luxury, creativity, wisdom, spirituality	Beauty, premium brands, education
Yellow	Optimism, warmth, attention, caution	Children's brands, construction, highlights
Black / Dark Grey	Sophistication, luxury, power, elegance	Fashion, automotive, premium products
White / Light Grey	Clean, minimal, spacious, modern	Tech, healthcare, minimalist brands

HSL, HEX, and RGB: Why This Tool Uses HSL Internally

HSL (Hue, Saturation, Lightness) is the only format that lets you apply colour theory rules with simple arithmetic. The harmony modes above all work by rotating the hue angle - complementary adds 180°, triadic adds 120° twice, analogous takes small ±15-30° steps. Doing the same maths in HEX or RGB would require converting to HSL, rotating, then converting back every time. The W3C CSS Color Module Level 4 specification defines HSL conversion formulas that every modern browser follows identically, so the hex output is consistent across Chrome, Firefox, and Safari.

Worked example: For a triadic palette with base HSL(200, 70%, 50%) - a mid-blue - the three hues become 200°, 320° (magenta), and 80° (lime green). Converted to hex these are roughly #26A6CC, #CC26A3, and #A3CC26. You can verify this in any browser dev tools by typing hsl(200, 70%, 50%) in a colour picker.

Designing for WCAG Contrast

A palette only works if the text on top of it is readable. WCAG 2.2 (published October 2023) requires a contrast ratio of at least 4.5:1 for normal body text and 3:1 for large text (18pt+ or 14pt bold). The contrast ratio is calculated from the relative luminance of each colour, which weights green much more heavily than red or blue because human eyes are most sensitive to green wavelengths.

WCAG Level	Normal Text	Large Text (18pt+)	UI Components
AA (minimum)	4.5:1	3:1	3:1
AAA (enhanced)	7:1	4.5:1	Not specified

Dark palette colours (lightness 10-25) almost always need white text on top; light palette colours (lightness 70+) need near-black. Mid-tone colours (lightness 40-60) are the tricky zone - they often fail AA with both white and black text, which is why the 60-30-10 rule places the most vibrant mid-tone as the 10% accent rather than the body background. Run every text/background combination through the Colour Contrast Checker before shipping.

What About Colour Blindness?

Around 8% of men and 0.5% of women have some form of red-green colour blindness (deuteranopia or protanopia), per the UK's Colour Blind Awareness charity citing prevalence data from the Colour Blind Organisation. Tritanopia (blue-yellow) affects fewer than 0.01%. A palette that relies on red and green as its only differentiator will fail about 1 in every 12 male users - commonly a problem with status colours (red error / green success) on dashboards.

Practical rules that survive colour-vision deficiency:

• Pair colour with shape, icon, or text label. Never use colour alone to signal state.
• Test palettes with tools like Stark or Coblis that simulate the three main types.
• Use lightness contrast, not hue contrast, to distinguish important elements.
• Blue vs yellow survives red-green blindness and is a safe high-contrast pair.

Exporting the Palette

The Export button produces ready-to-paste code in four formats. Use whichever matches your project:

Format	Output Example	Best For
CSS Variables	:root { --color-primary: #3B82F6; }	Vanilla CSS, design tokens, any modern stack
Tailwind Config	theme.extend.colors.primary	Tailwind projects - paste into tailwind.config.js
SCSS Variables	$color-primary: #3B82F6;	Sass/SCSS projects, older codebases
JSON	{"primary": "#3B82F6"}	Style Dictionary, design-token pipelines, Figma plugins

Common Mistakes When Choosing a Palette

• Too many saturated colours. A palette where every hue is at 80%+ saturation looks loud and fights for attention. Keep one vibrant accent and desaturate the rest.
• Ignoring the dark mode counterpart. A palette that works on a light background often has failing contrast on dark. Generate shades for both before committing (shades generator).
• Forgetting a neutral. Five equally weighted colours leave no room for borders, dividers, or muted backgrounds. Either pick a monochromatic palette or add a grey scale separately.
• Copying a trend without checking accessibility. Dribbble-style gradients often have terrible contrast. The popular purple-to-pink combo can fail WCAG AA for body text at the mid-point.
• Using pure #000000 and #FFFFFF. Dribbble and Apple Human Interface Guidelines both recommend off-black (#1A1A1A or similar) and off-white (#FAFAFA) for less eye strain and softer contrast.

Where Harmony Rules Come From

The 12-spoke colour wheel most designers use today was formalised by Johannes Itten at the Bauhaus between 1919 and 1923. Isaac Newton's 1704 Opticks first arranged the visible spectrum into a circle, and Moses Harris published the first colour wheel with explicit complementary pairs in 1766. Modern HSL maps directly onto this historical wheel - hue 0° is red, 120° is green, 240° is blue, with the complementary rule (+180°) producing the canonical cyan/red, magenta/green, and yellow/blue pairs that painters have used for three centuries.

One caveat: HSL is a perceptually non-uniform colour space. Two colours that are 20° apart in hue may look very different depending on where they sit on the wheel (green-to-yellow feels subtle, red-to-magenta feels dramatic). If perceptual uniformity matters - for data visualisation or scientific plots - consider generating palettes in OKLCH or LAB instead, both supported in CSS Color Module Level 4 since 2023.

All colour generation happens in your browser using HSL colour maths. No external services are involved and no data leaves your device.

Sources

• W3C - CSS Color Module Level 4
• W3C - WCAG 2.2 Contrast Minimum (1.4.3)
• Colour Blind Awareness - Prevalence Data
• MDN - HSL Colour Values
• Bauhaus100 - Johannes Itten
• Apple Human Interface Guidelines - Color
• Material Design 3 - Accessible Design