Hex to RGB Converter
Convert hex color codes to RGB, or RGB values back to hex — both directions update live as you type, with a swatch showing the actual color.
Hex
RGB
Why This Tool Matters
Colors change format every time they move between people and tools. A designer hands off a brand palette as hex codes, but the developer building the page needs rgb() — or rgba(), because the button's hover state should be the same orange at half opacity. A value copied out of Figma, a style guide, or a screenshot tool arrives in one format when the stylesheet, chart library, or design token file expects the other. Converting by hand means working out hexadecimal pairs in your head, which is slow and one misread digit away from the wrong color.
The swatch matters as much as the numbers. A code like #3A7BD5 tells you nothing until you see it, and checking a color before it goes into a pull request or a client email catches the typo that would otherwise ship. Because the conversion works both ways, you can also nudge a single RGB channel — a little less red, a little more blue — and immediately get the hex code for the adjusted color.
How to Use
- 01
Enter a color
Type a hex code, or fill in the R, G, and B values.
- 02
Check the swatch
The preview and the other format update live.
- 03
Copy the value
Copy the hex or rgb() value straight into your CSS.
More Text Tools
- Don't have a code yet? Choose one with the Hex Color Picker
- Tidying the stylesheet that uses them? Try the CSS Minifier
- Keeping colors in a design tokens file? Check it with the JSON Validator
- Need to find every color code in a stylesheet? Try the Regex Tester
- Found an image embedded as a data URI? Try Base64 Decode
- Browse all Developer Tools
- Try the full Case Converter
Frequently Asked Questions
What's the difference between hex and RGB color formats?
They describe exactly the same colors, just written differently. Both give the amount of red, green, and blue on a scale of 0 to 255. RGB writes those three amounts as decimal numbers, like rgb(255, 87, 34); hex writes each one as a two-digit hexadecimal number and runs them together, so the same color is #FF5722 — FF is 255, 57 is 87, and 22 is 34. Hex is more compact and common in design tools and style guides, while rgb() is easier to read and to adjust by hand, and its rgba() form adds transparency.
Does this support 3-digit shorthand hex codes like #FFF?
Yes. A 3-digit code is shorthand where each digit is doubled, so #FFF is #FFFFFF (white) and #F00 is #FF0000 (red). Type either form, with or without the leading #, and the tool expands it automatically. The hex output is always shown in the full 6-digit form.
Can I convert RGB back to hex too?
Yes — the tool works in both directions. Type values from 0 to 255 into the R, G, and B fields and the hex code, the rgb() value, and the color swatch all update as you type. Editing the hex field fills the RGB fields back in, so you can switch between the two freely.
Does this support RGBA (with transparency)?
Yes. Set the Alpha field to a value between 0 (fully transparent) and 1 (fully opaque) and the output switches to rgba() — for example rgba(255, 87, 34, 0.5) — with the matching 8-digit hex code, #FF572280. It also works the other way: 8-digit hex codes and 4-digit shorthand like #F008 are read as colors with transparency. The swatch shows a checkerboard behind semi-transparent colors so you can see how see-through they are.
Why does my hex code show an error?
A hex color can only contain the digits 0–9 and the letters A–F, and it has to be 3, 4, 6, or 8 characters long (not counting the #). The most common problems are a letter outside A–F — an O typed instead of a zero, for instance — a code that was cut off when copying, or an extra character such as a trailing semicolon. The error message says which of these it is.