RGB to Hex Converter

An RGB to Hex converter takes any triplet of red, green, and blue channel values, each an integer in the range 0 to 255, and turns the triplet into the matching six-digit hexadecimal colour code, written as #RRGGBB. It also runs the conversion in reverse: paste a hex code like #1E90FF and read out the three underlying channels, (30, 144, 255). The converter is bidirectional and live, so every keystroke on the R, G, or B number inputs immediately updates the hex display, and every keystroke in the hex field immediately updates the three channel inputs. A colour preview swatch sits next to the hex output so you can confirm at a glance that the code you typed actually produces the colour you intended, catching the single most common error in design work, the typo that yields a valid-but-wrong colour.

This is the inverse of the hex-to-RGB converter and the natural companion to it. Where hex-to-RGB is what you reach for when you have a code from a Figma panel and you need the channel values, RGB-to-hex is what you reach for when you have a triplet from a colour picker, an eyedropper, or a piece of math and you need the compact form that every CSS file, design token, and brand sheet accepts.

How to Use the RGB to Hex Converter

1. Enter the red value (R) in the first input. Type any integer from 0 to 255; the default is 255.
2. Enter the green value (G) in the second input. Type any integer from 0 to 255; the default is 0.
3. Enter the blue value (B) in the third input. Type any integer from 0 to 255; the default is 0.
4. Read the live hex code, formatted as #RRGGBB with uppercase hex digits, immediately above the preview swatch. The default (255, 0, 0) gives #FF0000.
5. Read the canonical rgb(R, G, B) CSS string below the hex, ready to paste into stylesheets.
6. To convert hex back to RGB, type a hex code into the dedicated hex field. The three R/G/B inputs update as you type. Three-digit shorthand like #F50 is accepted and expands to #FF5500.
7. Click Copy hex to copy the six-digit hex code to your clipboard, or Copy rgb() to copy the CSS rgb(R, G, B) string.
8. Use the preset chips (Pure red, Vivid orange-red, Dodger blue, etc.) to load known-good colours without retyping.

The Formula

Hex is just a compact base-16 representation of the three 8-bit colour channels. Every modern display is a 24-bit truecolour device: each pixel has three independent channels, red, green, blue, and each channel is exactly one byte (8 bits). One byte carries the values 0 through 255. Three bytes stacked side-by-side encode 256 × 256 × 256 = 16,777,216 distinct colours, which is more shades than the human eye can resolve at typical viewing distances. Hex codes are simply the human-friendly notation for those three bytes.

To convert one channel from decimal to hex:

hex_byte = (n).toString(16).toUpperCase().padStart(2, '0')

That is: take the integer, convert it to base 16 (which produces a string using the characters 0-9 and a-f), uppercase it for display, and pad with a leading zero if the result is only one digit. So:

• 0 → "00"
• 16 → "10"
• 87 → "57"
• 128 → "80"
• 255 → "FF"

Three channels stacked side-by-side with a leading # give the full six-digit hex code:

hex = "#" + red_hex + green_hex + blue_hex

To convert in the opposite direction, take each pair of hex digits and parse them as a base-16 integer:

• parseInt("FF", 16) → 255
• parseInt("57", 16) → 87
• parseInt("33", 16) → 51

The CSS specification also defines a three-digit shorthand for hex: #RGB. The shorthand expands to six digits by duplicating each digit, so:

• #F50 expands to #FF5500
• #ABC expands to #AABBCC
• #FA3 expands to #FFAA33

Every modern browser, every CSS preprocessor, and every colour picker accepts both forms and renders them identically. The shorthand is shorter but cannot express every colour, it only covers the 4,096 codes where each channel is one of 0, 3, 6, 9, C, or F doubled. Anything else must be written in six-digit form.

The packed decimal form, used by older canvas APIs and the legacy bgcolor HTML attribute, is:

decimal = (R * 65536) + (G * 256) + B

So #FF5733 packs to (255 × 65536) + (87 × 256) + 51 = 16,738,867. JavaScript's value.toString(16).padStart(6, '0') round-trips back to the hex form.

Real-World Worked Examples

Example 1, Vivid orange-red (255, 87, 51) → #FF5733

