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.
These are the values for the last colour that parsed. The message above says what is wrong with the one in the field.
#2F80ED
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.
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.
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.
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.
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.
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.
SVG to PNG
Convert SVG files to PNG at any scale, in the browser. Batch and transparent background.
RGB to HEX
The other direction, with the same converter underneath.
PNG to SVG
Trace a bitmap into vector paths, in the browser. Honest about when it works.
CSS Grid generator
Draw a grid, copy the CSS. Flexbox on a second tab.
Mesh gradient generator
Layered radial gradients, exportable as CSS or PNG.
OG image generator
Make a 1200x630 share card, and check the tags on a page you already have.
Website mockup generator
Drop a screenshot into a browser or device frame and export it.
Designing a site? Siter.io builds it from Figma.