Three Notations, One Color
Pick a color visually or type a HEX code, and the tool shows all three CSS notations side by side — click any value to copy it. They describe the exact same color, just in different coordinate systems:
| Format | Example | What the numbers mean |
|---|---|---|
| HEX | #7c5cfc | Red, green, blue as hex pairs, 00–ff |
| RGB | rgb(124, 92, 252) | Same three channels in decimal, 0–255 |
| HSL | hsl(252, 96%, 67%) | Hue on the color wheel (0–360°), saturation, lightness |
Worked Example: Reading #7c5cfc
HEX to RGB is direct base conversion: 7c = 7×16+12 = 124 red, 5c = 92 green, fc = 252 blue. Blue is the strongest channel with some red mixed in, so the color lands in the violet range — HSL confirms it: hue 252° sits between blue (240°) and magenta (300°), saturation 96% means it's nearly pure, and lightness 67% puts it on the pale side of the midpoint. HEX and RGB are interchangeable notations of the same values; HSL is a genuine re-mapping, which is why its values look unrelated at first glance.
Which Format When
- HEX is the compact default for CSS, design handoffs and brand guidelines — easy to copy, hard to mistype.
- RGB matches how screens and graphics APIs actually work, and extends naturally to transparency as
rgba(). - HSL is the format for adjusting colors: need a hover state? Keep hue and saturation, drop lightness by 10%. Need a complementary accent? Rotate hue by 180°. Doing that math in HEX is miserable; in HSL it's one number.
A practical workflow: pick your brand color with the visual picker, copy the HSL value, and derive your palette (hover, borders, backgrounds) by varying only the lightness — the shades stay visually related automatically.
Input Rules and Privacy
The text field accepts full six-digit HEX codes with a leading # (shorthand like #fff should be expanded to #ffffff). The picker updates all formats live, and HSL values are rounded to whole numbers — converting back can shift a value by ±1, which is invisible on screen. All conversion runs entirely in your browser; nothing is sent to a server.