A hex color code is three base-16 numbers packed into six digits: the first pair is red, the second green, the third blue, and each pair converts to a value from 0 to 255. So #FF5733 means red FF = 255, green 57 = 87 and blue 33 = 51, written in RGB as rgb(255, 87, 51). Once you can convert one pair by hand, every color code in every stylesheet becomes readable. This guide covers the pair math, the 3-digit shorthand, alpha digits, HSL, and the contrast rules that decide whether text stays readable. The hex to RGB converter will check any code for you as you read.
Base 16 in Sixty Seconds
Hexadecimal is base 16, counting 0, 1, 2 ... 9, then A, B, C, D, E, F for ten through fifteen, before carrying over. A two-digit hex pair converts with one formula: multiply the first digit by 16 and add the second. Take the green pair of #FF5733, which is 57: 5 x 16 = 80, plus 7, equals 87. The blue pair 33 is 3 x 16 + 3 = 51. The red pair FF is 15 x 16 + 15 = 240 + 15 = 255, the maximum, which is why FF always means full intensity of that channel and 00 means none at all. Programmers like hex because one pair maps exactly onto one byte, and three bytes map onto a tidy six-digit string you can copy between tools. If base 16 feels alien at first, remember it is only a counting system with six extra digits; the conversion formula never changes, whatever pair you feed it.
Sixteen values per digit, squared across two digits, gives 256 levels per channel, and 256 x 256 x 256 is 16.7 million possible colors, more than most screens can display distinctly. The pairs are positionally meaningful: the code #102030 is a dark blue-grey because all three channels are low and blue is highest, while #E8E8E8 is a light neutral grey because all three are high and equal. Equal pairs always produce a shade of grey, which is a quick sanity check when reviewing a palette: if the three pairs are close, the color is nearly neutral, and the pair that stands out is the hue doing the talking. The 0 to 255 scale is the same one RGB uses for a simple reason: both describe one byte per channel, so hex is not a different color system at all, just RGB written in base 16.
The 3-Digit Shorthand
The 3-digit shorthand works only when every pair consists of two identical digits. Each digit is doubled to rebuild the full code: #F53 becomes F, 5, 3 doubled into FF, 55, 33, which is #FF5533, or rgb(255, 85, 51). Note that #FF5533 is not the same as #FF5733, since 55 hex is 85 while 57 hex is 87; the shorthand is exact only for codes that were doubled in the first place, such as #FFF for white, #000 for black and #36C for a blue built from 33, 66 and CC. Shorthand also explains codes you meet in the wild: a stylesheet full of #333, #666 and #999 is using greys at 51, 102 and 153 per channel, a ready-made neutral scale. CSS accepts the short form anywhere a color is expected, and minifiers use it to save bytes, but if a pair like 57 has two different digits, the color simply cannot be shortened.
RGB, RGBA and HSL: Three Views of One Color
RGB, RGBA and HSL are three views of the same color, each built for a different job. RGB matches how screens physically mix light, so it is the natural format for code and conversion. RGBA adds a fourth value, alpha, from 0 (fully transparent) to 1 (fully opaque), used for overlays, shadows and tinted panels: rgba(255, 87, 51, 0.5) is our example color at half strength. HSL describes hue as an angle on a color wheel (0 is red, 120 green, 240 blue), saturation as a percentage, and lightness as a percentage. In HSL our color is hsl(11, 100%, 60%): an orange-red hue, fully saturated, somewhat light. Designers prefer HSL for building palettes because raising lightness or lowering saturation predictably softens a color, something RGB numbers make hard to judge. A practical HSL workflow: fix the hue you like, hold saturation steady, and generate a full scale of shades by stepping lightness from 20 to 90 percent. Every step stays recognisably in the same color family, a guarantee that is almost impossible to keep when editing RGB numbers directly.
Eight-Digit Hex and the Alpha Pair
Modern CSS also allows the alpha channel inside the hex code itself, as an extra pair at the end. #FF5733CC is the example color with alpha pair CC. Converting: C is 12, so CC = 12 x 16 + 12 = 204, and 204 / 255 = 0.8, meaning 80 percent opacity, the same as rgba(255, 87, 51, 0.8). An alpha pair of 00 is fully transparent and FF is fully opaque. Eight-digit hex is supported in all current browsers and is handy for design tokens, but watch your tooling: some older design software ignores the last pair, and Android uses a different order, #AARRGGBB, with the alpha pair first. Always confirm which end the alpha lives on before pasting a code between platforms. Alpha also stacks: a half-transparent panel over a half-transparent overlay compounds, so the effective opacity over the page is stronger than either value alone suggests, which is why translucent colors should be tested over the real background rather than a white artboard.
One Color, Four CSS Declarations
Here is the same color written for a real stylesheet, one format per line: color: #FF5733; background: rgba(255, 87, 51, 0.5); border-color: hsl(11, 100%, 60%); outline-color: #FF5733CC. All four declarations refer to #FF5733 or a transparency variant of it. In practice you pick per situation: hex for solid brand colors because it is compact and matches design-tool output, rgba() or 8-digit hex when layering over unknown backgrounds, and hsl() when generating hover and disabled states by nudging lightness. Consistency inside one codebase matters more than the choice itself, and a hex to RGB converter that shows every format side by side makes standardization easy. Design tools speak the same language: Figma, Photoshop and Illustrator all display the hex value of a picked color, so copying the six digits is usually faster than re-deriving RGB, and pasting an 8-digit code into a tool that predates alpha support is the one case worth double-checking by eye.
Accessibility: Contrast Ratios That Pass WCAG
Color choices carry an accessibility duty: text must contrast enough with its background to be read by people with low vision. WCAG guidance sets a minimum contrast ratio of 4.5:1 for normal text at level AA, and 3:1 for large text (roughly 24px, or 19px bold). Our example shows why this matters: #FF5733 on white has a contrast ratio of about 3.2:1, so it passes for large headlines but fails for body text. Darkening the color raises the ratio; lightening text color on a dark background does the same job in reverse. Check ratios before shipping a palette, not after complaints arrive, and remember the ratio depends on the pairing, never on one color alone. Free contrast checkers compute the ratio from two hex codes, and the fix is usually small: darkening #FF5733 by roughly a fifth in each channel reaches the 4.5:1 line while keeping the color recognisably itself.
Why the Same Hex Looks Different on Different Screens
One puzzle remains for many designers: the same hex code can look different on two screens sitting side by side. A hex code names a point in the sRGB color space, but screens differ in gamut, the range of colors they can physically produce. Wide-gamut displays (often labeled Display P3) can show more saturated colors than an older sRGB monitor, calibration and brightness settings shift perception further, and uncalibrated screens simply render the numbers with their own bias. The code is an instruction, not a guarantee. For brand-critical work, view key colors on a few ordinary devices, not just the studio monitor, and accept small variations as normal. When a client sends a PSD mockup, the flattened colors you sample are exactly what a PSD to PNG converter export will carry to the web, so sample after flattening rather than layer by layer.
Common Hex Mistakes
The recurring mistakes are small but costly. Dropping the leading # works in some design tools but invalidates a CSS declaration. Expanding a shorthand wrongly, turning #F53 into #F50300 or similar, produces a completely different color. Copying a CMYK value from print software into a hex field confuses two color models that do not map one to one. Assuming alpha always sits at the end breaks Android layouts, as covered above. And choosing text colors by eye without a contrast check fails real users. Each error is a one-line fix once you understand that hex is just three base-16 numbers with an optional fourth for alpha. One more trap: reusing a color sampled from a screenshot. Screenshots may be compressed, color-shifted by the capturing display, or saved under a different profile, so the sampled hex can sit several steps from the source value; always go back to the original file or design token.
To recap: split the six digits into three pairs, convert each pair with first digit times 16 plus second, and you have RGB. Double the digits of a 3-digit code, read a trailing pair as alpha over 255, translate to HSL when you need to reason about lightness, and test your pairings against the 4.5:1 and 3:1 contrast guidance. With those rules, codes like #FF5733 stop being magic strings. Run any color through the hex to RGB converter to see its RGB, RGBA, HSL and CSS forms together, and if you are extracting colors from a design file, the PSD to PNG converter will flatten it for the web first.