What this tool does
This converter turns one colour into every notation at once: paste #3b82f6 and you immediately get rgb(59, 130, 246), hsl(217, 91%, 60%) and hsv(217, 91%, 96%). It works in reverse too — copy an rgb() value from a design file or an hsl() from DevTools and get the HEX back.
One colour per line means whole lists work: a CSS variable block, a brand palette or a column of hex values converts in a single pass. Parsing is deliberately forgiving — three-digit shorthand #f00, hex without the hash, four-digit #f00a, and rgb(59 130 246 / 0.5) with spaces or slashes all parse.
How to use
- Step 1: paste your colours One colour per line, mixing #, rgb() and hsl() freely. When you are unsure which notation you have, paste it as-is — the tool works out the format itself.
- Step 2: choose the output By default all four notations come back, tab-separated so they paste neatly into a spreadsheet. When you only need one, switch the output format to HEX, RGB, HSL or HSV for a cleaner result.
- Step 3: copy the result Results recompute automatically when options change, so there is no need to press the button again. Use Copy for the whole block, or Download to save it as a text file.
Limits
Only opaque colours are handled for now: an alpha value (#rrggbbaa, or the fourth argument of rgba()/hsla()) is ignored rather than rejected, and no transparency appears in the output. Wider colour spaces such as Lab, LCH or Display-P3 are out of scope, as is mapping CSS colour names like tomato. Values are rounded, so use a dedicated tool for colour-science precision.
FAQ
Why is the HSL off by one from my design app?
Hue, saturation and lightness are rounded to whole numbers, so a floating-point result can differ by one unit. The difference is invisible and fine for CSS; if you need decimals, work from the RGB channels directly.
Can I convert a whole list?
Yes. Paste as many lines as you like and one line of output comes back for each non-empty input; blank lines are skipped automatically.
Does it support 8-digit HEX with alpha?
It parses them but ignores transparency: #f00a yields the same result as #f00. This is deliberate, so the output never carries an alpha channel you did not ask for.
Are HSV and HSB the same?
Yes. The V in HSV is the same quantity as the B in HSB; only the naming differs between tools. This page labels it HSV.
Are my values sent anywhere?
No. Parsing and maths happen in the page and no request carries your colours; open the Network panel to confirm.
Why is pure red 100% saturation in HSL?
Saturation measures distance from grey. Pure red is (255,0,0): the channel spread is maximal, so saturation is at its maximum, lightness sits at 50% and hue is 0°.