RGB and Hex: Two Ways to Express the Same Color
Computer monitors produce color by mixing red, green, and blue light. Each channel ranges from 0 (off) to 255 (full intensity). The RGB model describes colors as three integers: rgb(255, 87, 51) is a warm orange-red. CSS hexadecimal notation expresses the same values more compactly: #FF5733. Designers work with both — design tools like Figma and Sketch show hex codes, while CSS custom properties and JavaScript canvas APIs often work in RGB.
The Conversion: Channel by Channel
Converting RGB to hex is straightforward: convert each channel (R, G, B) independently to a 2-digit uppercase hex value and concatenate them. Prepend # for CSS usage.
255 → FF. 87 → 57. 51 → 33. Combined: #FF5733.
// JavaScript
function rgbToHex(r, g, b) {
return '#' + [r, g, b]
.map(v => v.toString(16).toUpperCase().padStart(2, '0'))
.join('');
}
rgbToHex(255, 87, 51) // → "#FF5733"
// Python
def rgb_to_hex(r, g, b):
return f'#{r:02X}{g:02X}{b:02X}'
rgb_to_hex(255, 87, 51) # → '#FF5733'Common Color Values to Know
Black is rgb(0, 0, 0) = #000000. White is rgb(255, 255, 255) = #FFFFFF. Pure red is rgb(255, 0, 0) = #FF0000. Pure green is rgb(0, 255, 0) = #00FF00. Pure blue is rgb(0, 0, 255) = #0000FF. Shades of grey have equal R, G, and B values: rgb(128, 128, 128) = #808080.
Alpha Channel and RGBA
CSS supports rgba(r, g, b, alpha) and 8-digit hex (#RRGGBBAA). The alpha channel controls opacity: 0 is fully transparent, 255 (FF) is fully opaque. #FF573380 is the orange-red at 50% opacity (80 hex = 128 decimal ≈ 50% of 255).
Not all browsers and design tools support 8-digit hex — older versions of IE and Safari have inconsistent support. rgba() CSS function is more universally supported for transparency.
Shorthand Hex Colors
When both digits of each channel are identical, CSS allows a 3-digit shorthand: #FFF is equivalent to #FFFFFF, #000 to #000000, and #F00 to #FF0000. Each digit is doubled. Only colors where every channel value has both digits identical can be shortened.
Frequently Asked Questions
How do I convert RGB to hex in CSS?
In CSS, you can use rgb(255, 87, 51) directly — you do not need to convert. But if you need the hex code, each channel (R, G, B) maps to two hexadecimal digits: 255→FF, 87→57, 51→33. The hex code is #FF5733.
What is the hex code for rgb(0, 0, 0) and rgb(255, 255, 255)?
rgb(0, 0, 0) is pure black → #000000. rgb(255, 255, 255) is pure white → #FFFFFF. These are the extremes of the RGB model. Equal values for all three channels always produce a shade of grey.
Why are RGB values 0–255 and not 0–100?
Monitors historically addressed colors using 8-bit values per channel. An 8-bit unsigned integer holds values from 0 to 2^8-1 = 255. Using 8 bits per channel means a full color requires 24 bits (3 bytes), which is the origin of the term '24-bit color' or 'true color'. This maps cleanly to 2 hex digits per channel.
What is the difference between hex color and RGB color in CSS?
#FF5733 and rgb(255, 87, 51) are identical — they refer to the exact same color. Hex is more compact and common in design tools. RGB is more readable when setting individual channels. Both support 8-bit precision. RGBA (rgb with alpha) is used when transparency is needed.
How do I convert hex to RGB? (reverse direction)
For a 6-digit hex like #FF5733: split into pairs (FF, 57, 33) and convert each pair from hex to decimal. FF→255, 57→87, 33→51. Result: rgb(255, 87, 51). The hex-to-RGB converter on this site does this automatically.