Four clear relationships
Complementary adds 180 degrees. Analogous uses neighbors at minus and plus 30 degrees. Triadic uses 120-degree spacing, and tetradic uses 90-degree spacing. Base is always the first result.
ONELESS / COLOR
Color Wheel
A color wheel makes hue relationships visible. Start from a base color and watch complementary, analogous, triadic or tetradic companions move with it. This tool uses the digital HSL circle so the angle markers, visible relationships and copied HEX values stay connected.
Open Color Wheel. JavaScript powers the workspace; the full guide is available below.
UNDERSTAND THE RESULT
Color, with a little context.
Shared saturation and lightness
Every companion uses the base HSL saturation and lightness. The ring itself remains a fully saturated hue reference. At zero saturation the results become the same gray, even though the hue angles still exist.
Digital color, not paint mixing
This is an HSL wheel, not an RYB artist wheel or a physical pigment model. These hue rules offer structure, but they do not guarantee equal perceived brightness, distinctness or sufficient text contrast.
HOW TO USE IT
From a starting point to a usable result.
- Enter a 3- or 6-digit Base HEX or drag around the ring. Focus the ring and use arrow keys for one-degree steps, Shift for ten degrees, or Home/End for the endpoints.
- Choose a relationship and adjust Hue, Saturation and Lightness. The base marker is numbered 1, and the result cards show each hue angle.
- Copy an individual result or the whole palette. Reset returns the initial complementary relationship and base color.
A WORKED EXAMPLE
A red base and its HSL opposite
Set Base HEX to #FF0000 and choose Complementary. The base has hue 0 degrees and the companion has hue 180 degrees, producing #00FFFF at full saturation and 50% lightness.
EVERYDAY USES
Make the next small decision easier.
Explore a controlled accent
Keep the base color while switching between relationship types. Choose a companion as a starting accent and test the actual text/background pairing separately.
Learn what the angles mean
Change the hue and watch the linked markers rotate together. Reduce saturation to see why hue relationships can collapse visually into gray.
LOCAL WORKSPACE
Your work stays in this browser.
The tool processes color values locally. It does not upload the input to a processing server or save it in browser storage. Leaving or reloading the page clears the working state. Copying places the selected result on your clipboard; sharing sends only the page address without your working values.
These tools describe sRGB colors. Browser decoding, color management and the display can affect what you see; they are not an ICC proofing workflow or a print-color guarantee. Read the site privacy policy for information about the surrounding website.
KEEP IT NEARBY
One less search next time.
Press Ctrl + D on Windows or Command + D on Mac to bookmark this page. Your browser may also offer Create shortcut or Add to Home Screen. Shortcuts open the tool; they do not include your colors or images.
Choose a shortcut icon
Soft Coral
Warm Peach
Sunset Orange
OneLess Blue
Rose PinkQUESTIONS, ANSWERED
A few useful details.
Why does this differ from a paint wheel?
Physical pigments and RYB artist wheels use different relationships. This tool follows HSL hue coordinates for digital sRGB colors.
Can I move every marker independently?
The ring controls the base hue. Other markers keep their selected relationship offsets; saturation and lightness apply to the whole set.
Why can several result swatches look identical?
At zero saturation, or at completely black/white lightness endpoints, changing hue does not change the visible result.
Does a harmony rule make an accessible palette?
No. Contrast depends on the actual foreground/background values and text size. Check the intended pairs with Color Contrast Checker.
Can I start the wheel with my own HEX color?
Yes. Enter your base color, then choose a harmony. The other swatches are derived from that base while keeping its saturation and lightness.
What does an opposite position on this wheel represent?
A hue 180 degrees from the base in the digital HSL model. It is a complementary relationship within that model, useful as a starting point for a palette.
How do I take the wheel colors into a design?
Copy the color values you want to use. Assign them practical roles such as background or accent and check the actual text/background combinations separately.
REFERENCES
ANOTHER SMALL STEP
Keep the next tool close.
Ready for a little more color?
Turn one color into a relationship you can see.
Return to Color Wheel ↑