How this instrument works
Each RGB channel is an integer from 0 to 255 because a byte holds exactly 256 values, the unit early graphics hardware allocated per color -- red, green and blue together give 256 x 256 x 256 = 16,777,216 possible colors, commonly called 24-bit 'true color.' Hexadecimal packs that same 0-255 range into exactly two digits, since 16 x 16 = 256: FF (15x16+15) reproduces 255 with no rounding and no wasted characters, so three channels collapse into a six-character code, #RRGGBB, that's a byte-for-byte match for the underlying data.
Hexadecimal color notation entered common use with early Macintosh and X Window System graphics tools in the 1980s, then became the web's default once Netscape's early browsers and the 1996 CSS1 specification standardized #RRGGBB triplets for HTML documents. Before broadband and millions-of-colors displays were universal, designers worked around a 216-shade 'web-safe' palette built from channel values 00, 33, 66, 99, CC and FF, chosen because they rendered identically on the 8-bit-per-pixel monitors common at the time; modern screens outgrew that limit decades ago, but the hex shorthand survived because it still maps directly onto how files, monitors and code all store color, one byte per channel.
CSS, SVG and most design software accept color as either rgb(255, 87, 51) or #FF5733, and both name the same value -- hex simply became the default in code because a six-character string pastes cleanly into class names and hits fewer parsing edge cases than commas and parentheses, and it reads unambiguously regardless of locale, with no thousands separators to misplace. CSS also permits a three-character shorthand, such as #F53, wherever every channel's two hex digits repeat, and every hex color is case-insensitive: #ff5733 and #FF5733 render as the identical color, though uppercase became the informal convention for readability in source code.
- Enter the Red value (r) as a whole number from 0 to 255, where 255 is the fully-saturated red channel and 0 means no red at all.
- Enter Green (g) and Blue (b) the same way -- each ranges independently from 0 (that channel off) to 255 (that channel maxed out).
- Read the Hex color code (hex) field for the six-digit #RRGGBB result, which recalculates the instant any of r, g or b changes.
- Paste the hex string directly into CSS (color: #FF5733;), an SVG fill attribute, or a design tool's color-picker input -- it's accepted everywhere a hex triplet is expected.
- Keep r, g and b within 0-255, since that's the full range one byte can store; anything you type outside it isn't valid 8-bit channel data.
Worked example — RGB(255, 87, 51) to hex
Take RGB(255, 87, 51), a warm orange-red. Red is already 255, the channel maximum, which in hex is FF, since 15x16 + 15 = 255 -- the highest value two hex digits can reach. Green is 87: dividing by 16 gives a quotient of 5 with remainder 7, so 87 becomes 57 in hex (5x16 + 7 = 87). Blue is 51: 51 / 16 gives quotient 3 remainder 3, so 51 becomes 33 in hex (3x16 + 3 = 51).
Concatenating the three two-digit pairs in red-green-blue order gives FF5733, and prefixing the required # sign produces the final code: #FF5733. Drop that string into any CSS color property, an SVG fill, or a Photoshop swatch and you'll see the identical warm orange-red that RGB(255, 87, 51) started from -- hex and RGB are just two spellings of one 24-bit number.
Questions
Why does hex use two digits per channel instead of three?
Because a byte is 8 bits, and 8 bits represent exactly 256 values (0 through 255) -- and 16 x 16 also equals 256, so two base-16 digits, each running 0-9 then A-F, cover the full 0-255 range with nothing left over and nothing wasted. Three decimal digits (000-255) would technically work too, but hex's clean 256 = 16^2 relationship is why hexadecimal, not decimal or octal, became the standard packing for byte-sized color channels across graphics file formats and code.
What do the letters A through F mean in a hex color?
They're digits, standing in for the decimal values 10 through 15 so hexadecimal (base 16) can express one channel's full 0-255 range in exactly two characters. A hex digit runs 0, 1, 2 ... 9, A, B, C, D, E, F -- sixteen symbols for sixteen possible values in each of the two digit positions, giving 16 x 16 = 256 total combinations per channel, matching the 256 values a single byte can hold.
Is #ff5733 the same color as #FF5733?
Yes -- hex color codes are case-insensitive everywhere CSS, HTML, SVG and virtually every graphics tool reads them, because A-F are digit symbols, not text, and a digit's value doesn't change with letter case. Uppercase became the more common convention in style guides and codebases because six uppercase characters are easier to visually distinguish from surrounding lowercase code, but browsers, image editors and design software render #ff5733 and #FF5733 identically.
Can a hex code be converted back to RGB values?
Yes, and it's the same process run in reverse: split the six hex digits into three pairs, then convert each two-digit hex pair back to a decimal number 0-255 (FF becomes 255, 57 becomes 87, 33 becomes 51). Because RGB-to-hex and hex-to-RGB are both exact base conversions with no rounding at any step, converting a color to hex and back always returns the identical RGB values it started from.
What's the difference between #FF5733 and rgb(255, 87, 51)?
Nothing about the color itself -- both name the same RGB(255, 87, 51) value in two different notations, hexadecimal versus decimal-with-commas. CSS, SVG and most design software accept either interchangeably. Hex became the more common shorthand in stylesheets and codebases because a six-character string is shorter to type and paste than a three-argument function, though rgb() reads more directly to anyone unfamiliar with hexadecimal.
Why is a three-character hex shorthand like #F53 sometimes used?
CSS allows a three-digit shorthand whenever every channel's two hex digits are identical -- #FF5500 can be written #F50, because FF, 55 and 00 each repeat a single digit. The browser expands each shorthand digit by duplicating it, so #F50 and #FF5500 render identically. It only applies to that narrow set of colors: #FF5733's green pair is 5 and 7, which don't match, so no valid three-character form exists for it.
Does the channel order in a hex code ever change?
No -- #RRGGBB is a fixed, universal order: the first two hex digits are always red, the middle two always green, the last two always blue. A few other formats use a different channel order internally (BGR turns up in some older Windows bitmap structures, for instance), but every hex color encountered in CSS, HTML, SVG or standard design software follows red-green-blue, left to right, with no exceptions.
Why do RGB(0, 0, 0) and RGB(255, 255, 255) look so different from every other hex code?
They're not exceptions to any rule -- they're the two extreme corners of the color cube: #000000 is every channel at its floor, giving black, while #FFFFFF is every channel at its 255 ceiling, giving white. Every other hex code sits between those corners of the 16,777,216-color space. Repeating digits alone aren't unique to black and white -- #333333, #666666 and #999999 are single-digit repeats too, and they're ordinary mid-tone grays. What sets 000000 and FFFFFF apart is that they're the two endpoints every other channel value falls between -- the absolute floor and ceiling all three channels can reach at once.