HEX to RGB converter

Paste a hex value and read it back as RGB, HSL and CSS, with the contrast against black and white. The conversion happens in this tab, so the value you paste is never uploaded anywhere.

#2F80ED

  • RGB rgb(47, 128, 237)
  • HEX #2F80ED
  • HSL hsl(214, 84%, 56%)
  • CSS #2F80ED

Contrast against black and white

  • 5.43 to 1

    Black text on this colour

    AA ✓AAA ✗AA large ✓

  • 3.87 to 1

    White text on this colour

    AA ✗AAA ✗AA large ✓

Black text is the stronger pairing on this colour.

What a hex colour actually is

Hex is not a separate colour space. It is the same three sRGB channels written in base 16, two digits each, 00 to FF, which is 0 to 255 in decimal. #2F80ED is red 2F (47), green 80 (128), blue ED (237). Converting it to RGB is unpacking, not translating, and nothing is lost in either direction.

The three-digit shorthand is not a smaller palette. #ABC is #AABBCC with every digit doubled, so only colours whose channel pairs happen to repeat can be written that way. Case is irrelevant; this tool prints uppercase because Figma, Sketch and most colour pickers do.

Why the handover is almost always hex

A hex value is one token with no spaces, commas or brackets. It survives a Slack message, a JSON theme file, a URL, a spreadsheet cell and a brand guideline without being reformatted or split across a line. That is why design tools put it in the field you can select, and why the colour you receive from a designer arrives in this form even when the code that consumes it wants numbers.

The eight-digit form, and the trap in it

CSS Color 4 added #RRGGBBAA, so #2F80ED80 is that blue at roughly 50% alpha. Two things to watch. Android writes the same idea the other way round, as #AARRGGBB, with alpha at the front — a value lifted from an Android theme and pasted into CSS reads as a different colour at the wrong opacity, and it will look plausible enough to ship. And eight-digit hex, while fine in every current browser, was not understood by IE11 or old Android WebViews, so a build that still supports those needs rgba() instead.

When hex stops being the right container

The moment you need to do something to a colour rather than state it, you need the channels back. A hover state 8% darker, a 12% tint, a gradient stop, a canvas fill, a contrast check — all of it is arithmetic on three numbers, and a hex string has to be unpacked first. When the maths is done, RGB to HEX turns the three numbers back into the string you paste into a stylesheet. Hex also only ever describes sRGB: it cannot express a Display P3 red or an oklch() lightness, so wide-gamut work leaves it behind and keeps it only as the fallback line.

Check the contrast while it is open

The ratios above are the cheapest check in the process and the one most often skipped. WCAG asks for 4.5 to 1 for body text, 3 to 1 for text at 24px or 19px bold, and 7 to 1 for the enhanced AAA level. A brand colour that fails against white is not an argument for changing the brand, only for finding out before the button ships with white text on it. Alpha is excluded from that maths deliberately, because what a translucent colour scores depends on whatever sits behind it.

Designing a site? Siter.io builds it from Figma.

Hey there 👋  Friends from designmodo are here to help!