A HEX color code is a six-character way to write an RGB color, where each pair of characters represents the red, green, or blue channel in base-16 (hexadecimal) notation. The digits 00 mean 0, and FF mean 255, so the hex code #3B82F6 describes the color R=59, G=130, B=246. Converting RGB to HEX is therefore a simple remapping of three decimal numbers (0–255) into three two-digit hex numbers, and a free RGB to HEX converter handles the arithmetic and shows the result beside a live color preview.
Designers, front-end developers, and anyone working in CSS regularly switch between RGB and HEX because design tools often output one format while code expects the other. A color picker in Photoshop might hand you "R 91, G 155, B 213", but a stylesheet wants a string like "#5B9BD5". Doing the conversion by hand is possible (it is just base conversion), but it is fiddly and easy to mistype. A purpose-built tool removes the friction: you type the three numbers, and the matching hex appears immediately, with a swatch to confirm the color actually matches what you expected.
HEX is not a different color space from RGB. It is simply a more compact notation for the exact same sRGB color. A six-digit hex string is read as three pairs of hexadecimal digits, and each pair is decoded back to a decimal value between 0 and 255. This is why the conversion is lossless in both directions: nothing about the color changes, only the way it is written. The only thing to watch for is the three-digit shorthand (e.g. #abc), which expands to #aabbcc — a duplicated-digit shortcut the tool also supports.
How RGB and HEX Encode the Same Color
RGB describes a color as the intensity of three light channels: red, green, and blue, each on a scale of 0 to 255. Zero means "none of that channel" and 255 means "the channel is at full intensity." Mixing R=255, G=0, B=0 gives pure red; mixing R=0, G=0, B=0 gives black; R=255, G=255, B=255 gives white. There are 256 × 256 × 256 = 16,777,216 possible combinations, which is the standard 24-bit sRGB color space most screens display.
HEX uses the same three channels but writes each value in base-16 instead of base-10. Base-16 (hexadecimal) uses the digits 0–9 followed by A–F, so 10 in hex equals 16 in decimal, and FF in hex equals 255 in decimal. A full HEX code has six characters: two for red, two for green, and two for blue. The leading "#" is just a convention used in CSS and HTML to mark the value as a color; it is not part of the actual code.
Reading and Writing HEX by Hand
You can convert a single RGB channel by dividing the decimal value by 16 to get the first hex digit and taking the remainder for the second digit. For example, R=59 becomes 59 ÷ 16 = 3 with a remainder of 11, which is 3B in hex. R=130 is 8 with a remainder of 2, giving 82. R=246 is 15 with a remainder of 6, giving F6. Joined together, R=59, G=130, B=246 becomes #3B82F6.
Going the other way is just as quick once you have done it a few times. Each pair of hex digits is a base-16 number: multiply the first digit by 16, add the second digit, and you have the decimal value 0–255. So 3B is 3×16 + 11 = 59, 82 is 8×16 + 2 = 130, and F6 is 15×16 + 6 = 246. For very common colors, designers often memorize shortcuts — #000 is black, #FFF is white, #FF0000 is pure red — but for everything in between, a tool saves time and typos.
The three-digit shorthand works by duplicating each digit. #abc means #aabbcc, #f00 means #ff0000, and #0a0 means #00aa00. Browsers accept this shorthand in CSS, and a good converter expands it for you when you paste it in.
Convert RGB to HEX with the Free Tool
The fastest way to switch between formats is to use the RGB to HEX tool, which runs entirely in your browser and updates the result as you type.
- Enter the red value (0–255) in the R field. The swatch and output fields update immediately.
- Enter the green value (0–255) in the G field. You will see the HEX and HSL values change in real time.
- Enter the blue value (0–255) in the B field. The full six-digit hex code, e.g. #3B82F6, appears next to the live color preview.
- Click the Copy button beside the HEX value to grab a clean string you can paste into CSS, HTML, Figma, or a design handoff doc.
- Need RGB or HSL instead? Click the Copy button beside either of those fields — all three formats are generated from the same input.
If you already have a HEX code and need the RGB values, paste it (with or without the leading "#") into the HEX field. The tool accepts both six-digit (#3B82F6) and three-digit (#abc) shorthand and reads back the matching R, G and B values instantly.
Common Color Values
The table below shows a few widely used colors in all three formats. Values are taken from the CSS Color Module Level 4 specification and are the same on every standards-compliant browser.
| Color | HEX | RGB | HSL |
|---|---|---|---|
| Black | #000000 | 0, 0, 0 | 0°, 0%, 0% |
| White | #FFFFFF | 255, 255, 255 | 0°, 0%, 100% |
| Pure red | #FF0000 | 255, 0, 0 | 0°, 100%, 50% |
| Pure green | #00FF00 | 0, 255, 0 | 120°, 100%, 50% |
| Pure blue | #0000FF | 0, 0, 255 | 240°, 100%, 50% |
| Tailwind blue-500 | #3B82F6 | 59, 130, 246 | 217°, 91%, 60% |
When to Use HEX vs. RGB in CSS
For most web work, HEX is the go-to format. It is shorter (a six-character string versus "rgb(59, 130, 246)"), widely supported since the earliest CSS color modules, and what most design systems export. The MDN CSS color reference documents every accepted color format, including the modern rgb() and rgba() notations, but HEX remains the most portable choice.
RGB notation becomes useful when you need transparency. The modern syntax rgb(59 130 246 / 80%) adds an alpha channel for opacity, something a HEX code cannot express on its own. If you are working with translucent overlays, gradients, or layered UI elements, paste the HEX into the tool, copy the RGB, and add the alpha value by hand.
If you are designing for print, RGB values are not enough — you will also need a CMYK conversion so the color matches on paper. The RGB to CMYK converter takes the same inputs and outputs print-ready percentages. For everything that stays on a screen, though, RGB and HEX are interchangeable, and the choice between them is purely a matter of style and team preference.
Tips for Picking HEX Values Faster
Build a small library of brand colors in HEX so you can paste them directly into CSS without converting anything. Most design tools, including Figma, Sketch, and Adobe XD, can be set to export HEX by default, which removes the need for any conversion on the design side.
When a designer hands you RGB sliders, treat the values as a starting point rather than a final answer. If a value looks slightly off when you paste the HEX into a browser, the original color picker may have been outside the sRGB gamut. Round the numbers mentally and pick the nearest clean hex (e.g. "60, 130, 250" becomes #3C82FA) for a result that looks identical on screen and is easier to read in code.
For projects that need a coordinated palette, start with one base HEX and feed it into a color palette generator. You will get complementary, analogous, and triadic harmonies in matching HEX values, and the live preview lets you confirm the palette looks right before you commit it to the design system.
More on this topic: How to Check Color Contrast for Web Accessibility in Seconds.
If you're weighing options, How to Get a Color Gradient in CSS Without the Guesswork covers this in detail.