Color Wheel
Interactive colour wheel: pick a colour, get complementary, triadic, analogous and other harmonies with HEX, RGB, HSL, CMYK and contrast checks.
About this tool
Color Wheel
Interactive colour wheel: pick a colour, get complementary, triadic, analogous and other harmonies with HEX, RGB, HSL, CMYK and contrast checks.
This colour wheel lets you choose a base colour by dragging across a hue-and-saturation disc, with a slider for brightness (HSV) or lightness (HSL). Pick a harmony — complementary, split-complementary, analogous, triadic, tetradic, square or monochromatic — and the matching colours appear as markers you can drag to rotate the whole scheme. Every swatch shows its HEX code and its WCAG contrast ratio against white and black, and the base colour can be typed or copied as HEX, RGB, HSL or CMYK. Export the palette as CSS variables, SCSS, JSON or a PNG image, and save palettes in your browser for later.
How to use Color Wheel
- 1
Open Color Wheel on AltFTool — it loads instantly in your browser.
- 2
Drag on the wheel (or focus it and use the arrow keys, Shift for 10° steps) to set the base hue and saturation, and use the Brightness or Lightness slider; switch HSV or HSL at the top.
- 3
Choose a harmony such as Complementary, Triadic, Split-complementary or Square; drag any marker to rotate the scheme, or press Random (R key) for a new base colour.
- 4
Check each swatch's contrast on white and on black (AA, AAA or Fail), press Copy for its HEX code, or Base to make it the new base colour.
- 5
Under Export palette pick CSS variables, SCSS, JSON or HEX list and press Copy, Download or PNG; press Save palette to keep it in Saved palettes.
Why use Color Wheel
Drag the whole harmony
Grab any marker on the wheel and the scheme rotates together, keeping the angles of complementary, triadic or square relationships exact while you explore.
Every format, two-way
Type a HEX code, RGB, HSL or CMYK values and the wheel jumps to that colour; copy each format with one click.
Accessibility built in
Each swatch shows its contrast ratio on white and on black with an AA, AAA or Fail grade, so you can rule out unreadable combinations before you design with them.
Export and keep
Copy or download CSS custom properties, SCSS variables, JSON or a 1200 × 630 PNG, and save palettes in this browser to reload later.
Colour harmony types and hue angles
| Harmony | Colours | Hue offsets from base |
|---|---|---|
| Complementary | 2 | 0°, 180° |
| Split-complementary | 3 | 0°, 150°, 210° |
| Analogous | 3 | −30°, 0°, +30° |
| Triadic | 3 | 0°, 120°, 240° |
| Tetradic (rectangle) | 4 | 0°, 60°, 180°, 240° |
| Square | 4 | 0°, 90°, 180°, 270° |
| Monochromatic | 5 | Same hue; saturation and brightness vary |
Angles are on the RGB hue circle used by screens (red 0°, green 120°, blue 240°).
Common use cases
- You have a brand colour and need two or three accent colours that work with it for a website, slide deck or logo, without guessing.
- You are choosing button and text colours and want to see straight away which palette colours pass WCAG AA contrast on a white or dark background.
- You are a student or illustrator learning colour theory and want to see how complementary, triadic and analogous schemes relate on a real wheel.
Frequently asked questions
How do you use a color wheel?
Pick a starting colour, then use fixed angles on the wheel to find colours that work with it. Opposite colours (180°) are complementary and give strong contrast; neighbours within about 30° are analogous and feel calm; three colours 120° apart form a triad. On this wheel you choose the harmony and the matching colours are placed for you.
What are complementary colors?
Complementary colours sit directly opposite each other on the colour wheel, 180° apart in hue — for example blue and orange, or red and cyan in the RGB wheel. They create the strongest contrast of any pair, which makes them useful for calls to action, but large areas of both at full saturation can feel harsh.
What is the difference between triadic and tetradic colors?
A triadic scheme uses three hues spaced evenly, 120° apart, giving a balanced but lively palette. A tetradic or rectangle scheme uses four hues made of two complementary pairs, here at 0°, 60°, 180° and 240°. Square is a special tetradic case with all four hues 90° apart.
What is a split-complementary color scheme?
Instead of the direct opposite, a split-complementary scheme takes the two colours on either side of the complement — 150° and 210° from the base. It keeps much of the contrast of a complementary pair but is easier to balance, which is why it is popular for interfaces and illustration.
What is the difference between HSV and HSL?
Both describe colour by hue and saturation, but the third value differs. In HSV, value (brightness) at 100% gives the purest colour. In HSL, lightness at 50% gives the purest colour, 0% is black and 100% is white. CSS uses HSL; many design apps show HSV or HSB. Switch the wheel between them to see the difference.
Is this an RGB or an RYB color wheel?
This is an RGB-based wheel, the model screens use, where red, green and blue are the primaries and the complement of red is cyan. The traditional painter's RYB wheel places green opposite red. For web, app and digital design, RGB-based harmonies match what you will actually see on screen.
How do I check if my colors have enough contrast?
Each swatch shows its WCAG 2 contrast ratio against white and black. A ratio of at least 4.5:1 (AA) is needed for normal body text and 3:1 for large text and user-interface parts; 7:1 meets AAA. If a colour fails on both, use it for decoration or large shapes rather than text.
How do I convert HEX to RGB, HSL or CMYK?
Type or paste the HEX code into the HEX field under Base colour values. The RGB, HSL and CMYK fields update immediately, and each row has a copy button. CMYK here is a simple device-independent conversion; for print, check against your printer's colour profile.
Can I pick a color from my screen?
In Chrome and Edge on desktop, a pipette button appears next to Random. Press it, click anywhere on your screen, and that colour becomes the base colour on the wheel. Other browsers do not support the EyeDropper API yet, but you can paste a HEX code instead.
Are my saved palettes stored online?
No. Saved palettes, along with your last colour, harmony and wheel model, are kept in your browser's local storage on this device only. Clearing site data removes them. To move a palette elsewhere, use Export palette to copy it as CSS, JSON or a PNG image.