Color Wheel Calculator
Drag on the wheel or move the sliders. Hex, RGB, and HSL update instantly.
Click or drag on the wheel to set hue and saturation.
Color codes chart
Click a hex cell to load that swatch on the wheel.
| Color | Color name | Hex | (R,G,B) | (H,S,L) |
|---|
HTML / CSS color names
| Color | Name | Hex | RGB | HSL |
|---|
How to Use This Color Wheel Calculator
You copied a hex code from browser devtools, but the stakeholder wants the same brand blue expressed as HSL for a CSS variable file. Or marketing sent RGB integers from a PDF, and your stylesheet only accepts six-digit hex. Jumping between scratchpad division, hue angles, and three parallel syntaxes is the kind of friction that breaks a layout pass when you are already under a deadline.
Think of this page like the round dial on a hardware-store paint mixer: the angle picks the hue family, how far you pull from the center controls vividness, and the luminance slider is the white-or-black tint knob on the side. You are not memorizing formulas—you are steering the dial until the preview matches what you see in the mockup.
- Click or drag on the wheel to set hue (position around the circle) and saturation (distance from the center).
- Move the Saturation and Luminance sliders for fine tuning; the wheel redraws at your current luminance so the ring matches what you export.
- Copy Hex, RGB, or HSL with the Copy buttons beside each output field.
- Paste a hex code into the load field when you already have a brand token and need the wheel marker to snap to it.
- Click a hex value in the color charts inside the calculator card to jump the wheel to a named web color.
Conversion runs entirely in your browser. Nothing uploads to RapidRatio servers, which keeps unreleased brand palettes on your machine.
Color Wheel Formulas and Practical Applications
In our testing, most production mistakes happen when teams mix formats without reconciling them first—CSS says #2563EB, Figma exports rgb(37, 99, 235), and the email vendor wants HSL strings. The wheel keeps one canonical pick while the outputs track the same sRGB point in every dialect.
Hue, saturation, and luminance on the wheel
HSL describes color in cylindrical coordinates. Hue is an angle on the wheel from 0° to 360°. Saturation is how much gray is mixed in—from 0% (neutral gray at that lightness) to 100% (full vividness). Luminance is how light or dark the sample appears, independent of the hue angle.
H = atan2 position on wheel (0°–360°)
S = distance from center ÷ outer radius × 100%
L = luminance slider (0%–100%)
When saturation hits 0%, hue still exists mathematically but the preview reads as gray—exactly what you want when checking neutral backgrounds against brand primaries.
From HSL to RGB and hex
CSS and design tools ultimately store sRGB channels. After you lock H, S, and L on the wheel, the calculator converts to eight-bit red, green, and blue integers, then packs them into hex pairs.
Hex = RR + GG + BB (each channel 00–FF)
Example: RapidRatio brand blue at roughly ***H = 221°***, ***S = 83%***, ***L = 53%*** yields ***#2563EB*** and ***rgb(37, 99, 235)***. Paste those values into the RGB to Hex Color Converter if you also need to reverse-edit individual channels with sliders.
Where teams use a color wheel day to day
UI tokens: Pick a primary on the wheel, copy HSL into custom properties, then follow our hex to HSL for Tailwind CSS variables guide when you add opacity modifiers. Charts: Lock distinct hues around the ring before pasting hex into the Bar Graph Maker or Pie Chart Maker series color fields. Email HTML: Many clients prefer inline hex on table headers—confirm the hex here, then build markup in the HTML Table Generator. SVG cleanup: After you settle on fill colors, drop hex into paths inside the SVG Viewer & Editor.
Standard Units and Conversion Tables
sRGB on the web uses eight-bit channels unless you explicitly work in wide-gamut display P3. This calculator stays in the standard 0–255 RGB space that matches CSS rgb() and six-digit hex.
| Format | Example (brand blue) | Typical use |
|---|---|---|
| HSL | hsl(221, 83%, 53%) | Theme tokens, hover lightness tweaks |
| RGB | rgb(37, 99, 235) | Design handoffs, devtools readouts |
| Hex | #2563EB | CSS files, SVG fills, inline email styles |
| Angle on wheel | ~221° hue | Visual picking before you copy numeric codes |
The interactive charts in the calculator card list standard named colors (Black, Navy, Teal, and others) plus common CSS color keywords. In my experience, keeping that chart open while auditing a legacy stylesheet beats retyping primaries from memory.
Moving onto channel-level debugging: when a log prints only hex bytes, paste into the load field here for a visual check, or split channels in the Hex to Decimal Converter when you are working on raw memory offsets rather than styling.
Frequently Asked Questions
What is the difference between saturation and luminance on the color wheel?
Saturation controls how vivid the color is from gray (0%) to full intensity (100%). Luminance controls how light or dark the sample appears. The wheel position sets hue and saturation together; the luminance slider adjusts brightness without changing the hue angle.
Can I enter a hex code instead of clicking the wheel?
Yes. Paste a six-digit hex code with or without # into the hex load field. The marker, sliders, and Hex, RGB, and HSL outputs update to match that sRGB color.
Why does the wheel look different when I move the luminance slider?
The ring is drawn at your current luminance value so what you see matches the exported color. At very high luminance the wheel pastels out; at very low luminance it darkens—same behavior you expect when tinting paint with white or black.
Does this color wheel support alpha transparency?
This calculator handles opaque sRGB colors (three channels). Eight-digit hex with alpha (#RRGGBBAA) and hsla() with a fourth alpha parameter are outside the current scope.
Is my color data sent to a server?
No. The wheel renders on an HTML5 canvas and conversions run in JavaScript locally in your tab. Values stay on your device unless you copy them elsewhere.