A brand designer is building a CTA button and needs the hex code for the colour the marketing team described as "vivid orange-red, like a sunset".

• Red: 255.toString(16).padStart(2, '0') = "FF"
• Green: 87.toString(16).padStart(2, '0') = "57" (87 = 5 × 16 + 7)
• Blue: 51.toString(16).padStart(2, '0') = "33" (51 = 3 × 16 + 3)
• Hex: #FF5733
• rgb() string: rgb(255, 87, 51)
• Decimal: (255 × 65536) + (87 × 256) + 51 = 16,738,867

The result is the same colour as the popular Flat UI "orange" tone and as one of the named "tomato" family of warm reds. Paste #FF5733 into any CSS file to use it directly.

Example 2, Pure black (0, 0, 0) → #000000

The minimum value on every channel:

• Red: 0 → "00"
• Green: 0 → "00"
• Blue: 0 → "00"
• Hex: #000000
• Decimal: 0

Black is the only colour where every channel is 00. It is the bottom of every colour ramp, the default for background-color in many browsers, and the correct answer whenever a designer asks "what hex is pure black?".

Example 3, Pure white (255, 255, 255) → #FFFFFF

The maximum value on every channel:

• Red: 255 → "FF"
• Green: 255 → "FF"
• Blue: 255 → "FF"
• Hex: #FFFFFF
• Decimal: 16,711,680 (wait, recalculate: 255 × 65536 + 255 × 256 + 255 = 16,843,135)

White is the maximum-brightness sRGB colour and the standard text colour on dark backgrounds. It is also the default text colour in most browsers and the colour that a colour-managed pipeline produces when every channel is at full scale.

Example 4, Midnight blue (16, 32, 48) → #102030

A subtle dark blue used for late-night interface modes:

• Red: 16 → "10" (note the leading-zero padding, without it, the result would be "1" and the byte boundary would shift, breaking the colour)
• Green: 32 → "20"
• Blue: 48 → "30"
• Hex: #102030
• Decimal: (16 × 65536) + (32 × 256) + 48 = 1,068,336

#102030 is a popular dark mode background because it sits in the deep-blue end of the spectrum without being pure black, giving the screen a slight cool cast that reads as "night" rather than "off".

Example 5, Rose / fuchsia (255, 0, 128) → #FF0080

A vivid pink-red that sits between pure red and pure magenta:

• Red: 255 → "FF"
• Green: 0 → "00"
• Blue: 128 → "80"
• Hex: #FF0080
• Decimal: 16,711,680 + 128 = 16,711,808

#FF0080 is a popular accent colour for music, fashion, and photography brands because it is saturated without being as harsh as pure magenta. Note that because the green channel is exactly 00, the abbreviation #F08 is a legal shorthand that expands to the same colour.

Example 6, Dodger blue (30, 144, 255) → #1E90FF

The CSS named colour dodgerblue is one of the 140 named colours in the CSS Color Module Level 4 spec:

• Red: 30 → "1E" (30 = 1 × 16 + 14)
• Green: 144 → "90" (144 = 9 × 16 + 0)
• Blue: 255 → "FF"
• Hex: #1E90FF
• Decimal: (30 × 65536) + (144 × 256) + 255 = 2,004,735

#1E90FF is named after the original "Dodger blue" Crayola crayon (which had a slightly different shade) and is a standard web-safe colour in most modern design systems.

Where It Shows Up

Hex RGB conversion is one of the daily chores of anyone who touches colour on the web, in print, or in software. The most common real-world contexts are:

