HEX, RGB & HSL Color Converter
Convert colors between HEX, RGB and HSL, with transparency. Everything runs in your browser, so your input isn’t uploaded.
Loading tool…
How to use the HEX, RGB & HSL Color Converter
- Type a color such as #111111, rgb(17, 17, 17) or hsl(0, 0%, 7%), or use the color picker.
- Check the preview swatch.
- Copy the format you need.
Example
The near-black used for text on this site, shown in the other two formats.
#111111
rgb(17, 17, 17) hsl(0, 0%, 7%)
About this tool
Designers and developers write the same color in different ways. Enter a color in any of the three formats, or pick one, and see it in all of them, ready to copy into your CSS.
Good to know
- Short HEX forms like #fff and forms with transparency like #ff000080 are accepted.
- Values outside the allowed range are adjusted to the nearest valid value, as CSS does.
- HSL values are rounded to whole numbers, so converting back and forth can change a value by one.
Related tools
- CSS Gradient Generator – Build linear, radial and conic gradients and copy the CSS.
- CSS Box Shadow Generator – Design layered box shadows with sliders and copy the CSS.
- CSS Border Radius Generator – Round each corner independently, including elliptical corners, and copy the CSS.