Color Converter — HEX to RGB, RGB to HSL and HSL

Use this free online color converter to translate any color between HEX, RGB and HSL in one place. Whether you need HEX to RGB, RGB to HSL, HEX to HSL or the reverse, just pick a color with the color picker or type a value into any field and the other formats update instantly beside a large live preview swatch. Every value has a one-click copy button, so grabbing a HEX code or an rgb() string for your CSS takes a single tap. Short 3-digit HEX codes are expanded automatically, and all conversion math runs 100% in your browser — no color value is ever uploaded.

🔒 100% private — files never leave your device

Loading…

How to use

  1. Pick a color with the color picker, or type a value into the HEX, RGB or HSL field.
  2. The other two formats and the live preview swatch update automatically as you type.
  3. Check the swatch to confirm you have exactly the color you want.
  4. Click Copy next to the HEX, RGB or HSL value you need and paste it into your project.

Frequently asked questions

Which color formats does the converter support?

It converts between HEX (for example #4f8cff), RGB (for example rgb(79, 140, 255)) and HSL (for example hsl(218, 100%, 65%)). Editing any one field instantly updates the other two and the preview swatch.

Is my color data uploaded anywhere?

No. All conversion happens locally in your browser using simple math. No color value or picker selection is ever sent to a server, so the tool works even offline once loaded.

Can I paste a 3-digit HEX code?

Yes. Short HEX codes like #abc are automatically expanded to their full 6-digit form (#aabbcc) before converting, so you can paste shorthand values directly.

Does it support CMYK or alpha transparency?

No. This tool focuses on HEX, RGB and HSL only. It reads the RGB values from rgba()/hsla() strings but ignores the alpha channel, and CMYK is not supported.

Are HEX, RGB and HSL conversions exact?

HEX and RGB map one-to-one and are always exact. HSL values are rounded to whole numbers, so a round trip may shift by a point — this matches how browsers handle HSL and is invisible on screen.

Can I use the results in CSS?

Yes. The RGB and HSL outputs are formatted as ready-to-use rgb(...) and hsl(...) strings, and the HEX value works anywhere a color is expected, so you can copy and paste straight into your stylesheet.

About this tool

Free online color converter: convert HEX to RGB, RGB to HSL, and HEX to HSL instantly. Runs 100% in your browser with a live preview swatch — nothing is uploaded.

Related tools