Colour Palette Generator

A colour palette generator creates harmonious sets of colours based on colour theory relationships, starting from a single base colour. It is used by graphic designers, web developers, brand managers, and illustrators to build consistent, visually appealing colour schemes for websites, apps, marketing materials, and artwork.

How to Use the Colour Palette Generator

1. Enter a base colour using the colour picker or by typing a HEX code.
2. Select a colour harmony type: complementary, analogous, triadic, split-complementary, tetradic, or monochromatic.
3. Click "Generate" to see the palette of colours based on the selected harmony.
4. Adjust individual colours by clicking and editing their HEX or HSL values.
5. Export the palette as HEX codes, CSS variables, or a PNG swatch file for use in your project.

The Formula

Colour harmonies are calculated by rotating around the colour wheel in HSL (Hue, Saturation, Lightness) space. The hue is expressed as a degree from 0 to 360, representing the full spectrum:

• Red: 0° / 360°
• Yellow: 60°
• Green: 120°
• Cyan: 180°
• Blue: 240°
• Magenta: 300°

The harmony formulas:

Complementary (2 colours): Hue2 = (Hue1 + 180°) mod 360° Direct opposites on the colour wheel; high contrast, vibrant.

Analogous (3-5 colours): Hues at Hue1 +/- 30° and +/- 60°. Adjacent colours; harmonious and low contrast; suitable for calm, cohesive designs.

Triadic (3 colours): Hues at Hue1, Hue1 + 120°, Hue1 + 240°. Evenly spaced; vibrant and balanced when one colour dominates.

Split-Complementary (3 colours): Hue1, (Hue1 + 150°) mod 360°, (Hue1 + 210°) mod 360°. Like complementary but less tension; easier to balance.

Tetradic / Square (4 colours): Hues at Hue1, Hue1 + 90°, Hue1 + 180°, Hue1 + 270°. Rich and complex; requires careful balancing of warm and cool tones.

Monochromatic: Single hue, varied in saturation (10% to 100%) and lightness (20% to 80%). Elegant and unified; ideal for sophisticated or minimal designs.

Real-World Example

A brand designer is building a website with a primary brand colour of deep teal: #008080 (HSL: 180°, 100%, 25%).

Selecting a split-complementary palette:

• Base colour: Hue 180° (Teal)
• Colour 2: (180 + 150) mod 360 = 330° (Rose)
• Colour 3: (180 + 210) mod 360 = 30° (Amber)

Generated palette:

• Primary Teal: #008080 (HSL: 180°, 100%, 25%) - for headings and primary buttons
• Rose: #803354 (HSL: 330°, 60%, 35%) - for accents and call-to-action highlights
• Amber: #7A5200 (HSL: 40°, 100%, 24%) - for warnings and secondary highlights
• Light Teal (monochromatic tint): #E0F5F5 - for page backgrounds
• Dark Teal: #004040 - for footer and dark sections

This gives the designer a varied but cohesive palette grounded in colour theory, with the split-complementary scheme providing enough contrast for visual interest without the jarring opposition of a full complementary pair.

Principles of Colour Theory in Design

Colour harmony describes combinations that are visually pleasing to most people. The concept originates with Johannes Itten's colour theory and Josef Albers's work on simultaneous contrast. In practice, good palettes observe the 60-30-10 rule: the dominant colour covers 60% of the design, the secondary colour 30%, and the accent colour 10%. Warm colours (reds, oranges, yellows) advance visually and create energy or urgency. Cool colours (blues, greens, purples) recede and convey calm or trust. Saturation controls how vivid a colour feels; highly saturated palettes feel energetic while desaturated (muted) tones feel sophisticated and restrained. Lightness affects readability; very dark or very light colours work better as backgrounds than mid-tones.

Frequently Asked Questions

What colour harmony should I use for a professional corporate website? Analogous or monochromatic palettes are most common in corporate design because they feel calm, unified, and trustworthy. A single brand colour with monochromatic tints and shades, supplemented by a neutral grey and white, is a safe and effective approach. Complementary accents can be used sparingly for calls to action.

How many colours should a design palette contain? Most effective palettes use 3 to 5 colours: one primary brand colour, one or two secondary colours, and one or two neutrals (white, black, or grey). Limiting the palette prevents visual clutter and helps maintain a consistent brand identity. Tints (lighter values) and shades (darker values) of each colour extend the palette without adding new hues.

What is the difference between a tint and a shade? A tint is a colour mixed with white, increasing lightness while reducing saturation. A shade is a colour mixed with black, decreasing lightness. Both are monochromatic variations of the same hue. In digital terms, tints increase the L value in HSL while shades decrease it. Most design systems include 9-10 steps of tints and shades for each primary colour.

