▶ Subscribe on YouTube
Home / Tools / Developer Tools

Color Converter

Convert between HEX, RGB, and HSL color formats.

Color Picker
HEX
RGB
HSL
Shades

What does this tool do?

Web colours are expressed in three main formats: HEX (#FF5733 — used in design tools and CSS), RGB (rgb(255, 87, 51) — red, green, blue values from 0 to 255), and HSL (hsl(11, 100%, 60%) — hue in degrees, saturation, and lightness as percentages). Designers often work in HEX, but HSL is much more intuitive for creating colour variations — you just adjust the lightness value. This tool converts between all three instantly and shows you a live preview of the colour.

How to use it

  1. Type a colour value in any format — HEX, RGB, or HSL.
  2. The other two formats update automatically.
  3. A preview swatch shows you the actual colour.
  4. Click Copy next to any format to grab it for your CSS or design file.

Pro tips

  • HSL is the easiest format for creating colour scales — keep hue and saturation the same, just vary the L value from 10% (dark) to 90% (light).
  • A 3-digit HEX code like #F53 expands to 6 digits by doubling each character: #FF5533.
Example

Enter the HEX value: #FF5733

RGB: rgb(255, 87, 51)
HSL: hsl(11, 100%, 60%)

The swatch shows the vivid orange-red colour.

When would you use this?

  • Translating a colour from a Figma design file into your CSS stylesheet
  • Creating lighter and darker variants of a brand colour by adjusting HSL lightness
  • Checking whether two slightly different HEX codes are actually the same colour
  • Converting RGB values from a designer's handoff into the HEX format your codebase uses