Color Converter
Convert common HEX and RGB colors into HSL values for web design, CSS and interface development.
Your result will appear here.
Color Converter online
Convert a colour between HEX, RGB and HSL: paste a value in any of those forms and get all three back, ready to drop into CSS, a design tool or a palette.
How it works
The tool first parses your input — a #RGB or #RRGGBB hex code, or an rgb(r, g, b) triple — into red, green and blue channels from 0 to 255. It then normalises the channels to 0–1 and projects them onto the HSL cylinder: lightness is the midpoint between the strongest and weakest channel, saturation is how far the colour sits from grey at that lightness, and hue is an angle from 0° to 360° decided by which channel dominates. The result prints as a normalised HEX code, an rgb() triple and an hsl() triple with whole-number values, matching CSS syntax.
Worked example
Take the steel blue #336699. Its channels are R 51, G 102, B 153; normalised, the maximum is 0.6 (blue) and the minimum 0.2 (red). Lightness = (0.6 + 0.2) ÷ 2 = 40%; saturation = 0.4 ÷ (1 − |2 × 0.4 − 1|) = 50%; and because blue dominates, hue = 60 × ((0.2 − 0.4) ÷ 0.4 + 4) = 210°. The tool returns HEX: #336699, RGB: rgb(51, 102, 153), HSL: hsl(210, 50%, 40%).
How to use this tool
- Paste a colour as #RGB, #RRGGBB or rgb(r, g, b).
- Run the tool.
- Copy the HEX, RGB or HSL line you need — all three describe the same colour.
Common uses
Translating a brand colour from a designer's hex code into the HSL you need for CSS hover states and shade variants, checking that a colour picked from a screenshot matches the stylesheet, and building palettes in which consistent lightness steps keep a colour family together.
Privacy and browser processing
Conversion runs in your browser; the colours you enter are never uploaded.
Frequently asked questions
Why adjust a colour in HSL instead of RGB?
HSL separates what the colour is (hue) from how vivid (saturation) and how light (lightness) it is. A button hover state becomes a one-number change — raise lightness by 10% — whereas in RGB you must scale all three channels and hope the hue stays where it was.
Does it support transparency (alpha)?
No. The converter works with opaque colours: hex codes with an alpha channel are not parsed, and an rgba() input is read by its RGB channels only, ignoring the alpha. For CSS transparency, append the alpha yourself inside rgba() or hsla().
Why can the same colour look different on two screens?
The numbers define the colour exactly within the sRGB space, but screens differ in gamut, brightness and calibration, and inexpensive panels cannot reproduce every sRGB colour. The conversion is exact; the rendering is not — check critical brand colours on a real device.
What formats can I paste?
#RGB and #RRGGBB hex codes (uppercase or lowercase) and rgb(r, g, b) with channel values from 0 to 255. Colour names such as steelblue and hsl() input are not accepted — convert those to hex or RGB first.