HEX / RGB / HSL Converter

Runs in browser Utilities

Three synchronised inputs — edit HEX, RGB or HSL and the others update immediately with a swatch preview and copyable CSS values.

Privacy: This tool runs entirely in your browser. Your input never leaves your device.

What is the difference between hex, RGB and HSL colours?

They are three notations for sRGB colours: #1e90ff writes the red, green and blue channels as two hex digits each; rgb(30 144 255) writes the same channels as decimals from 0 to 255; hsl(210 100% 56%) describes the hue on a 360° wheel, its saturation and lightness, which makes "a lighter shade of the same blue" a change of one number. CSS Color Level 4 defines all three plus alpha, and its conversion formulas are exact, but HSL is usually written with rounded numbers: hsl(210 100% 56%) is #1f8fff, not exactly #1e90ff, whose precise HSL is about hsl(209.6 100% 55.9%).

How to use HEX / RGB / HSL Converter

  1. Type or paste a value into HEX, RGB or HSL — the other two update as you type.
  2. Fine-tune with the sliders or the picker.
  3. Copy the format you need.

HEX / RGB / HSL Converter features

  • Three synchronised inputs — HEX, RGB and HSL — plus a native colour picker
  • Sliders for R, G, B, hue, saturation, lightness and alpha
  • Live swatch with alpha checkerboard and contrast-aware label
  • Copy buttons for HEX, RGB and HSL strings
  • Contrast ratio on white and black
  • Accepts legacy and modern CSS syntaxes

HEX / RGB / HSL Converter example

RGB to HEX and HSL

Input:

rgb(255, 99, 71)

Output:

#ff6347 · hsl(9, 100%, 64%)

Frequently asked questions about HEX / RGB / HSL Converter

How do the three inputs stay in sync?

Edit HEX, RGB or HSL (or move a slider / use the picker) and the other representations recalculate instantly. Invalid text shows an error without clearing the other fields.

Is alpha supported?

Yes. 8-digit hex, rgba() and hsla() values set the alpha channel; the swatch shows it over a checkerboard.

Why does my HSL round-trip give a slightly different HEX?

HSL values are shown rounded to whole numbers for readability, so converting the rounded HSL back can move a channel by a few steps: usually one or two, and up to about five for some saturated colours. The internal value keeps full precision.

What is the modern rgb(r g b / a) syntax?

CSS Color Level 4 allows space-separated channels with an optional slash-alpha. Both the legacy comma syntax and the modern one are accepted and offered.

References

  • CSS Color Module Level 4W3CThe colour syntaxes browsers accept — hex, rgb(), hsl(), hwb(), lab() and more — and how they convert between each other.