Interactive Colour Wheel & Palette Generator

How to Use a Colour Wheel

Learning how to use a colour wheel starts with one base colour. Enter your colour, choose a harmony and the linked points show its theoretical relationship to the other hues. The palette generator turns that relationship into five practical swatches, separating the core harmony colours from supporting tonal variants.

1. Enter a base colour in HEX, RGB, HSL or OKLCH, or use the native colour input
2. Choose complementary, analogous, triadic, split-complementary or tetradic harmony
3. Drag any linked point to change hue and saturation while preserving the selected relationship
4. Use the lightness slider to make the complete palette lighter or darker
5. Review the labelled core colours and supporting variants, then copy individual values or the full palette

Understanding the Colour Wheel

A colour wheel arranges hues around a circle so their relationships are easy to see. Hue changes as you move around the wheel, saturation increases as you move from the centre towards the edge, and the separate lightness slider controls how light or dark the palette appears.

When using a colour wheel here, the connected points move as one system. Dragging a core or supporting point rotates the complete harmony instead of breaking its geometry, so you can explore alternatives without losing the selected colour relationship.

Choose a Colour Harmony

Colour harmony describes a geometric relationship between hues. Select a rule to change the linked points and generated swatches instantly. This colour harmony tool helps you explore combinations; it does not guarantee readable text or WCAG contrast.

For accessibility measurements, check the final foreground and background pair in the Contrast Checker.

Complementary, Analogous, Triadic, Split-Complementary and Tetradic Palettes

• Complementary colours — the base colour and the hue opposite it, creating the strongest visual separation of the five options.
• Analogous colours — the base colour and neighbouring hues, creating a closely related and cohesive palette.
• Triadic colour palette — three core hues evenly spaced around the wheel for clear variety with balanced geometry.
• Split-complementary colours — the base colour and two hues beside its opposite, retaining contrast with more nuance than a direct complement.
• Tetradic colour scheme — four core hues spaced around the wheel, providing the broadest range of the available harmonies.

Core Harmony Colours and Supporting Tones

Every result contains five swatches, but they do not all play the same role. The larger, labelled wheel points and the first swatch group are the core harmony colours defined by the selected rule. Complementary has two core colours, analogous, triadic and split-complementary have three, and tetradic has four.

The remaining swatches are supporting tonal variants of those core hues. They adjust saturation or lightness to make the theoretical relationship more useful for backgrounds, surfaces, accents and hierarchy while keeping the main harmony easy to recognise.

Create a Five-Colour Palette from One Base Colour

Start with a colour already used in your brand, interface or artwork. The generator keeps it as the labelled base colour, calculates the selected harmony and expands the result to five swatches. This makes it easy to compare several palette directions without suggesting that every swatch has equal importance.

If your starting point is an image, use the Image Palette Extractor for dominant image colours. To sample one exact pixel instead, use the Colour Picker.

Enter HEX, RGB, HSL or OKLCH Colour Values

The base-colour field accepts HEX, RGB, HSL and OKLCH input. Wheel changes are written back as uppercase HEX. You can copy an individual swatch in HEX or RGB, or copy the complete palette as a comma-separated line of uppercase HEX values.

Need a dedicated format conversion rather than a harmony palette? Use the Colour Converter.

Private Interaction with Mouse, Touch or Keyboard

All calculations happen in your browser. There is no signup, upload or server processing, and the tool does not store your palettes. Use a mouse, touch input or the keyboard to adjust the wheel; visible values and labels mean you do not need to rely on colour alone to understand the result.

Frequently Asked Questions

How do you use a colour wheel?

Choose one base colour, then select a harmony to place related hues around the wheel. Drag a linked point to change hue and saturation, adjust lightness with the slider, and review the five generated swatches before copying the colours you need.

What does a colour wheel show?

A colour wheel shows how hues relate around a circle. Opposite hues are complementary, nearby hues are analogous, and evenly spaced hues can form triadic or tetradic relationships. In this tool, distance from the centre also represents saturation.

How do I create a palette from one base colour?

Enter the base colour in the field or native colour input and select a harmony. The tool preserves your base, calculates the core harmony colours and adds supporting tonal variants to produce five swatches.

What is the difference between complementary and analogous colours?

Complementary colours sit opposite each other and provide strong separation. Analogous colours sit near each other and usually feel more closely related. The wheel displays both relationships so you can compare them from the same base colour.

What is a triadic colour palette?

A triadic palette uses three core hues spaced evenly around the wheel. This generator adds two supporting tonal variants to those core colours, creating a practical five-colour result.

What is a split-complementary colour scheme?

A split-complementary scheme combines the base colour with the two hues beside its direct complement. It keeps noticeable hue contrast while offering more variety than a two-colour complementary relationship.

Why does every palette contain five colours?

Five swatches provide a consistent, practical palette size across all harmony types. The theoretical harmony determines two to four core colours, and supporting tonal variants fill the remaining positions without changing the selected relationship.

What are core harmony colours and supporting variants?

Core harmony colours are the principal hues defined by the selected geometry, including the labelled base colour. Supporting variants reuse core hues with adjusted saturation or lightness for secondary design roles. The interface separates and labels both groups.

What colour formats can I enter and copy?

You can enter HEX, RGB, HSL or OKLCH. Individual swatches can be copied in HEX or RGB, and Copy palette provides all five colours as comma-separated uppercase HEX values.

Are ‘colour wheel’ and ‘color wheel’ the same thing?

Yes. ‘Colour wheel’ is the British English spelling and ‘color wheel’ is the American English spelling. Both describe the same arrangement of hues and colour relationships.

Does the tool upload or store my colours?

No. Palette calculations run locally in your browser, with no upload, account or server processing. The tool does not store your palette between sessions, so copy the values you want to keep.

Is this a color harmony checker?

It is a colour harmony generator: it visualises theoretical hue relationships and creates practical swatches. It does not judge whether a palette is suitable for every design or meets contrast requirements; use the separate Contrast Checker for WCAG measurements.