• Web design and CSS authoring. Every CSS, SCSS, and inline style attribute takes colours as hex. The first colour property in any new stylesheet is almost always written as a hex code, and every subsequent tweak uses the same notation.
• Design tokens and theme files. Design systems store their colour palettes as JSON or YAML files where every entry is a hex string. Style Dictionary, Theo, and most "design tokens" specifications default to hex because every downstream tool accepts it.
• CSS framework palettes. Tailwind CSS, Bootstrap, Material UI, Chakra UI, and Ant Design publish their default colour scales as hex arrays. Tailwind's blue-500 is #3B82F6; Material's "Blue 500" is #2196F3. Knowing the conversion lets you mix-and-match across systems.
• Figma, Sketch, and Photoshop colour pickers. Every design tool's colour panel exposes both RGB and hex. Designers routinely switch between the two to enter values that aren't on the slider's visible range, then copy the hex back to the tool.
• SVG and vector graphics. SVG fill, stroke, and stop-color attributes accept hex directly. Data-visualisation libraries that emit SVG (D3, Observable Plot, Vega) typically export palettes as hex arrays.
• Data-visualisation palettes. Chart libraries (Chart.js, Plotly, ECharts, Recharts) take colour arrays in hex form. Categorical palettes like ColorBrewer's Set1, sequential palettes like Viridis, and diverging palettes like RdBu are all distributed as hex triples.
• Brand guidelines and brand sheets. A brand book will publish the official Pantone, CMYK, RGB, and hex for every colour. The hex value is the one designers and developers paste into code; the others are reference.

Common Mistakes

• Forgetting to pad with a leading zero. Converting 16 with naive code can produce "1" instead of "10", which silently breaks the byte boundary and produces an entirely different colour. Always use padStart(2, '0') (or the language equivalent) after converting to base 16.
• Confusing three-digit shorthand with three raw digits. #FA3 is a legal CSS hex code that expands to #FFAA33. It is not a typo for #FA3000 or #FA30FF. The shorthand works by doubling each digit, #FA3 → #FFAA33, so a shorthand character only carries half the information of a six-digit character.
• Treating hex as case-sensitive. #FF5733 and #ff5733 are the same colour. CSS, HTML, SVG, and every major design tool treat them identically. Pick one convention per project for readability but never compare hex strings with case-sensitive equality.
• Reading #ABC as #ABC000. The shorthand #ABC is #AABBCC, not #ABC000 (which would also be a legal hex but a different colour, a dark olive-green). Always expand shorthand by digit-doubling before doing anything else with the value.
• Assuming hex can represent every colour. Hex is implicitly sRGB. It cannot represent colours outside the sRGB gamut, some print spot colours, the wider P3 primaries used by newer displays, or the Rec.2020 primaries used in HDR video. For those colours, use the explicit color(display-p3 ...) or oklch(...) functions defined in CSS Color Module Level 4.
• Mixing up hex byte order. The CSS hex code is #RRGGBB: red first, green middle, blue last. Some older Windows APIs use #BBGGRR (blue, green, red). A #FF5733 in CSS is a vivid orange-red; in a COLORREF Windows GDI value it would be a dark muddy blue.
• Dropping the leading #. In CSS, the leading # is required. In some other contexts (URL parameters, JSON values, some design tools) the # is optional or stripped automatically. Always include it when writing CSS to avoid silent parse failures.

Frequently Asked Questions

What is 24-bit truecolour? 24-bit truecolour means each pixel is encoded as three independent 8-bit channels, one byte for red, one for green, one for blue. One byte holds 256 distinct values, so three bytes together encode 256 × 256 × 256 = 16,777,216 distinct colours. Every modern consumer display (monitors, phones, TVs, tablets) is a 24-bit truecolour display, and every web browser assumes sRGB 24-bit colour when it parses a hex code or an rgb() function. "Truecolour" is the term for "deep enough that the eye cannot see the bands between adjacent shades".

What does a hex code like #FF5733 actually mean? A hex code is a compact representation of three bytes. Each pair of hex digits (one byte) is a number from 00 to FF, which is decimal 0 to 255. So #FF5733 means red = 255, green = 87 (because 57 in base 16 is 5 × 16 + 7 = 87), blue = 51 (because 33 in base 16 is 3 × 16 + 3 = 51). The three channels together describe a vivid orange-red. The # is just a marker that says "the next six characters are a hex colour".

How do you convert a number from decimal to hex? Divide the number by 16 repeatedly and read the remainders in reverse. Each remainder is one hex digit. For example, 87 ÷ 16 = 5 remainder 7, so the lowest hex digit of 87 is 7. 5 ÷ 16 = 0 remainder 5, so the next hex digit is 5. Reading the remainders from last to first gives 57. In code, JavaScript's n.toString(16) does this automatically; in Python it is format(n, 'x') or hex(n). After converting, pad with a leading zero if the result is only one digit (because every hex byte must be exactly two characters).

