What is the formula for RGB to HEX?

Convert each of the three RGB channel values (0–255) into a two-digit hexadecimal number, then concatenate the red pair, green pair, and blue pair with a leading hash. For example, rgb(59, 130, 246) becomes #3b82f6.

What does the shorthand HEX form like #abc mean?

Each digit doubles to form a six-digit code. #abc expands to #aabbcc, #f00 expands to #ff0000, and so on. Shorthand only works when every pair would contain identical digits.

Why do CSS files prefer HEX while JavaScript often uses RGB?

HEX is shorter and denser for static stylesheets, while RGB lets you set each channel as a separate variable in code, which is easier when colors are computed or animated dynamically.

What is the difference between HEX and HSL?

HEX and RGB encode the same color using channel intensities, while HSL describes it using hue (a degree on the color wheel), saturation (color intensity), and lightness (brightness). The converter shows all three so you can read the same color in whichever format is most useful.

Does RGB to HEX work for colors outside the sRGB gamut?

No. Both HEX and standard CSS rgb() functions are tied to the sRGB color space. Colors defined in wider gamuts such as Display P3 cannot be represented accurately in six-digit HEX without an explicit color() or color-mix() declaration.

How to RGB to HEX: Convert Color Codes in Your Browser

Q: Can a HEX code be converted back to RGB without losing accuracy?

Yes. The conversion is lossless in both directions because HEX and RGB both describe the same sRGB color space. Every HEX string maps to exactly one RGB triplet and vice versa.

To convert RGB to HEX, take each of the three channel values (Red, Green, Blue, each ranging from 0 to 255), translate it into a two-digit hexadecimal number using base-16 notation, and concatenate those three pairs after a hash symbol to form a six-character color code such as #3b82f6. The conversion is a pure mathematical mapping with no rounding and no color loss, which is why designers, developers, and digital artists move between the two formats constantly without worrying about fidelity. HEX is the compact shorthand the web uses inside CSS, HTML, JavaScript, and SVG, while RGB is the way screens describe light intensity on each of three channels. Both encode the same color in the sRGB color space; they are simply different languages for the same underlying numbers.

If you build websites, write design specs, theme applications, or generate CSS programmatically, you have almost certainly needed to translate a color picked from one system into the format expected by another. Doing it by hand works for the occasional value but quickly becomes tedious when comparing palettes, building gradients, or matching brand colors across files. That is where a purpose-built converter earns its keep.

What RGB and HEX Actually Represent

RGB is a color model built from three channels — Red, Green, and Blue — each carrying an intensity from 0 (none of that channel) to 255 (maximum of that channel). With 256 possible values per channel, the total color space contains 256 × 256 × 256 = 16,777,216 distinct colors. Pure red is rgb(255, 0, 0), pure green is rgb(0, 255, 0), pure blue is rgb(0, 0, 255), and pure white is rgb(255, 255, 255). Black is rgb(0, 0, 0).

HEX is just that same triplet of numbers written in base-16 instead of base-10, prefixed with a hash. The first two characters encode red, the middle two encode green, and the last two encode blue. So rgb(59, 130, 246) becomes #3b82f6 — 3B for red, 82 for green, and F6 for blue. Because hexadecimal digits run 0–9 and then A–F, the largest value you can write in two digits is FF, which equals 255 in decimal. The range maps cleanly.

The Conversion Formula, Step by Step

Start with three decimal values. For example, R = 59, G = 130, B = 246.
Convert each value to hexadecimal. Divide by 16 to get the first digit, take the remainder for the second. 59 ÷ 16 = 3 remainder 11 → 3B. 130 ÷ 16 = 8 remainder 2 → 82. 246 ÷ 16 = 15 remainder 6 → F6.
Pad single digits with a leading zero if needed. Any value below 16 (such as decimal 5, which is hex 5) must be written as 05 so the string always has six digits.
Concatenate the three pairs in RGB order, prefixed with #. The result is #3B82F6. CSS is case-insensitive, so #3b82f6 works just as well.

You can verify the math in the other direction: 3 × 16 + 11 = 48 + 11 = 59. 8 × 16 + 2 = 128 + 2 = 130. 15 × 16 + 6 = 240 + 6 = 246. The numbers match exactly. The MDN Web Docs reference on hexadecimal color values confirms that each pair represents one channel of an RGB triplet.

How to Convert RGB to HEX Using the Browser Tool

