What This Means For You
Get a personalized explanation of these results — what they actually mean for your situation, and how small changes would affect them.
How it works
Moves a colour between hexadecimal, RGB and HSL notation. HEX and RGB carry identical information written two ways, one byte per channel. HSL rearranges those same three numbers into a hue angle, a saturation and a lightness, which is why it is the notation people reach for when building a palette or generating a hover state by hand.
HEX to RGB: each pair of hex digits is one channel, 00 to FF = 0 to 255 RGB to HSL: normalise r, g, b to 0 to 1; let max and min be the largest and smallest, d = max − min L = (max + min) / 2 S = 0 when d = 0, else d / (max + min) when L ≤ 0.5, else d / (2 − max − min) H = 60 × (((g − b) / d) mod 6) when max is r H = 60 × (((b − r) / d) + 2) when max is g H = 60 × (((r − g) / d) + 4) when max is b
r, g, bchannel values divided by 255, each running 0 to 1Hhue in degrees, 0 to 360, with 0 red, 120 green, 240 blueSsaturation: 0% is grey, 100% is the fully vivid hueLlightness: 0% black, 50% the pure hue, 100% whitedchroma, the spread between the brightest and dimmest channel
- Hex pairs to decimal: 3B = 59, 82 = 130, F6 = 246
- Normalise: r = 0.231373, g = 0.509804, b = 0.964706
- max = b = 0.964706, min = r = 0.231373, d = 0.733333
- L = (0.964706 + 0.231373) / 2 = 0.598039
- L is above 0.5, so S = 0.733333 / (2 − 0.964706 − 0.231373) = 0.912195
- Blue is the max channel: H = 60 × (4 + (0.231373 − 0.509804) / 0.733333) = 60 × 3.620321 = 217.22
- The round trip is not reliably lossless. HSL holds real numbers while hex holds 8 bits per channel, so converting out, rounding the printed hue to a whole degree and the percentages to one place, and converting back can land a step or two from where you started. Keep the hex as the stored value and treat HSL as a working view.
- Equal L does not mean equal perceived brightness. hsl(60, 100%, 50%) is yellow and hsl(240, 100%, 50%) is blue, both nominally half lightness, and the yellow looks far brighter to a viewer. Contrast decisions need relative luminance, which weights the gamma-expanded channels 0.2126 red, 0.7152 green, 0.0722 blue, or a perceptual space such as OKLCH.
- HSL and HSV are not interchangeable despite sharing a hue angle. HSV tops out at the pure hue, while HSL puts the pure hue at 50% and continues to white above it. Pasting HSV numbers into an HSL field produces a washed-out colour rather than an error, which is why the mistake survives review.
Related Tools
Most Searched Today
Frequently Asked Questions
They represent the same colors differently. RGB uses three decimal values (0-255) for red, green, and blue. HEX is a six-digit hexadecimal shorthand of the same values (e.g., rgb(255,0,128) = #FF0080).
HSL (Hue, Saturation, Lightness) is more intuitive for design work. Adjusting lightness creates tints and shades, and shifting hue rotates through colors. Both are easier to reason about than changing RGB values.
CMYK (Cyan, Magenta, Yellow, Key/Black) is the color model used in printing. Screens use RGB. Colors can shift when converting between the two, so always proof print designs.