A standard RGB to HEX example pairs three integer channels, each from 0 to 255, with a six-digit hexadecimal string in the form #RRGGBB, and because every two-digit hex pair covers exactly the same 256 values as one RGB channel, the mapping is direct and exact across 256 × 256 × 256 = 16,777,216 distinct colors. That is the entire 24-bit color space used by CSS, HTML, Figma, Photoshop, and virtually every web design style guide, which is why RGB to HEX examples appear so often in tutorials, brand guidelines, and forum answers. Once you know that the red channel becomes the first pair, green the second, and blue the third, you can read any conversion at a glance. If a value sits between two of these examples, the same rule still applies: convert each of the three channels separately and concatenate the six hex digits, so any color in the 24-bit space can be written down as one short string. The examples below cover the colors you will meet most often, the conversion pattern that ties them together, and a way to handle every other shade you might need.
Common RGB to HEX Examples You Will Use
Everyday color work uses the same handful of RGB to HEX examples over and over. Pure black and pure white anchor both ends of the scale, the three additive primaries (red, green, blue) are the building blocks of every other color on screen, and a few widely-recognized UI shades round out the practical set. The table below shows the exact RGB and HEX pairs so you can copy them straight into CSS or a design file without recomputing anything by hand.
| Color | RGB | HEX |
|---|---|---|
| Black | (0, 0, 0) | #000000 |
| White | (255, 255, 255) | #ffffff |
| Pure red | (255, 0, 0) | #ff0000 |
| Pure green | (0, 255, 0) | #00ff00 |
| Pure blue | (0, 0, 255) | #0000ff |
| UI blue (Tailwind-style) | (59, 130, 246) | #3b82f6 |
Each row is a textbook RGB to HEX example: three integer channels in, one normalized lowercase string out, with each channel padded to exactly two hex digits. A single off-by-one or missing zero will produce a subtly different color, which is why normalizing output to a six-digit, zero-padded form is what every reliable converter does. When you start building a palette around these anchor colors, the spacing between rows also tells you something useful: doubling one channel at a time moves you cleanly around the color wheel, which is the same intuition behind complementary and triadic schemes.
The Conversion Pattern Behind Every Example
Every RGB to HEX example follows the same one-line rule: convert each decimal channel (0–255) into a two-digit hexadecimal pair, then join the three pairs after a hash symbol. Converting a decimal number to two-digit hex means expressing it in base 16 and padding the result with a leading zero if it is shorter than two characters. That padding step is also why out-of-range or fractional channel values get clamped to the 0–255 integer range before being formatted — anything else would either produce the wrong number of digits or a silent rounding error.
Take the popular UI blue RGB (59, 130, 246) as a worked example.
Formula: HEX = "#" + toHex(R) + toHex(G) + toHex(B), where each toHex result is zero-padded to two characters. Step 1 — Red: 59 in base 16 = 3 × 16 + 11 = "3b", padded → "3b". Step 2 — Green: 130 in base 16 = 8 × 16 + 2 = "82", padded → "82". Step 3 — Blue: 246 in base 16 = 15 × 16 + 6 = "f6", padded → "f6". Result: "#" + "3b" + "82" + "f6" = #3b82f6.
Notice how the padding rule matters even when a channel is small. A red value of 10 becomes "0a", not bare "a", so #0a14f6 is the correct string and #a14f6 would be a malformed three-channel string of the wrong length. The output is always normalized to lowercase six-digit form to keep it stable across diff tools, design system tokens, and version control. That is also why a leading zero never appears in the final string when the red channel is zero — the rule applies to each two-digit pair individually, not to the whole code.
Convert Any RGB Value in Your Browser
If you want to see additional RGB to HEX examples beyond a static chart, the fastest path is a live converter that recalculates as you type. The RGB To HEX tool runs the conversion in JavaScript on your own device, so the swatch and all three formats update together without any server round trip. The exact steps are:
- Open the RGB To HEX converter in your browser.
- Type the red, green, and blue values (each 0–255) into the three input fields.
- Read the matching HEX code, RGB triplet, and HSL readout next to the live color preview.
- Click Copy next to the format you want to drop straight into CSS, Figma, or a brand sheet.
Because the preview swatch updates with every keystroke, you can confirm the shade visually before committing it to a stylesheet. If the resulting color is not what you expected, it usually means one of the channels was off, and the side-by-side readout makes the offending value obvious. The same workflow covers the rarer cases too: enter a fractional channel and the converter quietly clamps it to a valid integer, paste a malformed HEX string and the tool flags it instead of returning a wrong color.
Reading Three-Digit HEX Shorthand
Hand-written CSS snippets and older design files often use a compact three-digit form like #abc or #f00. Three-digit HEX is shorthand that expands by doubling each digit, so #abc becomes #aabbcc, #f00 becomes #ff0000 (pure red), and #fff becomes #ffffff (white). Input is case-insensitive and the leading hash is optional, which means ABC, #abc, and abc all resolve to the same color and the converter will happily accept any of those spellings.
The same shorthand rule applies in reverse. If you receive a brand color as #0f8 and need the long form for a design system, expand it to #00ff88 first, then treat it like any other six-digit HEX. The RGB To HEX converter handles both three- and six-digit input the same way, so you do not have to normalize the string by hand before pasting. That is especially useful when copying a code from a documentation page that uses inconsistent punctuation, because the converter will still decode it correctly and show you exactly which long-form color it represents.
Going Back the Other Way: HEX to RGB
RGB to HEX examples are only half of the everyday conversion work. Designers and developers regularly need the reverse, for instance when a HEX code in a stylesheet must be opened in an image editor that only speaks RGB channels, or when a brand color documented as HEX must be sampled into a spec sheet that records R, G, B separately. The process is the inverse of what was shown above: split the six characters after the hash into three pairs, then convert each pair from base 16 back to a decimal integer between 0 and 255.
For example, #3b82f6 back to RGB yields (59, 130, 246), the same UI blue used in the earlier worked example. The RGB To HEX tool handles this direction too: paste any #hex — six digits or three-digit shorthand — into the HEX field and read the resulting R, G, B triplet on the other side, alongside the same HSL values and live preview. That single round-trip view is what makes a two-way converter so much faster than doing the math by hand twice, and it is the same workflow you would use for sampling brand colors out of a stylesheet or for documenting a custom palette.
Why HSL Is Reported Alongside HEX and RGB
Many converters stop at HEX and RGB, but most design work also benefits from HSL because it describes the same color in terms a human can reason about directly: hue as an angle from 0 to 360 degrees around the color wheel, with saturation and lightness as 0 to 100 percent amounts. That makes HSL the natural format for nudging a brand color a few percent lighter or more muted without guessing at raw channel values, which is exactly the kind of adjustment designers ask for during reviews.
Once you have an HSL value you like, you can convert it straight back to a HEX code your stylesheet can use, all in the same tool. This three-format readout is especially useful when you are documenting a palette: the HEX goes into the CSS variables, the RGB goes into the Figma or Photoshop spec, and the HSL goes into the design rationale where you explain why each color was chosen. Seeing the swatch update live as you type also helps you confirm you have the exact shade before copying it into your code or design file, which avoids the common round-trip where a manually typed HEX looks right on paper but renders slightly off on screen.