Every color on every screen you've ever looked at is built from some combination of red, green, and blue light — and hex codes are simply the standard way of writing down exactly how much of each. Once you understand the logic behind hex notation, colors stop being a mysterious string of letters and numbers that designers hand you, and become something you can read, predict, and adjust with real confidence. This guide breaks down how hex codes actually work, how they relate to RGB and HSL, and how to read a hex code and know roughly what color it represents before you even look at it.
A hex color code is a six-digit code, usually preceded by a "#" symbol, like #FF5733. Those six digits split into three pairs, each representing the intensity of one of the three primary colors of light: red, green, and blue, in that order. #FF5733 breaks down into FF (red), 57 (green), and 33 (blue).
Each pair is written in hexadecimal — base 16 — rather than the more familiar base 10 decimal system, which is why letters A through F show up alongside numbers 0 through 9. In hexadecimal, the digits run 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, where A equals 10 in decimal, B equals 11, and so on up to F, which equals 15. Since each pair has two hex digits, and each digit can be any of 16 values, each pair can represent 16 × 16 = 256 possible values, ranging from 00 (no intensity of that color) to FF (full intensity).
It might seem simpler to just write RGB values in plain decimal — and in fact, that's exactly what the RGB color format does, expressing the same color as rgb(255, 87, 51). Hex notation exists mainly for compactness and historical convention in web and software development: two hex digits can represent any value from 0–255 in exactly two characters, whereas the decimal equivalent needs up to three digits per channel. Six characters total for a hex code is more compact than the equivalent decimal RGB notation, and hex became the standard convention early in the web's history, largely carried over from earlier computing contexts where hexadecimal was already commonly used to represent byte values (since one byte can hold exactly 256 possible values, 0–255, mapping perfectly onto two hex digits).
With a little practice, you can learn to roughly predict what a hex code will look like just by reading the pattern of its three pairs:
A useful general rule: the highest-value pair tends to dominate the resulting hue, low overall values across all three pairs produce darker colors, and high values close to FF across all three pairs produce lighter, more pastel colors.
These three formats all describe the exact same set of possible colors, just structured differently for different purposes:
#FF5733) is compact and is the most common format for writing color values directly into CSS stylesheets and design tools, largely due to convention and brevity.rgb(255, 87, 51)) expresses the same red/green/blue values in plain decimal, which some people find more immediately readable than hex, especially when doing quick mental math on color intensity.hsl(11, 100%, 60%)) stands for Hue, Saturation, and Lightness — a fundamentally different, more human-intuitive way of describing the same color. Hue is a position on the color wheel (0–360 degrees), saturation is how vivid or muted the color is (0% being gray, 100% being fully vivid), and lightness is how close to black or white the color is (0% being black, 100% being white).HSL is often more intuitive for making deliberate color adjustments — if you want a lighter version of a color, you increase the lightness value directly, whereas in hex or RGB, producing a lighter version requires proportionally adjusting all three channels together, which isn't nearly as immediately obvious just by looking at the values. This is exactly why many designers think in HSL when choosing colors, but ultimately convert to hex for actual use in code, since hex remains the more universal, compact format supported everywhere.
You may also encounter 8-digit hex codes, like #FF5733CC. The extra two digits at the end represent an alpha channel — transparency — following the same 00–FF (0–255) scale as the other channels. FF means fully opaque, 00 means fully transparent, and values in between produce partial transparency. Not every context supports 8-digit hex codes; some older software and standards expect transparency to be specified separately (as in rgba(255, 87, 51, 0.8)), so it's worth checking compatibility with whatever tool or platform you're working in before relying on it.
Older web design guidance sometimes references "web-safe colors" — a restricted palette of 216 colors that were guaranteed to display consistently across the limited color depth of older monitors and graphics hardware from the 1990s. This concept is now essentially obsolete; virtually all modern displays support millions of colors without any of the older banding or approximation issues that made the web-safe palette necessary in the first place. If you encounter this term in older documentation, it's a historical artifact rather than a current best practice.
#333 (CSS shorthand for #333333) is a dark gray, or that #EEE is a very light gray, speeds up reading and troubleshooting stylesheets without needing to open a color picker every time.CSS supports a 3-digit shorthand for hex codes where each digit is doubled to form the full 6-digit value: #F53 expands to #FF5533. This shorthand only works when each pair in the full code consists of two identical digits, which is a relatively narrow subset of all possible colors — most real-world colors need the full 6-digit form, and the shorthand is really only a minor convenience for a small number of simple, "clean" color values.
Manually converting between hex, RGB, and HSL requires either memorizing hexadecimal-to-decimal conversion or working through the math for hue, saturation, and lightness by hand — both tedious and error-prone for anything beyond the simplest colors. A color converter handles all three formats simultaneously with a live preview, letting you paste in a hex code, RGB value, or HSL value and instantly see the same color represented in all three formats side by side, along with the actual rendered color so you can confirm it matches what you expected.
Three-digit hex codes are CSS shorthand notation, where each digit is automatically doubled to form the full six-digit value. This shorthand only works for colors where each of the three RGB pairs consists of two identical digits, which is a relatively small subset of all possible colors.
Pure black is #000000 (all channels at zero, no light) and pure white is #FFFFFF (all channels at maximum, full intensity of all three colors combined). In practice, designers often avoid pure black and white for text and backgrounds, since the extreme contrast can feel harsh, favoring very dark grays and off-whites instead.
Standard 6-digit hex codes can represent 16,777,216 distinct colors (256 possible values for each of the three channels, multiplied together), which covers essentially the entire range of colors a standard digital display can produce.
Neither is objectively 'better' — they represent identical underlying colors, just structured differently. HSL is often more intuitive for deliberately adjusting a color's lightness or vividness, while hex remains the more compact, universally supported format for actually implementing colors in code.
Try the Color Converter — free, instant, no signup
Open Color Converter →This article is for general informational purposes only and isn't professional advice. For decisions involving your health, finances, or legal matters, please consult a qualified professional.