Article — RGB to HEX Converter
RGB to HEX Converter: Web Color Codes Explained
RGB and HEX are two notations for the same color information. RGB uses three decimal channels from 0 to 255 (red, green, blue); HEX packs those three values into six hexadecimal digits with a leading hash, such as #FFA500 for orange. The conversion is a radix change with no rounding: every RGB value has exactly one HEX equivalent and vice versa.
To convert RGB to HEX, take each channel, divide by 16 for the first digit, use the remainder for the second, and map 10-15 to letters A-F. To convert HEX back, split into pairs, multiply the first digit by 16, and add the second. The math takes 30 seconds by hand and zero seconds with the calculator above.
What does RGB to HEX mean
A digital color on a screen is three lights mixed together: red, green, and blue, each at some intensity between zero and full brightness. RGB notation writes those three intensities as integers from 0 to 255. rgb(255, 0, 0) is pure red at full intensity. rgb(255, 255, 255) is all three at full, which the eye reads as white.
HEX notation encodes the same three numbers as base-16 digits, packed into a string. The advantage is compactness: #FF0000 takes seven characters; rgb(255, 0, 0) takes thirteen. In a CSS file with hundreds of color declarations, that difference adds up. HEX is the dominant format in stylesheets, design files, and brand guidelines.
HEX color notation entered the web in 1996 with CSS 1.0, but the underlying RGB color model is older. It was formalized in the 1853 work of James Clerk Maxwell, who demonstrated that any visible color could be reproduced by mixing red, green, and blue light in varying intensities.
The RGB to HEX formula
The conversion is a base change, not a calculation in the usual sense:
HEX_pair = (channel ÷ 16) × 16 + (channel mod 16)Decimal 10 11 12 13 14 15 HEX A B C D E FWorked example for orange, rgb(255, 165, 0):
Red: 255 ÷ 16 = 15 remainder 15 → F and F → FF. Green: 165 ÷ 16 = 10 remainder 5 → A and 5 → A5. Blue: 0 → 00. Concatenate with a hash: #FFA500. The same color, written two ways.
The reverse is just as direct. Given #4080C8: split into 40, 80, C8. 40 = 4×16 + 0 = 64. 80 = 8×16 + 0 = 128. C8 = 12×16 + 8 = 200. Result: rgb(64, 128, 200), a medium sky blue.
RGB, HEX, and HSL compared
Three notations for the same color space, each with different strengths:
- RGB: rgb(255, 0, 0). Verbose but human-readable. Best for JavaScript animations and programmatic color manipulation.
- HEX: #FF0000. Compact and universal. Standard in CSS files, design tool exports, and brand documents.
- HSL: hsl(0, 100%, 50%). Hue, saturation, lightness — matches how designers think. Best for generating tints and shades.
- RGBA: rgba(255, 0, 0, 0.5). RGB plus an alpha channel from 0 to 1 for transparency.
- HSLA: hsla(0, 100%, 50%, 0.5). HSL plus alpha. Increasingly common in modern stylesheets.
- OKLCH: oklch(0.628 0.258 29). New in 2023, designed for perceptual uniformity. Adopted in CSS Color Level 4.
The first three (RGB, HEX, HSL) describe the same sRGB color space, so any color one can express, the others can too. They differ only in human ergonomics, not in the colors they can produce.
How many RGB and HEX colors exist
With 8 bits per channel and three channels, RGB has 256³ = 16,777,216 distinct colors. Every one of them has a unique HEX equivalent. That is enough range that the eye cannot distinguish adjacent codes: the gap between #FF0000 and #FF0001 is invisible on a normal monitor.
Older 16-bit displays could only show 65,536 colors. Mid-1990s web designers used a 216-color "web safe" palette to avoid dithering on those screens. Today every browser and display supports the full 16.7M range; web-safe palettes are a historical curiosity.
Recent displays (HDR, P3 wide-gamut) can render colors beyond standard sRGB. CSS Color Level 4 added new notation for those, including color(display-p3 r g b) and oklch(). RGB and HEX are still standard for ordinary sRGB content, which is over 95% of web traffic.
RGB to HEX in CSS and design tools
CSS accepts color in any of these notations interchangeably:
color: #FFA500;
color: rgb(255, 165, 0);
color: hsl(39, 100%, 50%);
All three produce the same orange. In practice, designers paste HEX out of Figma, Sketch, or Photoshop. Developers occasionally switch to rgb() or rgba() when they need to compute a color in JavaScript — channel arithmetic is easier on decimal numbers than on hex strings.
HEX shorthand and alpha transparency
When both digits in every pair of a HEX code match, CSS allows a 3-digit shorthand: #FF3366 can be written #F36. Each shorthand digit expands to itself doubled: F → FF, 3 → 33, 6 → 66. The colors are exactly the same; only the typing is shorter.
Shorthand only works for 8/16-divisible colors. #FFA500 cannot be shortened because A and 5 differ between the two digits of their pairs. The calculator above flags whether shorthand is possible for any given color.
For transparency, modern CSS supports 8-digit HEX (#RRGGBBAA), where the last pair is the alpha channel. #FF0000FF is opaque red; #FF000080 is red at 50% opacity. Browser support is universal in 2025, but for maximum compatibility many teams still use rgba() instead.
"red" in CSS equals #FF0000 — but "darkred" equals #8B0000, not #800000. CSS named colors are a fixed list of 147 specific values, not a calculation. When in doubt, use HEX or RGB to make the exact color explicit.
Common RGB to HEX mistakes
The errors that come up most often:
- Forgetting the hash — CSS color: FF0000 is invalid; it must be #FF0000.
- Wrong digit count — HEX must be 3, 4, 6, or 8 digits. #FFA50 (five digits) is invalid.
- Non-hex characters — only 0-9 and A-F are allowed. #GG0000 is meaningless.
- Mixing RGB scales — channels are 0-255, not 0-100 or 0-1. rgb(0.5, 0.5, 0.5) is wrong.
- Assuming HEX is case-sensitive — it is not. #ff0000 = #FF0000.
- Treating HEX like a magnitude — #FFFFFF is white because all channels are full, not because the number is "biggest."
RGB to HEX quick reference
The colors most often referenced in design briefs and stylesheets:
- Pure red: rgb(255, 0, 0) = #FF0000
- Pure green: rgb(0, 128, 0) = #008000 (CSS named "green")
- Pure blue: rgb(0, 0, 255) = #0000FF
- Black: rgb(0, 0, 0) = #000000
- White: rgb(255, 255, 255) = #FFFFFF
- Mid gray: rgb(128, 128, 128) = #808080
- Orange: rgb(255, 165, 0) = #FFA500
- Hot pink: rgb(255, 105, 180) = #FF69B4
The full conversion is in the calculator at the top of the page. Type any RGB value or paste any HEX code; the swatch and stats update live. Copy the CSS snippet at the bottom and paste directly into your stylesheet.