Color Palette Generator

Choosing the right colour palette is one of the most impactful decisions in any web design project. Colour communicates brand personality, guides user attention, establishes visual hierarchy, and affects accessibility. Yet colour selection is often approached intuitively rather than systematically, leading to palettes that clash, lack contrast, or feel inconsistent across a product. Understanding colour theory — the science behind harmonious colour relationships — transforms palette selection from guesswork into a reliable, repeatable process.

The Four Main Palette Types

Complementary palettes pair colours from opposite sides of the colour wheel — blue and orange, red and green, yellow and purple. These combinations create maximum contrast and visual energy. Complementary colours are excellent for calls to action, where you want the button or highlight to stand out dramatically from the background. The classic combination of a blue interface with orange accents is a complementary palette in action.

Analogous palettes use colours adjacent on the colour wheel — blue, blue-green, and teal, for example. Analogous palettes are harmonious and easy on the eye, making them ideal for backgrounds, subtle UI surfaces, and interfaces that should feel calm and cohesive. Many nature-inspired designs and wellness brands use analogous palettes for their serene quality.

Triadic palettes space three colours evenly around the colour wheel — red, yellow, and blue, for example. Triadic palettes are vibrant and balanced, offering variety without the jarring contrast of complementary pairs. They require careful application — typically one dominant colour and the other two used as accents to avoid a chaotic result.

Monochromatic palettes use different shades, tints, and tones of a single hue. They are the most cohesive and easiest to apply successfully, making them a safe choice for professional and minimal interfaces. Varying lightness and saturation within a single hue creates depth and hierarchy without introducing the complexity of multiple hues.

CSS Custom Properties for Design Tokens

Our generator exports your palette as CSS custom properties (variables), which are the modern standard for managing design tokens. Define your palette once in :root and reference the variables throughout your CSS. This means updating your entire site's colour scheme becomes a matter of changing a handful of variable values in one place. It also makes theming (light/dark mode, brand variants) straightforward and maintainable.

Colour Accessibility: Contrast Ratios

WCAG 2.1 (Web Content Accessibility Guidelines) require a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text against the background. Approximately 8% of men and 0.5% of women have some form of colour blindness, so relying on colour alone to convey information is an accessibility failure. Always pair colour cues with text labels, icons, or patterns. Use tools like the WebAIM Contrast Checker to verify that your palette's text and background combinations meet accessibility standards before deploying.

Semantic Colour Usage

Beyond aesthetic choices, colours carry semantic meaning in UI design. Green is universally associated with success, confirmation, and go. Red signals errors, danger, and stop. Yellow and amber indicate warnings. Blue communicates trust, information, and links. These associations are so deeply ingrained that violating them — using red for success messages, for example — creates cognitive friction and confusion. Reserve your brand colours for brand expression and use semantic colours consistently for system states.

Building a Full Design System Palette

A production design system typically needs more than 4–5 colours. The standard approach is to generate a tonal scale — typically 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 — for each key hue, following the pattern established by Tailwind CSS and Material Design. The 500 value is typically the base/brand colour; lower numbers are lighter tints; higher numbers are darker shades. This scale gives you the full range of tints needed for backgrounds, borders, text, and interactive states.