Hex to RGB — And Back, With Contrast Built In
Turn on JavaScript to convert — the arithmetic runs in the browser.
Treat this as a starting point, not a print value. A browser has no printer or paper profile to convert against, so any CMYK a web page gives you is a formula, not a match. Ask your printer for the real conversion.
Contrast
- On white —
- On black —
Against a second color
Ratio —
About Hex to RGB
Converting a color is arithmetic, and almost every page that does it stops there. The number you actually needed is usually the next one: can text be read on this.
This page does both. Hex, RGB and HSL all edit in either direction, and the contrast ratio is worked out at the same time — against white, against black, and against any second color you set. Those are the three questions that come up when a color has to go into a real interface rather than a mood board.
One thing is deliberately hedged. CMYK appears, and it is labeled as an approximation, because a browser has no printer profile and no paper to convert against. A page that hands you exact CMYK is handing you a formula and calling it a match.
Everything runs here. Nothing you enter is uploaded, and closing the tab discards it.
Getting a value you can paste
- Type into whichever field you already have. A hex from a design file, RGB from a screenshot tool, HSL if you are adjusting by hand — the other two follow immediately.
- Use the picker when you are choosing rather than converting. It writes into the same fields, so the values stay in sync.
- Read the two swatches before copying. A color that looks fine on the page you are designing may be the one that fails on the opposite background.
- Set a second color for the pair you actually ship: your text color against your real background, not against white. That is the ratio an accessibility check will use.
- If the ratio lands just under a threshold, move lightness rather than hue. A few points of L usually clears it without changing the color you chose.
Frequently asked questions
Is this hex-to-RGB converter free, does it need an account, and is anything I enter sent anywhere?
It is free, needs no account, and sends nothing. The conversion and the contrast math run in this browser and are gone when the tab closes. There is no color history kept for you either, so copy anything you want to keep.
Why is the CMYK marked as approximate?
Because an accurate conversion needs to know the press, the ink and the paper, and a browser knows none of them. What a web page can do is apply a standard formula, which gets you a usable starting point and nothing more. For anything that will actually be printed, the conversion belongs with whoever is printing it.
What contrast ratio do I need?
The common thresholds are 4.5 for body text and 3.0 for large text, and this page marks both as you type. Those numbers come from accessibility guidelines rather than from us, and clearing them is a floor and not a goal — text at 4.6 is legal and still tiring to read.
My HSL value came back slightly different after converting twice.
A small drift after two conversions is rounding, not a bug. HSL is derived from the RGB numbers, and going there and back has to land on whole values at each step, so the last digit can move by one. The hex you started with is the value to keep; treat HSL as a way to adjust rather than as storage.
How is this different from your color vision tests?
The color vision tests measure how you see color, and this page converts how a color is written. The color blindness screening and the perception test both put patterns in front of you and score what you can tell apart; this page has nothing to score. If you arrived wanting to check your eyes rather than a value, those are the ones.
Can it give me a brand color system's code?
No. Those systems are proprietary and their values are licensed, so we do not carry a table of them. What is here is the open arithmetic between hex, RGB and HSL, which is enough for anything that ends up on a screen.