The RGB to HEX formula expresses each color as a six-digit hexadecimal string of the form #RRGGBB, where every two-character pair is one of the red, green, or blue channels written in base-16 instead of base-10. Because a single byte can hold values from 0 to 255, and 255 in base-16 is written as FF, each pair covers the exact range 00 to FF — the same 256 steps an RGB channel can take. The three pairs are concatenated after a leading hash, so a color's full HEX form is # followed by six hexadecimal characters: two for red, two for green, and two for blue. Six digits at 256 values each gives 256 × 256 × 256 = 16,777,216 distinct colors, which is the standard 24-bit space CSS, HTML, Figma, Photoshop, and most style guides rely on, and which is why translating between RGB and HEX is such a routine task for developers and designers.
Why HEX Uses Base-16 Instead of Base-10
Decimal and hexadecimal are just two ways of writing the same numbers. Base-10 uses the digits 0–9; base-16 uses the digits 0–9 plus the letters A–F, where A stands for 10, B for 11, C for 12, D for 13, E for 14, and F for 15. Sixteen is a natural fit for digital color because a byte — the smallest chunk of memory most computers expose — holds exactly 256 values, and 256 is 16 × 16.
Writing each channel in two base-16 digits therefore gives every possible byte value a clean, fixed-width notation. The value 0 becomes 00, 1 becomes 01, 10 becomes 0A, 255 becomes FF, and there is never any ambiguity about how many digits a number should occupy. That fixed width is the practical reason HEX won out over plain decimal for color codes in CSS and HTML — a stylesheet parser always knows exactly where one channel ends and the next begins.
The leading # is just a convention so a HEX color is not mistaken for a number or a word inside markup. It carries no mathematical meaning; every formula below works the same whether the # is present or not.
The RGB to HEX Formula, Step by Step
The conversion is just three independent decimal-to-hex conversions stuck together. For each channel, divide the decimal value by 16 to get two numbers: the integer quotient becomes the first hex digit (the "high nibble") and the remainder becomes the second hex digit (the "low nibble"). Then map any number from 10 to 15 to its letter A–F and concatenate the three pairs after a #.
Written as a formula, where Red, Green, and Blue are decimal values between 0 and 255:
Hex = # (Red ÷ 16)(Red mod 16) (Green ÷ 16)(Green mod 16) (Blue ÷ 16)(Blue mod 16)
The two operators — integer division (÷) and modulo (mod, the remainder after division) — are the only arithmetic the formula needs. Each result is written as exactly two characters, with a leading 0 added when the quotient is below 10.
To see the formula in action, take the popular UI blue RGB (59, 130, 246):
- Red 59: 59 ÷ 16 = 3 with remainder 11 → digits 3 and B → 3B
- Green 130: 130 ÷ 16 = 8 with remainder 2 → digits 8 and 2 → 82
- Blue 246: 246 ÷ 16 = 15 with remainder 6 → digits F and 6 → F6
Concatenated after the leading hash, the formula yields #3B82F6 — the same value the popular UI blue produces in any stylesheet. If you want a closer look at what each pair of digits actually represents, the plain-English walkthrough in RGB to HEX Explained: What Each Pair of Digits Means goes one level deeper.
Convert RGB to HEX With a Live Tool
The formula is easy to apply by hand for one or two colors, but it gets tedious fast when you are checking a palette or working from a designer's spec sheet. A two-way RGB to HEX converter applies the same divide-and-remainder math the moment you type, and lets you paste a HEX back in to get the RGB channels without re-doing the arithmetic.
- Open the RGB to HEX converter in your browser.
- Type the red, green, and blue channel values (each between 0 and 255) into the RGB fields. The matching HEX code appears as you type, alongside a live swatch so you can confirm the shade.
- To reverse the conversion, paste a HEX color such as #3b82f6 — or the shorthand #abc — into the HEX field. The tool expands shorthand, ignores case, and tolerates a missing leading #.
- Read the HEX, RGB, and HSL values next to the live color preview, then click Copy next to whichever format you need for your stylesheet, email, or design file.
Every calculation runs locally in JavaScript, so no color value is ever sent to a server — a useful property when you are working with brand palettes or unreleased designs. The privacy and accuracy guide covers what that means in practice for sensitive work.
Reference Values: Common RGB and HEX Pairs
The table below lists a few RGB triplets and their matching HEX codes that the formula always returns. These are the standard anchor colors of the 24-bit space, not results computed inside this article, so you can use them as a sanity check when you verify your own conversions.
| Color | RGB (R, G, B) | 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 |
| Popular UI blue | (59, 130, 246) | #3b82f6 |
Each row is a direct application of the formula: the three channels are converted to two-digit hex pairs in order and joined with a leading #. For example, RGB (255, 0, 0) becomes #FF0000 because 255 ÷ 16 = 15 with remainder 15, and 0 is always 00 in any base. RGB (59, 130, 246) becomes #3B82F6 — the same UI shade you worked through above — which is a quick way to confirm the formula was applied correctly.
Formula Edge Cases: Shorthand, Out-of-Range, and Validation
The divide-and-remainder formula assumes three well-formed decimal values between 0 and 255. A few common inputs violate that assumption, and each one needs an explicit rule rather than a silent guess.
Three-digit shorthand. A HEX such as #abc is not a separate format — it is shorthand for #aabbcc, where each digit is simply doubled. By the same rule, #f00 expands to #ff0000 (pure red) and #fff becomes #ffffff (white). Once expanded, the rest of the formula is identical to the six-digit case.
Out-of-range values. If a decimal channel is below 0 or above 255, or comes in as a fraction, the formula breaks down because the division no longer fits inside one byte. Rather than producing a meaningless HEX, a reliable converter clamps the value to the valid 0–255 range first. A value of -10 becomes 0, a value of 300 becomes 255, and 127.8 becomes 128. The conversion still runs — it just maps the input onto the closest legal channel before applying the formula.
Malformed HEX on the way back. When converting a HEX to RGB, the input must be exactly three or six valid hexadecimal characters with an optional leading #. Strings of the wrong length, or strings containing letters outside A–F, cannot be split into three valid pairs and should be flagged clearly rather than producing a silent wrong color. If you regularly hit these edge cases by hand, the RGB to HEX converter surfaces the problem inline instead of guessing.
Case and the leading #. The formula itself is case-insensitive — ABC, #abc, and abc all describe the same color. Output is conventionally normalized to lowercase six-digit form with each channel zero-padded, so a value of 0 renders as 00 rather than a bare 0. That trailing detail is the one most likely to slip in a hand-written conversion, and it is the kind of subtle slip a focused review of RGB to HEX tips and common mistakes is designed to catch.