HEX notation writes a color as #RRGGBB, where each pair of digits is a red, green or blue channel expressed in base 16, which makes a HEX code nothing more than RGB in a more compact form. In the standard 24-bit color space used by CSS, HTML and every design tool you can name, each channel runs from 0 to 255. HEX writes those same three numbers using two hexadecimal digits per channel, ranging from 00 to FF. Multiply 256 possible values for red by 256 for green by 256 for blue and you arrive at exactly 16,777,216 distinct colors, the same total that HEX covers with six digits. That is why converting between the two is a daily task for anyone who works with stylesheets, design files or brand palettes, and why a small dedicated converter beats mental math every time. The RGB to HEX tool handles the round trip in both directions and shows the live swatch next to the value, so you can confirm the shade before you copy it into CSS, a Figma file or an image editor.
What RGB and HEX actually describe
RGB is a description of color by light. A color is split into a red channel, a green channel and a blue channel, and each one is given a number from 0 to 255 that says how much of that primary light to mix into the final pixel. At (0, 0, 0) every channel is off and the pixel reads as black. At (255, 255, 255) every channel is fully on and the pixel reads as white. At (255, 0, 0) only red is on and the pixel reads as pure red. Every other shade on a screen — every photograph, every gradient, every UI button — is some combination of those three channels at some level between 0 and 255.
HEX is the same color described differently. Instead of writing rgb(255, 0, 0) you write #ff0000. The number 255 written in base 16 is ff, so each channel gets exactly two characters. The total length is always six digits after the hash, which is why a HEX code is sometimes called a six-digit hex or a hex triplet. It is shorter to type, easier to copy between design tools and stylesheets, and has been the de facto format in web design since the early days of CSS. The two notations describe exactly the same color space — they are simply different ways of writing the same three numbers.
Why two formats exist for the same color
RGB is the natural language of pixels and image editors. Photoshop's color picker, the eyedropper in your operating system and most image-processing libraries all speak in decimal channel values. CSS and HTML lean on HEX because a single token like #3b82f6 is easy to drop into a style rule, easy to search for in a codebase, and easy to recognize by eye as a specific brand blue. Designers still think in RGB, while developers and design tokens tend to settle on HEX, which is why the conversion is a daily chore.
That split is the source of the constant back-and-forth. A designer hands you a spec in rgb(59, 130, 246) and you need the CSS form. A design system documents its palette in HEX and an image editor wants RGB triplets. A brand guide publishes HEX and you want the HSL equivalent so you can generate lighter and darker variants for hover states. Two formats, one color, dozens of places to slip up, and that is exactly the gap that a reliable converter fills. HEX is also more compact than RGB in code. The string #3b82f6 is 7 characters, while the equivalent rgb(59, 130, 246) is 18 characters, and that savings compounds across every color variable in a modern design system.
How an RGB value becomes a HEX code
The conversion is just a change of base. Decimal (base 10) is what you type; hexadecimal (base 16) is what HEX uses. Each decimal value from 0 to 255 maps to a unique two-character hex string from 00 to ff. The conversion is mechanical: take a channel, divide by 16 to get the first digit, take the remainder as the second digit, and look up any remainder from 10 to 15 as a through f. Do that three times, once per channel, and concatenate the three pairs.
For a single concrete example, take the popular UI blue rgb(59, 130, 246):
- Red: 59 ÷ 16 = 3 remainder 11 → 3b (since 11 in hex is b).
- Green: 130 ÷ 16 = 8 remainder 2 → 82.
- Blue: 246 ÷ 16 = 15 remainder 6 → f6 (since 15 in hex is f).
- Concatenated: #3b82f6.
That matches the HEX code Tailwind and many other modern design systems use for their primary blue, which is a good sanity check. The reverse direction — taking a HEX code and recovering the three decimal channels — works the same way, just from base 16 back to base 10. Doing this by hand is straightforward for one or two colors, but it gets old fast when you are working through a full palette, which is where the RGB to HEX converter earns its place.
Convert RGB to HEX (and back) in your browser
- Open the RGB to HEX tool in your browser.
- Type a value into the Red, Green and Blue fields, each between 0 and 255. The HEX field, the live color swatch and the HSL readout update as you type.
- Use the Copy button next to the HEX value to paste a CSS-ready code like #3b82f6 straight into your stylesheet.
- To go the other way, paste any HEX value — #3b82f6, ABC, #abc or f00 — into the HEX field. The three RGB channels appear next to the swatch, ready to drop into an image editor.
- Read the HSL readout — hue as 0–360°, saturation and lightness as 0–100% — when you need to nudge a color lighter, darker or more muted without guessing at channel values.
If you paste a three-digit shorthand like #abc, the tool expands it to #aabbcc automatically. Input is case-insensitive, so ABC, #abc and abc all resolve to the same color. The output is always normalized to lowercase six-digit form with each channel zero-padded, so a value of 0 shows up as 00 rather than a bare 0, which is the small detail that trips up hand-written conversions. If a channel is out of range or fractional, it is clamped to the nearest integer in 0–255 instead of throwing an error, and a malformed HEX — wrong length or illegal characters — is flagged clearly rather than silently producing a wrong color. Every conversion runs locally in JavaScript, so palettes and unreleased colors never leave your device.
Reading HSL alongside RGB and HEX
HEX and RGB tell you exactly which red, green and blue intensities make up a pixel. That is precise without being intuitive. If you want a slightly lighter version of a brand color, you cannot easily see whether to nudge the green channel from 130 to 145 or to 160. HSL describes the same color the way humans tend to reason about it: a hue angle from 0 to 360 degrees around the color wheel, plus saturation and lightness as percentages from 0 to 100.
For example, the UI blue rgb(59, 130, 246) sits at hue ≈ 217°, saturation ≈ 91%, lightness ≈ 60%. To produce a hover state you might keep the same hue and saturation and bump lightness to about 70%; to produce a pressed state you might drop lightness to about 50%. Those tweaks are one slider in HSL, while the equivalent change in RGB requires you to guess at three new channel values and re-run the math to HEX. The converter reports all three formats at once so you can move in any direction.
This is also why HSL is a natural fit for design tokens. A token can be expressed as --brand-blue: hsl(217 91% 60%), with the saturation and lightness adjusted programmatically to derive lighter and darker shades, and each derived shade can be converted straight back to HEX with the same tool for any context that prefers a six-digit code.
Quick reference: well-known colors in both formats
These reference values are useful for sanity-checking a converter or memorizing a few anchors for hand calculations. They are the same standard colors the 24-bit space uses everywhere, so the RGB and HEX pairs must line up exactly across any well-behaved tool.
| Color | RGB | HEX |
|---|---|---|
| Black | rgb(0, 0, 0) | #000000 |
| White | rgb(255, 255, 255) | #ffffff |
| Pure red | rgb(255, 0, 0) | #ff0000 |
| Pure green | rgb(0, 255, 0) | #00ff00 |
| Pure blue | rgb(0, 0, 255) | #0000ff |
| Popular UI blue | rgb(59, 130, 246) | #3b82f6 |
For a deeper set of conversion tables across the spectrum, the RGB to HEX chart reference covers many more named anchors and walks through the conversion pattern across a wider range of values.