🎨 Color Wheel: Pick HSL Colors, Get Hex, RGB and Harmonies

By Shihab Mia · Updated 2026-07-02

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.

A color wheel is a circle that maps all 360 degrees of hue around its rim, and this interactive color wheel lets you click any point to read the exact color in three formats at once. The angle around the center sets the hue (0 to 360 degrees), the distance from the center sets the saturation (0% at the middle to 100% at the rim), and a slider sets the lightness (0% black to 100% white). Click red at the 3 oclock rim with lightness 50% and you instantly get hsl(0, 100%, 50%), rgb(255, 0, 0) and #FF0000, ready to copy in one tap.

What is the Color Wheel?

A color wheel is a circular arrangement of colors that maps the hue around its circumference, and it is the fastest visual way to see how colors relate to one another. In the HSL model used by this color wheel, 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 visible spectrum and back to red, passing yellow at 60, cyan at 180 and magenta at 300 degrees.

Saturation is how vivid or pure the color is, and on this color 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. This separation of vividness from brightness is why HSL is often easier to reason about than raw RGB channels.

Designers, developers and artists reach for the color wheel because it makes color relationships visible at a glance. Colors directly opposite each other (180 degrees apart) are complementary and create strong, high-energy contrast, which is why brands pair blue with orange. Colors within about 30 degrees of each other are analogous and feel calm and harmonious, like the teal-to-green range of a nature palette. Three colors evenly spaced 120 degrees apart form a triadic scheme that stays balanced while still feeling lively.

Because this tool reports hex, RGB and HSL simultaneously, you can pick entirely by eye and still copy the exact code your CSS, design file or paint app needs. Hex codes like #FF0000 are the standard for CSS and most design software, RGB values map directly to how screens emit light, and HSL is the friendliest format when you want to nudge just the hue or lightness without touching the others. All three describe the same color; the tool simply converts between them for you.

One important note: the HSL color wheel is built on the RGB primaries used by screens, so its complements differ from the traditional red-yellow-blue artist wheel taught in painting classes. On the HSL wheel the complement of red (0 degrees) is cyan (180 degrees), whereas a paint wheel would call green the opposite of red. For any work that ends up on a screen, website or app, the HSL and RGB values shown here are the correct ones to use.

Everything runs locally in your browser using the HTML Canvas API, so the color wheel works offline, responds instantly with no page reloads, and never uploads the colors you pick. That makes it safe for confidential brand work and fast enough to explore dozens of shades in seconds.

When to use it

Picking a brand or accent color by eye and copying its exact hex, RGB or HSL code straight into CSS or a design file.
Exploring how hue, saturation and lightness combine before committing to a final value.
Building a color scheme by reading complementary (180 degrees away), analogous (nearby) or triadic (120 degrees apart) positions on the wheel.
Grabbing a quick color for a mockup, slide, chart or illustration without opening Photoshop, Figma or other heavy software.
Teaching or learning how the HSL model works by seeing hue, saturation and lightness change live as you click and drag.
Converting a chosen color between hex, RGB and HSL in one place instead of using three separate converters.

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 in real time.
Move the lightness slider to make the color darker (toward 0%) or lighter (toward 100%).
Read off the hex, RGB and HSL values shown below the wheel.
Click any Copy button, or the large swatch, to copy that value to your clipboard, then paste it into your CSS, design tool or paint app.

Formula & method

Position on the wheel maps to color as: hue = angle around the center in degrees (0 to 360), saturation = distance from center as a percent of the radius (0% at center, 100% at rim), lightness = the slider value (0% to 100%). HSL is converted to RGB with: C = (1 - |2L - 1|) x S, X = C x (1 - |(H / 60) mod 2 - 1|), m = L - C / 2, then the RGB channels are (R, G, B) = ((R1 + m), (G1 + m), (B1 + m)) x 255, where R1, G1, B1 depend on which 60-degree sector the hue falls in. The hex code is the RGB values written in base 16.

Worked examples

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

