An RGB to HEX chart pairs each red, green, and blue channel — expressed as a decimal number from 0 to 255 — with its two-digit hexadecimal equivalent in a six-character code of the form #RRGGBB. Every channel is independently converted: 0 becomes 00, 255 becomes FF, and any value in between becomes its base-16 representation zero-padded to two digits. Because each pair covers 00 to FF, the full six-digit format can describe 256 × 256 × 256 = 16,777,216 distinct colors. That is exactly the same 24-bit color space used by CSS, HTML, and the standard RGB inputs in tools like Figma and Photoshop, which is why a chart that maps RGB triples to HEX codes is a common request from developers and designers who need to translate between formats without losing precision. The reference values below cover the most common cases — pure black, white, the three primary channel extremes, and one popular UI blue — alongside a step-by-step walkthrough for converting any RGB triplet into a matching HEX code using a browser-based converter.
How RGB and HEX Represent the Same Color
RGB describes a color as three independent channels — red, green, and blue — each stored as an integer between 0 and 255. Hexadecimal notation packs the same three channels into a single compact string by writing each channel as two base-16 digits: #RRGGBB. The first pair is the red channel, the second is green, the third is blue. A value of 00 means "none of this channel," and FF (decimal 255) means "full intensity." Together the six digits encode exactly the same information as the RGB triplet; nothing is gained or lost in translation, which is what makes the conversion lossless in both directions.
The base-16 system uses the symbols 0 through 9 followed by A through F to represent values 10 through 15, so a single digit can carry 16 states instead of 10. Two digits therefore carry 16 × 16 = 256 states — the same 0 to 255 range an RGB channel needs. That is why two hexadecimal digits are sufficient to encode one RGB channel, and why three pairs are sufficient to encode an entire color without any rounding.
Hexadecimal also fits cleanly into code because every digit maps to exactly four binary bits, so #RRGGBB is a friendly way to write a 24-bit binary color value. CSS, design software, and most color libraries accept both notations interchangeably, but HEX tends to win out in stylesheets because it is shorter, easy to copy between files, and supported by every color picker you will encounter in a modern design environment.
Quick RGB to HEX Reference Chart
The most-asked-for rows of any RGB to HEX chart are the endpoints — pure black and pure white — plus the three primary channel extremes and a handful of well-known UI colors. The values below come directly from the standard 24-bit color space and are the same numbers every browser, design tool, and stylesheet engine uses internally.
| 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 (popular blue-500) | (59, 130, 246) | #3b82f6 |
Notice the structure of the chart: each HEX code is just the three RGB channels rewritten in base 16 with leading zeros preserved. (0, 0, 0) becomes #000000 because every channel needs two digits even when the value is zero. (255, 0, 0) becomes #ff0000 because only the red channel is at maximum and the others collapse to 00. (59, 130, 246) becomes #3b82f6 — a popular blue that designers reach for in dashboards, buttons, and link states.
The complete 24-bit space contains 16,777,216 entries, far more than any printed chart can show. For colors outside this short list, the practical approach is to convert them directly with a two-way RGB and HEX converter that accepts any triplet and returns the matching six-digit code alongside a live preview swatch.
Convert RGB to HEX in Three Steps
For any RGB triplet that is not in the chart above, the conversion follows the same procedure: convert each channel from decimal to base 16, zero-pad each result to two digits, and concatenate the three pairs in red–green–blue order. Using the RGB To HEX tool collapses those calculations into three short actions.
- Type the red channel (0–255) into the R field, the green channel into G, and the blue channel into B. The live preview swatch fills with the matching color so you can confirm the shade before copying.
- Read the normalized HEX code next to the preview. Output is always lowercase, six digits, and zero-padded, so a value of 0 in any channel shows up as 00, not as a bare digit.
- Click the Copy button beside any format — HEX, RGB, or HSL — to grab the value you need. You can also paste a HEX code (with or without the leading #) into the HEX field to convert the color back into RGB channels.
If you want to see the math once, take the popular UI blue RGB (59, 130, 246). Convert each channel separately:
- 59 ÷ 16 = 3 remainder 11 → 3B
- 130 ÷ 16 = 8 remainder 2 → 82
- 246 ÷ 16 = 15 remainder 6 → F6
Concatenate the three pairs in order — red, then green, then blue — to get #3b82f6, the same value shown in the reference chart above. Once the pattern is familiar, conversions are quick by hand, but for any non-trivial triplet a converter removes the risk of a slipped digit.
Shorthand, Case Sensitivity, and Zero-Padding
HEX notation has a few conventions worth knowing because they affect how a chart — and a converter — interprets input. The most common shorthand is the three-digit form: when each pair has identical digits, the pair can be collapsed. #abc becomes #aabbcc, #f00 becomes #ff0000 (pure red), and #fff becomes #ffffff (white). This shorthand is part of the CSS specification and any modern converter accepts it as equivalent to its full six-digit form.
Input is also case-insensitive. ABC, #abc, and abc all resolve to the same color, so a chart can show uppercase or lowercase freely without changing the result. To avoid surprises downstream, output is always normalized to lowercase six digits with zero-padding: a channel value of 0 renders as 00, not as a bare 0. That detail trips up hand-written conversions, where 7 in the red channel often gets written as #7 instead of #07 and silently turns into an incorrect color in production.
Out-of-range or fractional values are handled sensibly too. If you type 260 into a channel, it is clamped to 255 rather than throwing an error or wrapping around. Fractional values are clamped to the valid 0–255 integer range. And malformed HEX input — wrong length or illegal characters — is flagged clearly instead of producing a silent wrong color. These behaviors matter because the most common source of bad color values in production code is a typo, not a misunderstanding of the math.
When You Need HSL Alongside HEX
HEX is the format stylesheets want, and an RGB to HEX chart answers most everyday conversion questions. But HEX and RGB share a limitation: tweaking a color means guessing at three independent channel numbers. Hue, saturation, and lightness (HSL) describe the same color in terms humans reason about more naturally — hue as an angle from 0 to 360 degrees around the color wheel, and saturation and lightness as percentages from 0 to 100 — which makes it much easier to nudge a brand color a little lighter or more muted without trial-and-error on raw channel numbers.
A good converter shows all three formats at once so you can move between them as the task demands. Start from a designer's RGB spec and copy out the HEX for your CSS. Start from a HEX code in an existing stylesheet and read out the RGB channels for an image editor. Or read the HSL to understand why two near-identical colors look subtly different, then convert the adjusted value straight back into a HEX code your stylesheet can use.
Comparing RGB, HEX, and HSL
The three notations all describe colors in the same 24-bit space; they differ in how that information is structured and where each is most convenient to use.
| Format | Structure | Best for |
|---|---|---|
| RGB | Three integers, each 0–255 | Programmatic input, scripting, exporting between tools |
| HEX | Six base-16 digits, prefixed with # | CSS, HTML, copying between stylesheets and design files |
| HSL | Hue 0–360°, saturation 0–100%, lightness 0–100% | Reasoning about color adjustments and design variations |
None of these formats can represent more colors than the others — they all describe the same 16,777,216-entry 24-bit space. Choosing between them is a question of where the value will be used and how it will be edited. HEX wins for compact storage and copy-paste, RGB wins for programmatic input and asset pipelines, and HSL wins when you need to think about color as a designer rather than as a number.
Common Uses for an RGB to HEX Reference
A static RGB to HEX chart is useful when you need a quick lookup for a small set of well-known colors, but most production work calls for live conversion. Typical cases include turning a designer's RGB spec into a CSS-ready HEX code, reading a HEX value out of an existing stylesheet to confirm the underlying channels, sampling brand colors into a documented palette, and verifying the HSL of a chosen color before committing to a variant.
Because the conversion runs entirely in JavaScript in your browser, no color values are uploaded to a server, which makes the workflow safe for brand palettes and unreleased work. If you want to confirm the privacy behavior in more detail, the privacy and accuracy guide walks through exactly what stays local and what is discarded when you close the tab.
For one-off lookups the chart above covers the essentials; for everything else, the RGB To HEX converter accepts any valid RGB or HEX input, validates edge cases, and shows the live swatch alongside HEX, RGB, and HSL so you can copy exactly what your next step requires.