Hex vs RGB Color Explained
Hex and RGB are equivalent ways to express sRGB colors—#RRGGBB vs rgb(r,g,b) each channel 0–255.
Quick answer
#RRGGBB hex encodes red, green, blue as two hex digits each (00–FF = 0–255). rgb(255, 0, 0) is the same red. #RGB shorthand doubles digits (#f00 = #ff0000). Alpha transparency: #RRGGBBAA or rgba(r,g,b,a).
Overview
Designers copy hex from Figma; CSS authors toggle rgb() when manipulating alpha in preprocessors. Both represent sRGB display colors on screens—not print CMYK. Six-digit hex dominates design token files; rgb() aids readability when explaining channel mixes in documentation. Modern CSS adds hex8 alpha and space-separated rgb syntax with slash alpha. Converting brand palette consistently across hex, rgb, and HSL prevents drift when multiple contributors hand-type values. Accessibility contrast checking consumes hex/rgb equally after normalization.
Hex color structure
# prefix optional in some tools; CSS allows #ffffff case-insensitive though lowercase common in design systems. Channels concatenated RR then GG then BB.
3-digit shorthand #abc expands #aabbcc—only when each pair duplicates. #abcd includes alpha in four-digit shorthand expanding to eight.
RGB in CSS and design tools
rgb(255, 87, 51) readable channel tuning; rgba fourth argument 0–1 or percentage opacity. Modern: rgb(255 87 51 / 0.5) space syntax.
Percentage rgb(100% 0% 0%) valid CSS alternative equal 255 red channel.
Converting between hex and rgb
Split hex pairs, parse base16 to decimal: #ff5733 → rgb(255, 87, 51). Reverse: clamp channels 0–255, toString(16) pad two chars join.
Floating point HSL round trips may off-by-one channel vs designer eyedropper—acceptable within 1/255 tolerance UI.
Alpha transparency formats
Eight-digit hex #RRGGBBAA last byte alpha FF opaque 00 transparent. rgba(0,0,0,0.5) half black overlay on hero images.
Premultiplied alpha in image assets separate concern from CSS color alpha on solid fills.
Design tokens and naming
Store canonical hex in token JSON; generate rgb variables at build for programmatic lighten/darken. Document primary-500 hex once source of truth.
Dark mode pairs need separate tokens not auto-invert naive hex math— perceptual HSL adjustments better.
Examples
Brand orange
#FF5733 ↔ rgb(255, 87, 51) ↔ hsl(11, 100%, 60%) same sRGB display.
50% overlay
rgba(0, 0, 0, 0.5) or #00000080 over white hero for readable white headline text.
Common mistakes and edge cases
- Using 0–1 floats inside rgb() without rgba—invalid CSS.
- Confusing hex with HSL values when copying tokens.
- Ignoring color profile—hex sRGB assumed web; print CMYK differs.
- Shorthand #1234 misread as #11223344 vs invalid—validate length.
Related resources
Related tools
Last reviewed: 2026-05-23