Can I use a generated palette directly for print design? Generated palettes are in RGB or HEX format, which is correct for screen use. For print, convert the colours to CMYK values using a colour converter, and be aware that highly saturated RGB colours may appear duller in print due to the smaller CMYK colour gamut. Always request a printed proof before finalising a print design to verify colour accuracy.

Also try these free tools:

• Colour Converter
• Contrast Ratio Checker
• CSS Minifier

The harmony offsets as arithmetic

Each harmony type is a fixed set of hue offsets applied to the base hue, and comparing them side by side makes the trade-off between contrast and control visible at a glance.

The wheel is a circle, so every offset is added modulo 360. A base hue of 300 with a complementary offset of 180 lands on 480, which wraps to 120. Getting that wrap right is the whole of the arithmetic, and it is the step most often dropped when a palette is extended by hand.

A split-complementary palette worked through the conversion

Hue arithmetic in HSL is easy to follow because the maths is short, and the split-complementary set from the example above can be reproduced from first principles. Start from the base of teal at HSL, that is hue 180, saturation 100 percent and lightness 25 percent.

The conversion to RGB uses three quantities. The chroma is the range between the highest and lowest channel, calculated as one minus the absolute value of twice the lightness minus one, multiplied by the saturation. At a lightness of 25 percent and full saturation the chroma is 0.5. The second quantity is the intermediate value, and for a hue of exactly 180 degrees it works out to the same 0.5. The third is the amount added back to bring the channels into range, which is the lightness minus half the chroma, or zero here. The result is 0, 127.5 and 127.5 on a scale of 255, and the two half values have to be resolved to whole numbers, which is where the stored colour of #008080 comes from.

Rotating the hue while holding saturation and lightness fixed is what makes the harmony legible, and it produces two more colours from the same two inputs.

The second and third rows sit on a lower saturation than the base, which is a design decision rather than a requirement of the harmony. A palette that holds all three values fixed across the rotation reads as a set of equals. A palette that varies them, as the worked example above does, uses the harmony as a starting position and the saturation and lightness as the expressive part.

Three checks before a palette ships

A palette that looks harmonious on the designer's monitor can still fail on the page, and three checks catch the failures that matter.

The first is contrast. The Web Content Accessibility Guidelines set a minimum contrast ratio of 4.5 to 1 for normal text against its background and 3 to 1 for large text and for interface components. Those ratios come from the relative luminance of the two colours, in which the sRGB channels are linearised and then weighted 0.2126 for red, 0.7152 for green and 0.0722 for blue. Against a white background of #FFFFFF, the colours in the example come out as follows.

The second check is whether the palette survives for a reader who does not separate hues the way the designer does. A set whose members differ only in hue collapses when two of those hues are read as the same colour, and a complementary pair is the most exposed because the two are often used for states that must be told apart. Adding a lightness difference between the members, or pairing each colour with a distinct shape or icon, removes the dependency on hue alone. The lightness column in the table above is the place to look first.

The third check is the printed version, and the page's own questions cover the gamut problem. What is worth adding here is that the ratio arithmetic in the first check is exact while the print conversion is not, so a palette can be verified to the second decimal on screen and still arrive duller than expected from a press.

The 60-30-10 rule in pixels

A proportion is easier to hold to when it is expressed as a size, and the rule scales to whatever the canvas is.

The accent at 10 percent of a laptop width is 144 pixels, which is roughly one button or one icon. Read against those numbers, the rule is less a formula than a warning: a design with three equally weighted colours has already left it, and the accent stops functioning as an accent as soon as its share of the canvas climbs past about a fifth. The dark and light teals in the example are not part of the six colours of the harmony at all. They are steps in the same hue at different lightness values, and they are what gives a page its backgrounds and its footer without adding a seventh competitor to the scheme.

What the harmony arithmetic assumes

The arithmetic above carries three assumptions that a designer should know about.

• Hue, saturation and lightness describe a colour as a rearrangement of its RGB channels rather than as a description of how it is seen. Equal steps in hue are not equal steps in perception, so a palette built from even rotations can look uneven in weight even though the numbers are symmetric. A perceptually uniform space answers that question better, and it is why a designer may nudge a triadic set after generating it.
• Rotating the hue holds saturation and lightness fixed. Every harmony in the first table is defined that way, and any change to the other two values is a separate decision applied on top.
• Monochromatic is the exception. It fixes the hue and varies the other two, which is why it produces no new hues and why it cannot fail on hue harmony.
• All hue arithmetic is modulo 360. Subtracting 60 degrees from a base of 30 gives 330 and not minus 30.