UtilibyWritten by the Utiliby editorial team · Last updated October 15, 2026 · Rules and formulas reviewed October 2026
What this free online color wheel does
A colour wheel turns the loose idea of “colours that go well together” into something you can see and measure. This free online color wheel lets you drag a dot anywhere on a full-colour circle, choose a harmony such as complementary, analogous, triadic, split-complementary or tetradic, and see the matching colours appear instantly, each with a HEX code, RGB and HSL values and the nearest colour name.
Unlike most colour wheel tools, it offers both the digital RGB wheel used by screens and the traditional RYB wheel taught in art classes, so you can compare how the same scheme changes. A live preview shows the colours on a mock page, a reference table lists the main hues, and you can export the scheme as CSS variables, JSON or SVG, or print a one-page sheet.
How to use the colour wheel
- Choose a base colour. Drag on the wheel, use the Hue, Saturation and Lightness sliders, or paste any colour code.
- Choose a scheme. Pick complementary, split-complementary, analogous, triadic, tetradic, square, double split, monochromatic or evenly spaced.
- Pick the wheel type. RGB follows screens. RYB follows traditional painting.
- Read the cards. Each shows the HEX code, name, HSL and whether it is warm or cool. Press Copy on any card.
- Test it. Open Live preview to see the colours on a page.
- Export. Copy or download the scheme, or print the sheet.
Keyboard users can focus the wheel and use the arrow keys: left and right change hue and up and down change saturation. Hold Shift for bigger steps.
Colour theory basics: hue, saturation and lightness
Colour theory describes how colours relate. Every colour can be described with three properties. Hue is the position on the wheel, measured as an angle from 0 to 360 degrees. Saturation is how vivid the colour is, from grey in the centre to full colour at the edge. Lightness is how light or dark it is. On this wheel the angle sets the hue, the distance from the centre sets the saturation, and a slider sets the lightness, so the whole wheel brightens or darkens as you move it.
The wheel itself is built from primary colours, secondary colours (mixes of two primaries) and tertiary colours (mixes of a primary and a neighbouring secondary). Twelve main hues is the classic arrangement, and the Colour reference tab lists them for whichever wheel you have chosen.
Colour harmonies explained
| Scheme | How it works | Mood and use |
|---|---|---|
| Complementary | Two colours opposite each other | Maximum contrast. Good for calls to action and sports branding. |
| Split-complementary | A base plus the two neighbours of its opposite | Strong contrast that is easier to balance. |
| Analogous | Three neighbouring colours | Calm, natural and cohesive. Good for backgrounds and illustrations. |
| Triadic | Three colours 120° apart | Vibrant and balanced. Works well with one dominant colour. |
| Tetradic (rectangle) | Two complementary pairs | Rich and varied. Needs a clear dominant colour. |
| Square | Four colours 90° apart | Bold. Vary saturation to avoid chaos. |
| Double split-complementary | Two neighbouring colours and their opposites | Flexible, between tetradic and split. |
| Monochromatic | One hue in several lightness steps | Elegant and safe. Add a contrasting accent for emphasis. |
Whatever the scheme, the 60-30-10 rule helps: use about 60 percent of one colour, 30 percent of a second and 10 percent of an accent. For more variations on one colour, try the Tints and Shades Generator.
RGB wheel versus RYB wheel
The RGB wheel comes from how screens mix light. Red, green and blue are the primaries, and cyan, magenta and yellow are the secondaries. It matches CSS colours, and its complements are red and cyan, green and magenta, and blue and yellow.
The RYB wheel comes from the pigment-mixing tradition of painters and was made famous by artists and teachers such as Johannes Itten. Its primaries are red, yellow and blue, so its complements are the familiar pairs: red and green, blue and orange, and yellow and violet. It is the wheel most people learned at school.
Neither is wrong. Real paints do not follow either wheel perfectly, and screens cannot show every pigment colour. This tool converts the RYB wheel to screen colours with a well-known approximate table, so you get the traditional harmonies in colours you can use on the web. Switch the wheel type and watch the same scheme shift. Check the result against your own eyes, and if you want a modern palette with evenly stepped lightness, the Color Palette Generator works in the OKLCH space.
Warm, cool and neutral colours
Colours are often split into warm (reds, oranges, yellows) and cool (blues, greens, violets). Warm colours seem to advance and feel energetic, friendly and urgent. Cool colours recede and feel calm, trustworthy and spacious. Each card in your scheme is labelled warm, cool or neutral so you can see whether the mix is balanced. A mostly cool scheme with one warm accent draws the eye to the accent, which is why so many apps pair blue with orange.
Using colour schemes in design
- Websites and apps. Choose a base for the brand, a complement for actions and soft tints of the base for backgrounds. Copy the CSS variables straight into your style sheet.
- Branding and logos. Pick two or three colours from a harmony and keep the same set across print and screen.
- Interior design and fashion. Analogous schemes create calm rooms. Use a complement as a small accent.
- Art and illustration. Use the RYB wheel for traditional harmonies and mix greys from complements.
- Charts and data. Evenly spaced hues make categories easy to tell apart, but check colour-blind safety with the Color Blind Test.
Once you have a base colour, use the Color Picker to fine-tune it, and the Color Name Identifier to give each colour a name for your style guide.
Accessibility and contrast
A beautiful scheme can still be unreadable. Harmonious colours often have similar lightness, which makes text hard to read. WCAG asks for a contrast ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text. Use the lightness slider to push one colour of the pair darker or lighter, then verify with the Color Contrast Checker. Do not rely on colour alone to carry meaning, since about one in twelve men and one in two hundred women have a colour vision deficiency.
Tips for better colour schemes
- Let one colour dominate and use the others sparingly.
- Lower the saturation of large areas and keep the vivid colours for small accents.
- Change lightness, not just hue, to create hierarchy.
- Add neutrals: near-white and near-black tints of your base hue look natural.
- Try both wheels. The same idea can feel different.
- Test on dark and light backgrounds and on a phone.
- Use gradients between harmony colours for hero sections.
Accuracy, limits and responsible use
The tool uses standard HSL conversions for the RGB wheel and an approximate, widely used interpolation table for the RYB wheel. Colours are shown in sRGB and rounded to whole numbers, and the nearest colour name is the closest of the 148 CSS colour names, not an official name. Harmonies are guidelines, not laws, and good design often breaks them on purpose. Always check contrast, test on real screens and proof important print colours. This free online colour wheel is a quick, reliable aid for choosing and sharing colours.
Related free tools
Use these free online tools together with this one:
- Create frosted-glass UI effects with the glassmorphism generator.
- Blend two colours and see the result with the color mixer.
- Pull colours out of a photo with the image color picker.
- Use brand colours in an email layout with the HTML email template builder.
- Style a meme with your chosen colours using the meme generator.
- Match an email signature to your brand colours with the email signature generator.
Frequently asked questions
What is a colour wheel?
A colour wheel is a circle that arranges hues in the order they appear in the spectrum, so that related colours sit next to each other and contrasting colours sit across from each other. Designers use it to choose colours that work together.
How do I use a colour wheel to find matching colours?
Pick a base colour, then choose a scheme. Complementary uses the opposite colour, analogous uses neighbours, triadic uses three evenly spaced colours. The tool places the dots and lists each colour with its HEX code.
What are complementary colours?
Complementary colours sit directly opposite each other on the wheel, such as blue and orange or red and green on the traditional wheel. Together they give the strongest contrast.
What are analogous colours?
Analogous colours are neighbours on the wheel, usually within 30 degrees of the base colour. They look calm and cohesive, like a sunset or a forest.
What is a triadic colour scheme?
A triadic scheme uses three colours spaced evenly, 120 degrees apart. It is lively and balanced. Let one colour dominate and use the other two as accents.
What is a split-complementary scheme?
It uses a base colour and the two colours on either side of its complement. It keeps strong contrast but is easier to balance than a straight complementary pair.
What is a tetradic or rectangle scheme?
It uses two complementary pairs that form a rectangle on the wheel. It offers a rich range of colours and works best when one colour is dominant.
What is the difference between the RGB and RYB colour wheel?
The RGB wheel is based on mixing light and is used on screens, with red, green and blue as primaries. The RYB wheel is the traditional painter's wheel with red, yellow and blue as primaries. Their complements differ, for example the complement of red is cyan on RGB but green on RYB.
Which colour wheel should I use for web design?
Use the RGB wheel if you want colours that match the maths of screens and CSS. Use the RYB wheel if you prefer the traditional harmonies taught in art classes. Many designers try both.
What are warm and cool colours?
Warm colours such as red, orange and yellow feel energetic and close. Cool colours such as blue, green and violet feel calm and distant. The tool labels each colour in your scheme as warm, cool or neutral.
What are primary, secondary and tertiary colours?
Primary colours are the starting colours of a wheel. Secondary colours are made by mixing two primaries. Tertiary colours are made by mixing a primary with a neighbouring secondary.
What does saturation and lightness do on the colour wheel?
Saturation is how vivid a colour is, from grey at the centre to full colour at the edge. Lightness moves a colour toward black or white. Together with hue they define any colour.
How do I find the complementary colour of a HEX code?
Paste the HEX code into the base colour box and choose Complementary. The second card shows the opposite colour with its HEX code. Switch the wheel type to compare RGB and RYB results.
Can I download or copy the colour scheme?
Yes. Copy the HEX codes, or download the scheme as CSS variables, JSON, SVG swatches or a plain list from the Export tab.
Can I print the colour wheel?
Yes. Use Print / save scheme to print or save a one-page sheet with the wheel, the swatches, the codes and the CSS. Only the scheme is printed, not the whole page.
Do the colours pass accessibility contrast rules?
Matching colours are not automatically readable. Check text and background pairs with a contrast checker, aiming for at least 4.5 to 1 for normal text.
Is this colour wheel free?
Yes. It is a free online colour wheel with no sign-up, and nothing you choose leaves your browser.
Sources and further reading
- Wikipedia, Color wheel.
- Wikipedia, Color scheme.
- Wikipedia, RYB color model.
- W3C, CSS Color Module Level 4.
- W3C, WCAG 2.1, Success Criterion 1.4.3 Contrast (Minimum).
- Johannes Itten, The Art of Color (1961), a classic text on colour contrasts and harmonies.
Sources were consulted in October 2026. Standards and rules can change, so always check the official page for your situation.