twoodo
/

Home/Tools/Colour & accessibility

HEX to RGB Converter

Type any format. Every other one appears below.

Hex is RGB, written differently

This catches people out: there is no real conversion happening. A hex code already is three RGB values, just written in base 16 instead of base 10.

Split #3b82f6 into pairs: 3b, 82, f6. Each pair is one number from 0 to 255. In hexadecimal the digits run 0–9 then a–f, so a is 10 and f is 15. The first digit counts sixteens and the second counts ones:

3b = (3 × 16) + 11 = 59

Do the same for the other two and you get rgb(59, 130, 246). That is the whole operation.

What each format is actually for

  • HEX — the same three numbers as RGB, written in base 16. Compact and universal on the web, and completely opaque to read: nobody can tell at a glance that #3b82f6 is a mid blue.
  • RGB — how screens actually work. Three light emitters per pixel, each 0 to 255. Good for machines, poor for reasoning about colour, because changing one number moves hue, saturation and lightness all at once.
  • HSL — hue, saturation, lightness. Built for humans. Want the same colour but darker? Lower the L and leave the rest alone. This is why design systems are built in HSL and shipped in HEX.
  • HSV / HSB — similar, but the third number is brightness rather than lightness. At 100 % lightness HSL is always white; at 100 % brightness HSV is the most vivid version of the hue. Image editors tend to use HSV, CSS uses HSL.
  • CMYK — for print, where ink subtracts light rather than adding it. The conversion shown here is the simple arithmetic one. Real print work uses ICC profiles that account for the specific paper and press, so treat this as indicative rather than production-ready.

Why hex is two digits per channel

Each pair is one byte, giving 256 levels per channel and 16.7 million combinations. The three-digit shorthand simply doubles each digit, so #f80 is #ff8800 — which is why it can only express 4,096 colours.

Common uses

  • Moving a colour between tools that expect different notations.
  • Adjusting a colour rather than guessing at a new one.
  • Building a palette from a single brand colour.
  • Checking legibility using the contrast figures.

Questions people ask

How do I convert hex to RGB by hand?

Split the code into three pairs and read each as a base-16 number. 3b is (3 × 16) + 11 = 59.

What do the letters in a hex code mean?

Hexadecimal digits above 9. a is 10, b is 11, and so on up to f, which is 15.

Why would I use HSL instead of RGB?

Because it matches how people think about colour. To darken something you lower one number instead of scaling three and hoping the hue holds.

Is any precision lost?

No. Hex, RGB and HSL describe the same colours — only the rounding of HSL's percentages introduces any error, and it is well under one step of 255.

Nothing is uploaded

The colour maths runs in the page. Where a tool takes an image, your browser reads it from your disk and draws it onto a canvas locally — no copy is transmitted, because this site has no server that could receive one. The about page lists every request the site makes, read live from your own browser.