Open the RGB To HEX converter.
Type your Red, Green, and Blue values into the three input fields. Each accepts a number between 0 and 255.
Watch the HEX field update automatically and the swatch refresh to show the live color.
Click the Copy button next to the HEX value to grab #xxxxxx for your clipboard.
To go the other way, paste a HEX code such as #3b82f6 or the shorthand #abc into the HEX field; the RGB and HSL fields fill in instantly.
Copy whichever format you need — HEX for CSS, RGB for JavaScript or design specs, HSL for hue-based tweaking.

The tool handles shorthand HEX (the three-digit form like #abc) automatically by expanding each digit into a pair: #abc becomes #aabbcc. This is defined in the CSS Color Module and is supported by every modern browser, so the expansion is always safe.

Reading the HSL Output Side by Side

HSL stands for Hue, Saturation, and Lightness. It expresses the same color but in a way that is often easier to reason about visually. Hue is a degree on the color wheel (0 is red, 120 is green, 240 is blue), saturation is the intensity of that hue from 0% (gray) to 100% (full color), and lightness runs from 0% (black) to 100% (white) with 50% being the pure hue. The value hsl(217, 91%, 60%) is the same color as #3b82f6 and rgb(59, 130, 246).

Designers often prefer HSL when building palettes because adjusting the lightness slider predictably lightens or darkens the color without shifting its hue, which is harder to do in RGB or HEX without recomputing the math. The converter shows HSL alongside HEX and RGB so you can read the same color three different ways.

Common HEX Shortcuts Worth Knowing

HEX Form	Meaning	Example
Six-digit	Full RGB triplet, one pair per channel	`#3b82f6`
Three-digit	Shorthand; each digit doubles	`#abc` = `#aabbcc`
Eight-digit (RGBA)	Six digits plus two-digit alpha	`#3b82f680` = 50% opacity
Four-digit (RGBA)	Shorthand RGBA; pairs expand	`#3b82f680` shortened to `#3b8f6` is invalid; the form is `#RGBA`

The three-digit shorthand only works when all three pairs would be repeated digits — meaning a pair like 33 can be written as 3, but 3b cannot. #3b82f6 has no shorthand form because no pair contains two identical digits.

When to Use RGB Versus HEX in Real Projects

CSS, HTML, and most styling tools accept both formats interchangeably, but conventions exist. HEX is denser — six characters versus the longer rgb() function call — so it tends to win out in stylesheets where file size and readability matter. RGB (and especially rgba()) is more self-documenting: rgb(59, 130, 246) tells a reader immediately which channel is which, while #3b82f6 requires the convention "first pair red, second green, third blue" to decode. In JavaScript, building colors programmatically is usually cleaner with RGB because each channel can be set as a separate variable.

For print or prepress work, however, neither HEX nor RGB is the right target. Screens emit light, but print uses ink on paper, which is a fundamentally different model. If your color is heading to a printer, convert to CMYK first with the RGB to CMYK converter to get a rough sense of how the printer will reproduce it. CMYK has a smaller gamut than sRGB, so some bright screen colors cannot be matched exactly on press.

Building a Palette Around a Single Color

Once you have a HEX code in hand, the natural next step is usually to derive related colors for hover states, borders, backgrounds, and contrast pairs. The Color Palette Generator takes a base color and produces complementary, analogous, triadic, and other harmony-based schemes — useful for turning one brand color into a complete palette without guessing. If you need the visual relationship between two specific colors, the Color Mixer blends them and shows the exact result in both HEX and RGB.

For accessibility work, every HEX value you pick should be checked against the colors it sits next to. The Color Contrast Checker applies the WCAG 2.2 contrast formula to a text-and-background pair and tells you whether it passes AA or AAA at your chosen text size. This matters because a HEX code can look perfectly readable against pure white but fail dramatically against a near-white tint.

Quick Reference: When Each Tool Helps Most

Task	Best Tool
Convert a single RGB or HEX value	RGB To HEX
Build a palette from one base color	Color Palette Generator
Blend two colors to find the midpoint	Color Mixer
Check text contrast for accessibility	Color Contrast Checker
Prepare a color for print	RGB to CMYK Converter

For a deeper walkthrough of RGB-to-HEX conversion with extra examples, see the related guide on converting RGB to HEX online with a free instant color tool. If you are just starting out and want a parallel explanation of the formula, the practical guide on how to convert RGB to HEX covers the same territory from a slightly different angle.

The underlying math has not changed since the early days of the web, and it is unlikely to: HEX and RGB both describe the same sRGB color space, and the conversion between them is a fixed, lossless mapping. What has changed is how often designers and developers need to make the swap — and how quickly they expect to do it. A purpose-built converter running entirely in the browser removes the mental arithmetic and the risk of typos, leaving you free to focus on the design decision itself rather than the encoding.