Super Boring Tools

Search tools

Find a tool by name or what it does.

Color Wheel

An interactive HSL color wheel. Click or drag to pick a color and see its harmonies marked live on the wheel.

Color wheel

Click or drag the wheel to set hue and saturation. Everything runs in your browser.

Harmony
Formats
HEX#337ae6
RGBrgb(51, 122, 230)
HSLhsl(216, 78%, 55%)

How to use a color wheel online

  1. Pick a color

    Click or drag anywhere on the wheel to set the hue and saturation of your color.

  2. Adjust the lightness

    Use the lightness slider under the wheel to make the picked color lighter or darker.

  3. Choose a harmony

    Select complementary, analogous, triadic, split complementary, or tetradic to mark matching colors on the wheel.

  4. Copy the result

    Copy any single HEX, RGB, or HSL value, click a swatch, or copy the whole palette at once.

Why use this tool

Hue and saturation on one wheel

The angle around the wheel sets the hue and the distance from the center sets the saturation, so every mix is one click away.

Five harmony overlays

Complementary, analogous, triadic, split complementary, and tetradic schemes are marked directly on the wheel and shown as copyable swatches.

Live HEX, RGB, and HSL readouts

All three formats update as you drag, each with its own copy button.

Jump to any HEX code

Type a 3 or 6 digit HEX value and the wheel snaps to that color, ready for harmony exploration.

Runs entirely in your browser

The wheel is drawn on your device and no color you pick is ever sent anywhere.

About this tool

This color wheel maps every hue around a circle and every saturation level along its radius. The angle sets the hue, from red at 0 degrees through green and blue and back again, and the distance from the center sets the saturation, so the exact middle is always a neutral grey. Click or drag anywhere on the wheel to pick a color, then use the slider underneath to set the lightness. The wheel redraws to match, and the HEX, RGB, and HSL values update live as you move.

The harmony overlay marks related colors directly on the wheel. Complementary shows the color directly opposite your pick, analogous shows its two neighbours at 30 degrees on either side, triadic splits the wheel into three even points, split complementary flanks the opposite point, and tetradic adds a rectangle of four. Each harmony color appears as a marker on the wheel and as a swatch you can click to copy its HEX code. For a deeper look at a single scheme, the complementary color calculator, analogous color generator, and triadic color generator work from a pasted color instead of a wheel.

Everything happens on your device. The wheel is drawn locally, no color you pick is sent anywhere, and picking stays instant even while dragging. You can also type a HEX code to jump straight to a color, which is useful when you want to find harmonies for an existing brand color.

Frequently asked questions

How does the color wheel work?
The wheel plots the HSL color space. The angle around the circle is the hue (0 to 360 degrees), the distance from the center is the saturation (0 to 100 percent), and the slider below sets the lightness. Clicking or dragging reads the point under your cursor and converts it to HEX, RGB, and HSL instantly.
What do the harmony modes show?
Each mode rotates your hue by fixed angles while keeping the same saturation and lightness. Complementary is 180 degrees opposite, analogous is 30 degrees to either side, triadic is 120 and 240 degrees, split complementary is 150 and 210 degrees, and tetradic is 60, 180, and 240 degrees. The results are marked on the wheel and listed as swatches.
Why does the center of the wheel look grey?
The center is zero saturation, where every hue collapses to the same neutral grey at the current lightness. Moving outward increases saturation until the rim shows each hue at full strength.
Can I start from an existing color?
Yes. Type a 3 or 6 digit HEX code, with or without the leading #, into the HEX field and the wheel marker, slider, and readouts all jump to that color.
Is my color data uploaded anywhere?
No. Everything runs in your browser; nothing is sent to a server. The wheel is drawn on your device and works without a connection once the page has loaded.
Which formats can I copy?
Each color offers HEX, RGB, and HSL with individual copy buttons, every swatch copies its HEX on click, and the main button copies the whole palette as one HEX code per line.

Related tools