Angle at 3 oclock = 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).
RGB(255, 0, 0) in base 16 is #FF0000.

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

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

Measured clockwise from the right (3 oclock), the point 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).
RGB(64, 191, 64) in base 16 is #40BF40.

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

You have a hue of 30 degrees (orange) and want its complementary color.

The complement sits 180 degrees away: 30 + 180 = 210 degrees.
210 degrees is in the azure-blue range of the wheel.
Keeping saturation 100% and lightness 50%, the original is hsl(30, 100%, 50%) = #FF8000.
The complement is hsl(210, 100%, 50%) = #0080FF.

Result: Orange #FF8000 pairs with its complement azure #0080FF for high contrast.

Hue angle to primary and secondary colors on the wheel

Hue angle	Color	HSL at S 100% L 50%	Hex
0 / 360 deg	Red	hsl(0, 100%, 50%)	#FF0000
60 deg	Yellow	hsl(60, 100%, 50%)	#FFFF00
120 deg	Green	hsl(120, 100%, 50%)	#00FF00
180 deg	Cyan	hsl(180, 100%, 50%)	#00FFFF
240 deg	Blue	hsl(240, 100%, 50%)	#0000FF
300 deg	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 color harmonies and the wheel angles that create them

Harmony	Angle rule	Example hues	Feel
Complementary	Base + 180 deg	0 and 180	High contrast, vivid
Analogous	Base +/- 30 deg	30, 60, 90	Calm, harmonious
Triadic	Base + 120 and 240 deg	0, 120, 240	Balanced, lively
Split-complementary	Base + 150 and 210 deg	0, 150, 210	Contrast, less tension
Tetradic	Two complementary pairs	0, 90, 180, 270	Rich, needs one dominant

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 exact 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 part of the 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. On the HSL wheel the complement of red is cyan, not green. Use the HSL and RGB values when working with screens and CSS.
Copying the wrong format. Hex, RGB and HSL describe the same color in different notations. Copy the one your tool expects: hex for most CSS and design software, rgb() or hsl() when you need to tweak channels directly.
Ignoring contrast when pairing colors. Two colors that look good side by side on the wheel can still fail readability if their lightness is too close. For text on a background, check contrast separately rather than relying on hue alone.
Forgetting that the same hue can look different across screens. Uncalibrated monitors and phones render the same hex code slightly differently. Treat the values here as the exact spec, and calibrate your display if precise color matching matters.

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.
RGB: A color model that mixes red, green and blue light, each from 0 to 255, matching how screens produce color.
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.
Analogous colors: Colors that sit within roughly 30 degrees of each other on the wheel, producing a calm, harmonious palette.

Frequently asked questions

What is a color wheel?

A color wheel is a circle that arranges all hues around its edge so you can see how colors relate. On this HSL color wheel the angle sets the hue, the distance from the center sets the saturation, and a slider sets the lightness, giving you any color plus its hex, RGB and HSL codes.

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, and the tool converts these HSL values to RGB and hex.

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.

How do I find a complementary color on the wheel?

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 of the wheel at the same distance from the center to preview it.

What are analogous and triadic colors?

Analogous colors sit within about 30 degrees of your chosen hue and feel harmonious. Triadic colors are three hues spaced 120 degrees apart (for example 0, 120 and 240 degrees) and stay balanced while looking lively. Both are easy to spot by their positions on the wheel.

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 set by the lightness. As you move outward, saturation rises and the color becomes more vivid until it is fully saturated at the rim.

Is the HSL color wheel the same as an artist paint wheel?

No. This color wheel uses the RGB primaries (red, green, blue) that screens use, so complements differ from the traditional red-yellow-blue artist wheel. For anything shown on a screen, website or app, the HSL and RGB values here are the correct ones to use.

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 convert a color between hex, RGB and HSL here?

Yes. Whenever you pick a color the tool shows all three formats at once, so it doubles as a hex, RGB and HSL converter. Pick the color you want on the wheel and copy whichever notation your project needs.

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.