Colour Wheel
Build colour harmonies from the wheel, compare formats and export clean palette codes for design work.
What Colour Wheel Does
Colour Wheel turns one picked colour into a structured set of related colours. Instead of choosing every shade by eye, you can move around the wheel, adjust how many picked palettes are kept, switch the colour value format, and compare harmony rules such as Analogous, Complementary, Triadic, Rectangle, Double Split Complementary, Tetradic and Split Complementary. The result is a practical colour wheel generator for building schemes that can move from visual exploration to usable code.
The main value is control. Colour Wheel shows the active swatch, the current colour value, generated harmony colours, colour variations, blindness simulation, conversion values and a contrast checker area. That combination helps you see whether a chosen hue works as a palette starting point, whether the surrounding colours are close enough or different enough, and whether the values can be copied for CSS, design tokens, documentation or hand-off notes.
Colour Wheel is most useful when a project already has a rough direction but still needs a reliable colour scheme. You might begin with a brand purple, a product accent, a chart colour or a colour sampled elsewhere, then use the harmony options to find candidates for borders, buttons, badges, backgrounds and supporting accents. For deeper palette assembly after the wheel stage, Colour Palette Generator is the natural next step because it focuses on editable palette sets rather than one wheel relationship.
How to Use Colour Wheel
- Pick or adjust the active colour on the wheel until the swatch shows the hue you want to use as the base.
- Use the Picked palettes control to decide how many picked palette entries should be kept while you explore alternatives.
- Open the colour format selector and choose Hex, RGB, HSL, HSV, OKLCH or CMYK depending on the value format you need to copy.
- Open the harmony selector and choose Analogous, Complementary, Triadic, Rectangle, Double Split Complementary, Tetradic or Split Complementary.
- Review Colour Variations, Colour Harmonies, Blindness Simulator, Colour Conversion and Contrast Checker before copying a value.
- Use the copy action beside the active value when you only need one code, or open Export Colours when you need a grouped export.
- In the export panel, choose the export format such as Hex, RGB, HSL or OKLCH, then copy the generated codes.
The visible controls are designed for iteration. A good process is to change one thing at a time: first the base colour, then the harmony rule, then the output format. Changing all three at once makes it harder to understand why a palette became calmer, louder, darker or less readable.
Harmony Options Compared
Each harmony rule answers a different design question. Analogous options stay close to the base hue and usually feel calm. Complementary options move across the wheel and create stronger separation. Triadic, rectangle and tetradic choices produce more variety, but they also require more discipline because too many high-saturation colours can compete for attention.
| Harmony option | What it gives you | Useful when |
|---|---|---|
| Analogous | Nearby hues with a softer relationship | You need a subtle interface palette, chart range or background set |
| Complementary | A strong opposite colour relationship | You need a clear accent, call-to-action contrast or visual separation |
| Triadic | Three hues spaced around the wheel | You need a balanced set with more variety than analogous colours |
| Rectangle or Tetradic | Multiple paired relationships | You need several accents but can control saturation and usage weight |
| Split Complementary | Contrast with less direct opposition | You want energy without the harshness of a direct complement |
Reading Colour Values and Conversions
Colour Wheel is not limited to visual swatches. The format selector matters because different design tasks require different colour notation. HEX is compact and common in CSS and design systems. RGB is direct when a tool or component expects red, green and blue channels. HSL is often easier for describing hue, saturation and lightness adjustments. HSV is useful for picker-style thinking. OKLCH can be helpful when a modern colour workflow needs more perceptual control. CMYK gives a print-oriented reference, although final print production should still be checked in professional design software.
When comparing generated harmonies, avoid treating every number as interchangeable. A colour that looks balanced in HEX may still need lightness adjustment before it works for text, borders or large backgrounds. The conversion panel is a reference point, not a guarantee that every exported value is suitable in every medium.
Using Exported Colours in Real Projects
The export panel is useful when the wheel result needs to move into code, documentation or another design file. Copying one active value is enough for a single accent. Exporting grouped codes is better when you need a complete set of harmony values for a theme draft, style guide note, prototype or CSS variable list.
Keep exported colours labelled by purpose after copying them. For example, call one value primary accent, another supporting accent and another warning or highlight candidate. Names based only on the harmony position can become confusing later, especially when a colour is adjusted after export. If readability is part of the decision, check the foreground and background combination with Colour Contrast Checker before committing the colours to text, buttons or badges.
Common Mistakes to Avoid
- Do not choose a scheme only because the wheel looks balanced; check how the colours behave in the real interface size.
- Do not use every generated colour at equal strength. Most palettes need one dominant colour, one or two accents and several quiet supporting values.
- Do not export before reviewing contrast, especially when a colour will sit behind text or icons.
- Do not mix too many harmony rules in the same project unless each group has a clear role.
- Do not ignore neutral colours. A strong wheel palette often needs greys, whites or near-blacks to give the accents space.
When Colour Wheel Is the Right Starting Point
Colour Wheel is the right starting point when the first question is about hue relationships. It helps you understand what sits near, opposite or around a base colour. That makes it stronger for exploration than for final token naming or full brand governance. Once the direction is clear, refine the exact number of colours, lock important values and export a more controlled set in a palette-focused workflow.
For fast design decisions, keep the process narrow: choose one base colour, test two or three harmony rules, compare the generated values, and export only the combinations that have an immediate purpose. The best result is not the largest group of colours; it is the smallest group that supports the interface, chart, illustration or brand asset without adding visual noise.
Colour Wheel Decisions for Interfaces
Interface colour decisions usually need more than a visually pleasing relationship. A navigation item, badge, alert, chart key and button state can all use related colours, but each role has a different tolerance for brightness and contrast. Colour Wheel helps you separate the relationship decision from the role decision. First choose a harmony that produces useful candidates, then decide which candidate should become the action colour, which should support a secondary state and which should remain decorative.
For product UI work, test the strongest colour in the smallest place it may appear. A saturated complement might work well as a large illustration accent but feel too aggressive as a small border or icon. A quiet analogous colour may look elegant in a palette strip but lack separation when placed beside similar surfaces. The wheel gives the direction; the final interface context decides the weight.
- Use the most saturated harmony colour sparingly when the interface already contains dense content.
- Reserve calmer adjacent colours for surfaces, empty states, chart backgrounds or secondary badges.
- Compare dark and light variants before assigning a colour to text or icons.
- Keep exported codes grouped by intended role, not only by order of appearance.
Keeping Harmony Outputs Usable
A harmony output can contain more colours than a design actually needs. Rectangle, tetradic and split complementary options are useful for exploration, but a production palette should usually select the few colours that solve a real problem. If every generated colour is added to the final system, the interface can lose hierarchy and the palette becomes harder to maintain.
When the export looks promising, reduce it to a working set. Choose one primary colour, one accent, one supporting highlight and any conversion values needed for implementation. Leave the remaining candidates as alternates rather than final tokens. This keeps the colour system easier to document and makes later contrast checks more meaningful.
Final Checks Before Copying Wheel Colours
Before copying the final codes, review the selected harmony against the actual purpose of the colours. If the palette is for interface navigation, the active colour and supporting colours should not compete with content. If the palette is for a chart, each colour should remain distinguishable when placed beside the others. If the palette is for a brand draft, the strongest colour should still feel connected to the intended tone after format conversion.
It is also worth checking whether the same scheme still works in a reduced set. A three-colour version is often easier to apply than a larger harmony group. Copy the values only after the relationship, format and intended role are clear.