A HEX color code writes any RGB color as #RRGGBB, where each two-digit pair represents one of the red, green, and blue channels in base-16 notation (00 through FF, which is the same as 0 through 255 in decimal). Because every pair covers 256 values, the six-digit format can describe 256 × 256 × 256 = 16,777,216 distinct colors — the same 24-bit color space that CSS, HTML, Figma, Photoshop, and most style guides rely on. That shared space is why translating between RGB and HEX is one of the most common daily tasks in web design and front-end development: a designer hands you three decimal numbers, a stylesheet asks you for a #HEX, and somewhere between the two you need a clean conversion you can trust. The translation itself is straightforward arithmetic: convert each decimal channel into a two-character hex string, then join them with a leading #. Doing it once is quick, but doing it across an entire brand palette, while also handling shorthand like #abc, normalizing case, and avoiding the off-by-one mistakes that come from hand-written conversions, is tedious and error-prone. That is exactly the workflow a two-way RGB ↔ HEX converter with a live preview is built for — and the RGB To HEX tool runs that workflow in your browser without sending any color values to a server.
RGB and HEX: two notations for the same color
RGB and HEX are two notations for the same color space, not two separate spaces. RGB names a color with three decimal integers, one per channel, each from 0 to 255. HEX names the same color with six characters from 0–9 and a–f, in the form #RRGGBB. Each pair of hex digits maps directly to one decimal channel, which is why you can read a HEX code by eye once you know what each pair means.
HEX is more compact to type and paste, which is why it became the dominant way to write colors in CSS and HTML. RGB is easier to reason about channel-by-channel, which is why designers and image editors often work in it. HSL sits on top of the same space but describes a color in terms humans find natural: hue as an angle around the color wheel (0–360°), and saturation and lightness as percentages. All three describe the same 16,777,216-color space — HEX is shorthand for "two hex digits per channel", RGB is "one decimal integer per channel", and HSL is "one angle plus two percentages".
The conversion formula and a worked example
The conversion from RGB to HEX is the same operation repeated three times: take a decimal integer between 0 and 255, divide it by 16, and write the quotient and remainder as two hex digits. The first digit is the number of 16s; the second digit is the leftover. For example, the popular UI blue (59, 130, 246) converts to #3b82f6 like this:
- Red 59: 59 ÷ 16 = 3 remainder 11. Quotient 3 → "3", remainder 11 → "B". Pair: 3B.
- Green 130: 130 ÷ 16 = 8 remainder 2. Quotient 8 → "8", remainder 2 → "2". Pair: 82.
- Blue 246: 246 ÷ 16 = 15 remainder 6. Quotient 15 → "F", remainder 6 → "6". Pair: F6.
- Join the pairs with a leading #: #3B82F6, normalized to lowercase as #3b82f6.
Once you have done it a few times, you can read a HEX code aloud in three decimal numbers without much effort, and the inverse — taking the first, second, and third hex pairs and converting each pair from base-16 back to decimal — is the same arithmetic in reverse. For a closer look at how each pair of digits maps to a specific channel, the RGB to HEX explained guide walks through it channel by channel.
Convert RGB to HEX (and HEX to RGB) in your browser
The fastest way to translate between the two formats, especially across a whole palette, is a live converter that handles the edge cases for you. Open the RGB To HEX converter and follow these steps:
- Type your red, green, and blue values into the three channel fields. Each field accepts decimal numbers in the 0–255 range, and out-of-range inputs are clamped to the nearest valid value rather than throwing an error.
- Read the matching HEX code next to the live color preview. The swatch updates with every keystroke, so you can confirm the shade matches what you expected before copying.
- To go the other direction, paste a HEX color into the HEX field. Six-digit forms like #3b82f6 and three-digit shorthand like #abc are both accepted, the leading # is optional, and case does not matter.
- Read the HSL readout alongside the HEX and RGB lines if a human-friendly description of the same color would help — for example when you want to nudge a brand color a little lighter or more muted.
- Click Copy next to whichever line you need. The copied HEX is always normalized to lowercase six-digit form with each pair zero-padded, so a channel value of 0 becomes 00, never a bare 0.
Because the conversion runs locally in JavaScript, no color value is ever sent to a remote server. That matters when you are working with brand palettes, unreleased product mockups, or anything else you would rather not paste into a third-party form.
Reading the live preview, HSL readout, and Copy buttons
The live preview is the part that pays for itself the first time you mistype a channel. As you change any of the three RGB inputs, the swatch updates immediately and the HSL numbers recompute, so you can spot a typo before the code reaches your stylesheet. HSL is included because it is how most people reason about color intuitively: hue is an angle around the wheel (red sits around 0°, green around 120°, blue around 240°), and saturation and lightness are 0–100% amounts that move the same color toward gray or toward white or black. To make a brand color 10% lighter, raise the L value by 10; to make it more muted, drop the S value. Then convert the resulting HSL back to a HEX code your stylesheet can actually use. Copy buttons next to each format line let you grab whatever you need without retyping, which removes the small but very common transcription errors that show up as off-by-one channel mistakes in production CSS.
Shorthand #abc, case rules, and other input quirks
The three-digit HEX shorthand is doubled per digit, so #abc expands to #aabbcc, #f00 becomes #ff0000 (pure red), and #fff becomes #ffffff (white). The converter accepts the shorthand, the full six-digit form, the leading # or no leading #, and any combination of upper- and lowercase letters — ABC, #abc, and abc all resolve to the same color. Output is normalized to lowercase six-digit form so the value you copy is the same one you would write by hand in a stylesheet.
| Input | Output | Notes |
|---|---|---|
| #3b82f6 | #3b82f6 | Standard six-digit form |
| 3b82f6 | #3b82f6 | Leading # is optional |
| ABC | #aabbcc | Case-insensitive |
| #abc | #aabbcc | Shorthand doubled per digit |
| #f00 | #ff0000 | Pure red |
| #fff | #ffffff | White |
| RGB (0, 0, 0) | #000000 | Black, zero-padded |
| RGB (300, -10, 128) | Clamped to 255, 0, 128 → #ff0080 | Out-of-range clamped, not an error |
Out-of-range or fractional channel values do not throw an error. They are clamped to the nearest valid integer in the 0–255 range, which is almost always what you want when an off-spec value sneaks in from another tool. A malformed HEX (wrong length after the leading # is stripped, illegal characters, or any other parse problem) is flagged clearly rather than producing a silent wrong color — a small detail that catches the typos hand-written conversions tend to let through.
Common reference values to keep handy
Most palettes come back to a few anchor colors. The table below lists the canonical RGB/HEX pairs that show up in design systems, in tutorials, and in the standard CSS color keywords. For a much larger lookup, the RGB to HEX chart guide collects many more conversions with the formula shown alongside each row.
| 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 |
| Popular UI blue (e.g. Tailwind blue-500) | (59, 130, 246) | #3b82f6 |
The last row is the one the worked example above uses — and a useful sanity check that your converter is producing the right code for a shade you already recognize.
Where the converted HEX code lands in real projects
The most common reason to convert RGB to HEX is to paste the result into a CSS file, an SVG fill, a Tailwind config, or a design token. The most common reason to go the other way is to read a HEX from a stylesheet back into RGB channels for an image editor or a brand documentation sheet that records the spec in decimal. The converter covers both directions in one screen, which is the whole point of having it open while you work.
Once you have a HEX code you trust, it slots straight into a CSS rule, a style attribute, or a design tool without any further translation. If you need to build a wider palette around that color, a complementary scheme, or an accessible contrast pair, the rest of the Lizely color toolbox picks up where this converter leaves off — the same browser session, the same live preview approach, no copy-paste round trips.