Color Converter

Convert between HEX, RGB, and HSL color formats instantly. Use the color picker or type a value.

Pick a color, then click Convert

Or convert by typing

About the Colour Converter

This color converter translates between HEX, RGB and HSL. Enter a colour in whichever notation you have and read the others, with a picker and a swatch to confirm the result is the colour you meant.

A color converter is needed because each notation suits a different job. HEX is compact and dominates stylesheets, RGB matches how screens actually emit light, and HSL describes a colour the way a person thinks about it — hue, saturation, lightness.

HSL is the one worth converting to when adjusting a colour. Making a hex value 10% darker requires changing three interdependent channels; in HSL it is one number. That is why lightening, darkening and generating tints is far easier in HSL.

HSV is close to HSL but differs in its third channel and is what most colour pickers use internally, which is why a value copied out of a design tool sometimes does not match what you expected in CSS. All four are shown together so the relationships are visible.

How to use the Colour Converter

  1. Enter a colour. Type a HEX, RGB, HSL or HSV value.
  2. Read the conversions. Every other notation appears immediately.
  3. Check the swatch. Confirm visually that it is the colour you intended.
  4. Copy what you need. Take the notation your stylesheet or tool wants.

Colour Converter features

  • Converts between HEX, RGB and HSL
  • Colour picker as well as typed input
  • Swatch preview of the current colour
  • All notations updated at once
  • Copy any value

Frequently asked questions

Which formats are supported?

HEX, RGB and HSL, converted between each other in any direction. Enter whichever one you have to hand and the other two follow.

When is HSL more useful than HEX?

Whenever you need to adjust a colour rather than just state it. Making a shade 10% darker is a single change to the lightness value in HSL, and guesswork in HEX — which is why design systems tend to be built on it.

What do the HSL numbers mean?

Hue is a position on the colour wheel from 0 to 360 degrees, saturation is how vivid it is as a percentage, and lightness runs from 0% black through 50% pure colour to 100% white.

Does it handle transparency?

No — this converts solid colours only. For an alpha channel, append the value yourself as an eight-digit hex code or as the fourth argument of rgba().