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.

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 back can differ by one in a channel. 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.