Convert colours between HEX, RGB and HSL with a live swatch.
Converted locally in your browser.
How do you convert a colour between HEX, RGB and HSL?
HEX maps directly to RGB byte values, and HSL is derived from RGB using the standard hue, saturation and lightness conversion. A color converter shows all three formats with a live preview swatch. For example, #ff0000 is rgb(255, 0, 0) and hsl(0, 100%, 50%). Both 3-digit (#f00) and 6-digit (#ff0000) HEX are accepted, as is rgb(...) notation.
Understanding your result
Both 3-digit (#f00) and 6-digit (#ff0000) HEX are accepted, as is rgb(...) notation.
Formula and method
HEX maps directly to RGB byte values; HSL is derived from RGB using the standard hue, saturation and lightness conversion.
Assumptions and limitations
The tool converts between HEX, RGB, and HSL for a single opaque colour. Support for an alpha channel depends on the input format, and it does not deal with wide-gamut or named CSS colours. HSL values are derived mathematically from RGB, so rounding may shift the last digit slightly.
Worked example
#ff0000 is rgb(255, 0, 0) and hsl(0, 100%, 50%).
How to use this tool
- Enter a HEX or RGB colour.
- Read the HEX, RGB and HSL values.
Common mistakes to avoid
- Omitting the # or using an invalid HEX length.
About the Color Converter
Convert any colour between HEX, RGB and HSL formats and see a live preview swatch.
Who should use this tool
Front-end developers translating a designer's HEX into RGB or HSL, CSS authors who prefer HSL for tweaking lightness, and anyone matching a colour across tools that expect different formats. The live swatch helps confirm you have the exact colour before pasting it into a stylesheet.
Benefits
- Converts between HEX, RGB and HSL in one place
- Accepts both 3-digit and 6-digit HEX notation
- Shows a live swatch to confirm the exact colour
- Works client-side with nothing sent to a server
Practical use cases
- Turning a designer's HEX code into rgb() for CSS
- Switching to HSL to adjust a colour's lightness
- Verifying a colour matches its intended swatch
- Copying a colour between tools with different formats
Explore all Developer Tools tools
Frequently asked questions
Does it support alpha?
This tool focuses on solid colours (HEX/RGB/HSL). Alpha transparency is not included.
What is the difference between RGB and HSL?
RGB describes a colour by mixing red, green, and blue light, each from 0 to 255. HSL describes the same colour by hue (its position on the colour wheel), saturation, and lightness. HSL is often easier for humans, since adjusting lightness or saturation feels more intuitive than juggling three channels.
Does #f00 mean the same colour as #ff0000?
Yes. Three-digit HEX is shorthand where each digit is doubled, so #f00 expands to #ff0000, which is pure red. The shorthand only works when each channel's two digits are identical. A colour like #ab34cd cannot be shortened because its pairs differ.