Color Converter
Type or pick a color in HEX, rgb(), or hsl() format and get all three representations at once, with a live color swatch and one-click copy for each value.
Developer Tools Runs entirely in your browser
The color is processed entirely on your device and is never sent to any server.
HEX
#1f7269RGB
rgb(31, 114, 105)HSL
hsl(173, 57%, 28%)What this tool does
Converts a colour between HEX, RGB and HSL, accepting any of them as input, with a visual colour picker alongside.
When to use it
- A HEX colour from a design that your code needs as RGB.
- Adding transparency, which needs the RGB form rather than HEX.
- Adjusting a hue or saturation, which HSL makes direct.
- Normalising colour notation across a stylesheet.
How to use it
- Type the colour in any notation into the "Color" field — #1f7269, rgb(31,114,105) or hsl(178,58%,28%).
- Or use the "Color picker" to choose it visually.
- Copy whichever notation you need from the results.
A practical example
Input
#1f7269
Output
The same colour as rgb(31,114,105) and as hsl(178,58%,28%).
Limitations
- HEX, RGB and HSL are supported; wider colour spaces such as LAB and LCH are not.
- Converting between notations can introduce a rounding difference of a unit, because HSL works in percentages.
- CSS colour keywords are not an accepted input form here.
Privacy and processing
The colour is processed entirely on your device and is never sent to any server.
Technical notes
- The conversion is pure arithmetic between the three notations, so the result matches what the browser itself computes.