Why does CSS use a leading # for hex codes? The # distinguishes a hex colour code from other tokens that start with a digit or a letter. Without it, #FF5733 and the CSS function FF5733(...) would be ambiguous. The # is a parser marker that says "this is a colour literal". Some non-CSS contexts (URL parameters, JSON design tokens) allow the hex without the #; the CSS spec itself requires it.

What is the three-digit shorthand #RGB? The CSS specification defines #RGB as a shorthand that expands to #RRGGBB by duplicating each digit. So #F50 becomes #FF5500, #ABC becomes #AABBCC, and #FA3 becomes #FFAA33. The shorthand is more compact but only covers the 16 × 16 × 16 = 4,096 colours where each channel is one of 0, 3, 6, 9, C, or F doubled. Anything else must be written in six-digit form. Modern colour tools accept both forms interchangeably.

Is #FF5733 the same as #ff5733? Yes. Hex colour codes are case-insensitive in CSS, HTML, SVG, and every major design tool. #FF5733, #ff5733, and #Ff5733 all describe the same colour. Pick one convention per project (uppercase is traditional in print and Adobe products; lowercase is common in code) for readability, but never compare hex strings with case-sensitive equality in scripts.

How does this converter handle invalid hex input? If the hex field contains anything other than a 3- or 6-digit string of 0-9 and a-f characters (with an optional leading #), the converter shows a red error message and freezes the hex-driven RGB read on the last valid value. The R/G/B number inputs continue to drive the live hex display, so the user can always recover by typing in either direction. The preview swatch continues to reflect the currently-valid RGB input.

Why do some hex codes use lowercase and others use uppercase? Lowercase is the form most often produced by code (JavaScript's .toString(16) returns lowercase by default, and design tools that read from CSS variables tend to preserve whatever case they were given). Uppercase is the form most often used in print, brand guidelines, and Adobe products (Photoshop, Illustrator, InDesign display uppercase hex in their colour panels). They are the same colour; the choice is purely stylistic. This converter outputs uppercase to match the tradition of publishing colours in print-style form.

How many distinct colours can a hex code represent? A six-digit hex code like #RRGGBB represents exactly 16,777,216 distinct colours, 256 × 256 × 256, one for each combination of three bytes. That is the full 24-bit sRGB gamut. Hex cannot represent colours outside that gamut (some wide-gamut primaries, certain spot colours); for those, use the modern CSS color() or oklch() functions defined in CSS Color Module Level 4.

Can I use hex codes with transparency? Standard six-digit hex cannot carry transparency. CSS Color Module Level 4 introduces eight-digit hex with the form #RRGGBBAA, where the final AA pair is an alpha byte (00 = fully transparent, FF = fully opaque). Browsers added support for eight-digit hex in the late 2010s. Older code uses the separate rgba(R, G, B, A) notation instead. Three-digit hex has a four-digit shorthand #RGBA that expands to #RRGGBBAA the same way #RGB expands to #RRGGBB.

References

• W3C CSS Color Module Level 4. The W3C specification that defines hex notation (#RRGGBB, #RGB, #RRGGBBAA, #RGBA), rgb() and rgba() functions, the CSS named colours, and the modern color(), lab(), lch(), oklab(), oklch(), and color-mix() notations. Authoritative reference for any web colour question.
• MDN Web Docs, CSS colour. Mozilla Developer Network's reference for the same CSS colour specification, with browser compatibility tables, code examples, and interactive playgrounds. The first stop for "does this syntax work in Safari?".
• Wikipedia, sRGB. The Wikipedia article on the standard RGB colour space describes the gamma curve, the white point, the primaries, and the relationship to CIE XYZ and other device-independent colour spaces. Useful background for understanding why hex is implicitly sRGB.
• Wikipedia, Web colours. The article on web colours documents the history of the 216-colour "web-safe" palette, the X11 named colours, and the modern 140-colour CSS named set. Includes a chart of every named colour with its hex value.
• International Color Consortium (ICC). The ICC publishes the ICC profile specification, which is the foundation of colour-managed workflows across displays, printers, and cameras. Relevant when moving colours from a hex-defined sRGB workflow into a wider gamut.