🎨 Interactive Color Wheel

By ToolNimba Color Team · Updated 2026-06-19

Lightness: 50%

0% (black) 50% 100% (white)

Selected color

#BF4040

HEX: #BF4040
RGB: rgb(191, 64, 64)
HSL: hsl(0, 50%, 50%)

Hue

0°

Saturation

50%

Lightness

50%

Click anywhere on the wheel to pick a color, then copy any format.

This interactive color wheel lets you pick any color by clicking directly on a hue and saturation wheel. The angle around the wheel sets the hue, the distance from the center sets the saturation, and a slider controls the lightness. As you click, the tool shows the selected color as a swatch along with its hex, RGB and HSL values, ready to copy with one tap.

What is the Color Wheel?

A color wheel is a circular arrangement of colors that maps the hue around its circumference. In the HSL model used here, three numbers describe any color: hue, saturation and lightness. Hue is the angle around the wheel from 0 to 360 degrees, where 0 (and 360) is red, 120 is green and 240 is blue. Moving around the rim walks you through the full spectrum and back to red.

Saturation is how vivid or pure the color is, and on this wheel it is mapped to the distance from the center. At the very center saturation is 0%, giving a neutral gray; out at the rim saturation is 100%, giving the most intense version of that hue. Lightness is the third axis, controlled by the slider rather than the wheel: at 0% every color is black, at 100% every color is white, and 50% gives the brightest, most colorful rendering of the wheel.

Designers and developers reach for the wheel because it makes color relationships visible. Colors opposite each other (180 degrees apart) are complementary and create strong contrast. Colors close together are analogous and feel harmonious. Because the tool reports hex, RGB and HSL at once, you can pick by eye on the wheel and still copy the exact code your CSS, design file or paint app needs.

When to use it

Picking a brand or accent color by eye and copying its exact hex or HSL code for CSS.
Exploring how hue, saturation and lightness combine to make a color before committing to a value.
Finding complementary or analogous colors by looking at positions across or around the wheel.
Grabbing a quick color value for a design mockup, slide, chart or illustration without opening heavier software.

How to use the Color Wheel

Click anywhere on the wheel to pick a color: the angle sets the hue and the distance from the center sets the saturation.
Drag on the wheel to fine-tune the pick while watching the swatch update.
Move the lightness slider to make the color darker (toward 0%) or lighter (toward 100%).
Read off the hex, RGB and HSL values, then click any Copy button or the swatch to copy the code.

Formula & method

Position on the wheel maps to color as: hue = angle around the center (0 to 360 degrees), saturation = distance from center as a percentage of the radius (0% at center, 100% at the rim), lightness = the slider value (0% to 100%). HSL is then converted to RGB for the hex code.

Worked examples

You click on the right edge of the wheel (3 o’clock) with lightness at 50%.

Angle at 3 o’clock = 0 degrees, so hue = 0 (red).
The click is at the rim, so saturation = 100%.
Lightness from the slider = 50%.
HSL(0, 100%, 50%) converts to RGB(255, 0, 0).

Result: Selected color: hsl(0, 100%, 50%) = rgb(255, 0, 0) = #FF0000

You click halfway out toward the lower-left of the wheel with lightness at 50%.

Measured clockwise from the right (3 o’clock), the lower-left lands at about 120 degrees, so hue = 120 (green region).
Halfway from center to rim means saturation = 50%.
Lightness = 50% from the slider.
HSL(120, 50%, 50%) converts to RGB(64, 191, 64).

Result: Selected color: hsl(120, 50%, 50%) = rgb(64, 191, 64) = #40BF40

Hue angle to primary and secondary colors on the wheel

Hue angle	Color	HSL at S 100% L 50%	Hex
0° / 360°	Red	hsl(0, 100%, 50%)	#FF0000
60°	Yellow	hsl(60, 100%, 50%)	#FFFF00
120°	Green	hsl(120, 100%, 50%)	#00FF00
180°	Cyan	hsl(180, 100%, 50%)	#00FFFF
240°	Blue	hsl(240, 100%, 50%)	#0000FF
300°	Magenta	hsl(300, 100%, 50%)	#FF00FF

What each HSL axis controls

Axis	Range	On the wheel	Effect
Hue	0 to 360 degrees	Angle around the rim	Which color (red, green, blue, etc.)
Saturation	0% to 100%	Distance from center	How vivid versus gray the color is
Lightness	0% to 100%	Slider	How dark (0%) or light (100%) the color is

Common mistakes to avoid

Confusing saturation with lightness. Moving toward the center lowers saturation and gives a grayer color, while the slider changes lightness. A color can be fully saturated yet very dark or very light, so adjust both to get the shade you want.
Expecting bright colors at lightness 0% or 100%. At 0% lightness every hue is black and at 100% every hue is white, regardless of saturation. The most colorful wheel appears around 50% lightness.
Assuming HSL hue degrees match a paint color wheel. The HSL wheel is based on the RGB primaries (red, green, blue), so its complements differ from the traditional red-yellow-blue artist wheel. Use the HSL values when working with screens and CSS.
Copying the wrong format. Hex, RGB and HSL describe the same color but in different notations. Copy the one your tool expects: hex for most CSS, rgb() or hsl() when you need to tweak channels directly.

Glossary

Hue: The base color expressed as an angle from 0 to 360 degrees around the wheel, where 0 is red, 120 is green and 240 is blue.
Saturation: How vivid or pure a color is, from 0% (gray) at the center to 100% (fully intense) at the rim of the wheel.
Lightness: How light or dark a color is, from 0% (black) through 50% (most colorful) to 100% (white).
HSL: A color model that describes a color by its hue, saturation and lightness, often more intuitive to adjust than raw RGB.
Hex code: A six-digit base-16 representation of an RGB color, such as #FF0000 for pure red, widely used in CSS and design tools.
Complementary colors: Two colors positioned opposite each other on the wheel (180 degrees apart) that create high contrast when paired.

Frequently asked questions

How does the color wheel pick a color?

When you click the wheel, the angle from the center sets the hue (0 to 360 degrees) and the distance from the center sets the saturation (0% at the middle, 100% at the rim). The lightness slider then sets how dark or light that color is. The tool converts these HSL values to RGB and shows the hex, RGB and HSL codes.

What is the difference between hue, saturation and lightness?

Hue is the base color as an angle around the wheel. Saturation is how vivid versus gray the color is, mapped to the distance from the center. Lightness is how black-to-white the color is, set by the slider. Together they describe any color in the HSL model.

Why does the wheel look gray in the center?

The center of the wheel is where saturation is 0%, which means no color, only a neutral gray determined by the lightness. As you move outward, saturation rises and the color becomes more vivid until it is fully saturated at the rim.

How do I copy the color code?

Each format (hex, RGB and HSL) has its own Copy button next to it, and you can also click the large swatch to copy the hex. The value is placed on your clipboard so you can paste it into your CSS, design file or paint app.

Can I find a complementary color with this wheel?

Yes. The complementary color sits directly across the wheel, 180 degrees from your current hue. If you pick a hue of 30 degrees, its complement is at 210 degrees. Click the opposite side at the same distance from center to preview it.

Is my color data sent anywhere?

No. The entire color wheel runs in your browser using the Canvas API. Nothing you pick or copy is uploaded to a server, so it works offline and keeps your work private.