Skip to main content

Color Converter

English

Convert between HEX, RGB, and HSL color formats.

hex
#3b82f6
rgb
rgb(59, 130, 246)
hsl
hsl(217, 91%, 60%)
All calculations performed locally in your browser. No data sent to server.

Results are for informational purposes. Verify results with other sources.

HEX, RGB and HSL — the same colour, three ways

These three notations describe identical colours; they differ in what they make easy. HEX and RGB address the red, green and blue channels directly. HSL separates hue from saturation and lightness, which is why it is the one to reach for when building a palette.

How it works

  • HEX is two hexadecimal digits per channel: #RRGGBB, each pair a value from 00 to FF (0–255).
  • RGB is the same three numbers in decimal, sometimes with an alpha channel as rgba().
  • HSL gives hue in degrees around a colour wheel (0–360), plus saturation and lightness as percentages.
HEX → RGB:  split into pairs, read each as base 16
  #3B82F6 → 3B=59, 82=130, F6=246 → rgb(59, 130, 246)

RGB → HSL:  normalise to 0–1, then
  L = (max + min) / 2
  S = (max − min) / (1 − |2L − 1|)
  H = the channel-dependent angle of the max component

Worked example

Converting #3B82F6 — a common interface blue — through all three notations.

  1. 3B = 3×16 + 11 = 59, 82 = 8×16 + 2 = 130, F6 = 15×16 + 6 = 246
  2. rgb(59, 130, 246)
  3. normalise: r=0.231, g=0.510, b=0.965 → max=0.965 (blue), min=0.231
  4. L = (0.965 + 0.231) / 2 = 0.598 → 60%
  5. S = (0.965 − 0.231) / (1 − |2(0.598) − 1|) = 0.734 / 0.804 = 0.913 → 91%
  6. blue is the max channel, giving H ≈ 217°

hsl(217, 91%, 60%). To build a palette from this, hold hue at 217 and vary lightness — that is the move HSL exists to make trivial and HEX makes painful.

Reading the result

  • Equal lightness in HSL does not mean equal perceived brightness. Yellow at 50% lightness looks far brighter than blue at 50%, because HSL is a simple mathematical transform of RGB and knows nothing about human vision. For accessible contrast, compute the WCAG contrast ratio rather than comparing lightness values.
  • Three-digit HEX is shorthand where each digit is doubled: #3BF means #33BBFF, not #03B0F0.
  • Rounding accumulates. Converting HEX → HSL → HEX can shift a channel by one, so keep one notation authoritative in your design tokens rather than round-tripping.
  • Newer CSS colour spaces — oklch in particular — fix HSL's perceptual problem and are worth using where browser support allows.

Common questions

Which notation should I use in CSS?
HSL or oklch for anything you generate systematically, such as tints and shades of a brand colour, because changing one number does one thing. HEX is fine for fixed values handed over by a designer.
Why does my colour look different in another app?
Almost always a colour-profile difference. The same RGB triple renders differently in sRGB and Display P3, which is why screenshots of the same page can look mismatched between devices.

Sources