HEX is just RGB rewritten in base 16: a color written as #RRGGBB packs the red, green and blue channels into three two-digit pairs, where 00 means 0, FF means 255, and the six digits together describe 256 × 256 × 256 = 16,777,216 distinct colors — the same 24-bit color space used by CSS, HTML, design tools like Figma, and most style guides. Because RGB and HEX describe the exact same set of colors, the conversion between them is purely a change of base, not a change of color, which means every RGB value has exactly one correct HEX value — and only the subset whose channels are doubled hex digits (00, 11, 22, …, FF) also has a valid three-digit shorthand. That is also why most of the mistakes people make are not math mistakes at all — they are small notation slips such as a dropped leading hash, a missing zero, or an unexpanded shorthand. The simplest way to avoid those slips is to let a converter that knows the rules — shorthand expansion, zero-padding, case handling, and out-of-range clamping — do the writing while you read the live preview and confirm the color is the color you intended.
How RGB and HEX Actually Relate
The conversion formula in plain English is straightforward. Each of the three channels is the same integer you already use in rgb() — a number from 0 to 255 — and HEX writes that integer in base 16, padded to exactly two characters. So 0 becomes "00", 9 stays "09", 10 becomes "0A", 255 becomes "FF", and any number in between lands somewhere in the same range. The three two-character results, prefixed with "#", form the full HEX code.
A worked example using the popular UI blue. Take RGB (59, 130, 246) — the channel values behind many "blue-500" style swatches. To get the matching HEX, convert each channel to base 16 by hand:
- 59 ÷ 16 = 3 remainder 11 → "3B"
- 130 ÷ 16 = 8 remainder 2 → "82"
- 246 ÷ 16 = 15 remainder 6 → "F6"
Concatenate those with a leading "#" and the result is #3B82F6, which the converter normalizes to the lowercase #3b82f6. Both forms describe the same color, and CSS accepts either — the lowercase form is just a convention most style guides use. If you want a deeper walkthrough of what each pair of digits means, the RGB to HEX explained guide covers the channel pattern in more detail.
The shorthand rule is the other piece of the puzzle. When all three pairs share the same digit twice in a row — that is, each pair is a doubled character — HEX can be written in three characters instead of six. So #abc expands to #aabbcc, #f00 becomes #ff0000 (pure red), and #fff becomes #ffffff (white). The expansion is always double-each-digit, never truncate; #abc does not mean "the average" or "the first three of six".
| RGB | HEX (long form) | HEX (shorthand) | Name |
|---|---|---|---|
| (0, 0, 0) | #000000 | #000 | Black |
| (255, 255, 255) | #ffffff | #fff | White |
| (255, 0, 0) | #ff0000 | #f00 | Pure red |
| (0, 255, 0) | #00ff00 | #0f0 | Green |
| (0, 0, 255) | #0000ff | #00f | Blue |
| (59, 130, 246) | #3b82f6 | — | Popular UI blue |
Converting RGB to HEX With the Tool
This is the practical workflow when you'd rather have a known-good converter write the code for you.
- Open the RGB To HEX converter in any modern browser — no signup, no install.
- Type the red, green and blue channel numbers into the three input boxes. Each box accepts values from 0 to 255; out-of-range or fractional inputs are clamped to the nearest valid integer instead of throwing an error.
- Read the matching HEX, RGB and HSL values next to the live color preview. The swatch updates as you type, so you can confirm the shade visually before copying.
- Click Copy on the HEX row to grab the lowercase six-digit code (for example #3b82f6) ready to paste into a CSS file, design spec, or token document.
- To convert back, paste any HEX — including three-digit shorthand such as #abc, or input without the leading "#" — into the HEX field. The tool expands shorthand, accepts uppercase or lowercase, and shows the matching RGB and HSL alongside the same live swatch.
Mistakes That Produce the Wrong Color
Because RGB and HEX describe the same set of colors, the right answer is always well-defined — which is exactly why small notation slips hurt so much. The mistakes below are the ones that show up most often in real design and development work, and each one has a clean way to avoid it with the converter.
Forgetting the leading hash. CSS and most design tools require HEX values to start with "#". A value like 3b82f6 will be parsed as an unknown identifier or silently treated as invalid, and the color will fall back to whatever default the renderer picks — usually the previous color or transparent. The converter always normalizes output to "#abcdef" form, so what you copy is ready to paste.
Dropping the zero-padding. The channel value 0 must render as 00, not 0. HEX shorthand treats every pair as exactly two characters; a bare 0 is not a valid HEX channel and some browsers will reject the whole declaration. Output from the converter is always zero-padded six-digit form, so this slip can't survive a Copy.
Mixing up shorthand rules. Shorthand only works when each pair is the same digit twice in a row. #abc is valid because each position is a doubled character (#aabbcc), but #ab9 is not shorthand — it cannot be safely expanded, and any tool that "expands" it as #aabb99 will produce a different color from what was typed. Paste shorthand carefully and confirm the expanded form in the preview before shipping.
Typing channel values out of range. rgb(260, 0, 0) and rgb(-10, 128, 128) are both out of the 0–255 range. A naive hand calculation can produce a wraparound result or a parse error. The converter clamps such inputs to the nearest valid integer, so 260 becomes 255 and -10 becomes 0 — and the swatch shows exactly what will ship.
Trusting a silent converter. The most expensive mistake is the one that doesn't error. Some tools accept malformed HEX (wrong length, illegal characters) and return a "best guess" or a partially parsed result without telling you. The RGB To HEX converter flags malformed input clearly rather than producing a silent wrong color, so you always know whether the value on screen is the value you asked for.
Confusing case handling. ABC, #abc, and abc all describe the same color and CSS accepts either case, but a hand-written stylesheet that mixes #3B82F6 and #3b82f6 in the same rule set looks unprofessional and makes diffs noisy. Standardize on the lowercase six-digit form the converter outputs and your tokens stay consistent across files.
Tips That Make Conversions Cleaner
Treat the live preview as the source of truth, not the numbers. Two close-but-not-identical colors can round to the same HEX in a 16-color thumbnail but look visibly different at full resolution. If the swatch in the converter matches the swatch in your design tool, the code is right.
Keep both RGB and HEX in your token doc. Some tools export RGB only, some HEX only, and some accept either. Storing both — even redundantly — saves a conversion step every time someone picks up the file. The tool gives you all three (HEX, RGB, HSL) at once, so a single Copy covers all the formats downstream tools usually want.
Run the reverse check when precision matters. After copying a HEX into a stylesheet, paste it back into the converter's HEX field and confirm the RGB round-trips exactly. If it doesn't, you've either miscopied a character or hit a tool that quietly truncated your value. The live swatch makes that mismatch obvious — the swatch updates the moment you paste, so you see the discrepancy immediately rather than discovering it in a code review.
When HSL Helps More Than Raw RGB
HEX and RGB describe colors in terms that match how screens produce them (channels of light) but not how humans reason about them (what looks bluer, what looks lighter). The converter also reports HSL — hue as an angle from 0 to 360 degrees around the color wheel, and saturation and lightness as 0–100% amounts. That makes it straightforward to nudge a brand color a few percent lighter or more muted by changing one number instead of recalculating three channels at once. When you have the HSL you want, paste any of the three values back into the converter and read the matching HEX off the same swatch, then copy the result straight into your stylesheet.
Why Running It in the Browser Matters
The conversion happens locally in JavaScript — no color values are ever uploaded to a server. For designers documenting brand palettes, developers working on unreleased products, and anyone handling confidential client work, that means brand swatches and pre-launch color decisions stay on your device. The tool gives the same accuracy as a server-side converter without sending your input anywhere, which is the safest way to handle colors you don't want to leak — and is also why the result is available the moment you finish typing, with no network round trip in the loop.
If you're weighing options, Web Safe Colors Tips and Common Mistakes to Avoid covers this in detail.