What Is a Hex Color Code? A Beginner's Guide

If you have ever written CSS, you have typed a hex color code — something like #3498db. They look like random strings, but every hex code is just a compact way of writing three numbers: the amount of red, green and blue in the color. Once you can read those numbers, the whole system makes sense.

The anatomy of #RRGGBB

A six-digit hex code splits into three pairs:

• The first pair is red (00–FF)
• The second pair is green (00–FF)
• The third pair is blue (00–FF)

The letters are base-16 digits: 0-9 keep their value, and A=10, B=11, C=12, D=13, E=14, F=15. So #3498db means red 0x34, green 0x98 and blue 0xDB — in decimal that is rgb(52, 152, 219), a friendly blue.

Why hex exists

Computers store each color channel as a byte, which can hold exactly 256 values (0–255). Two hex characters can represent any of those 256 values (0x00 to 0xFF), so six hex characters exactly describe a 24-bit color — one byte per channel. That is why #FFFFFF is white, #000000 is black, and there are 16,777,216 possible codes.

Shorthand and extended forms

• 3-digit shorthand like #f00 is red: each digit is doubled (#ff0000). Use it for colors whose pairs repeat.
• 8-digit codes like #3498db80 add an alpha channel (the last two digits), equivalent to rgba(52, 152, 219, 0.5).

Reading colors in the wild

With a little practice you can eyeball a code:

• #ff0000 — red (max red, no green or blue)
• #00ff00 — green
• #0000ff — blue
• High numbers across all three channels mean a light color; low numbers mean a dark one.
• If red is the highest channel, the color leans warm; if blue is highest, it leans cool.

Hex vs RGB vs HSL — which should you use?

• Hex is the most compact and dominant format in design tools, so it travels well between designers and developers.
• RGB is useful when you need numeric channels — for example canvas and image APIs that want r, g, b values.
• HSL is best when you are reasoning about color: hue, saturation and lightness map naturally to "make it darker" or "take the saturation down," and hue shifts are how color harmonies are built.

You do not have to choose forever. Use the color picker to explore any color and see it side by side as HEX, RGB and HSL, with one-click copy for whichever format your code needs. The RGB to Hex and Hex to RGB converters handle the conversions in either direction, and the color charts show the Tailwind, Material Design and web-safe palettes as ready-to-copy hex swatches.

Try it: find a color you love — say Crimson at #DC143C — open its page in the color library, and read the RGB and HSL values next to its hex code. After a dozen colors, the pattern will feel obvious.

Hex codes are one of those things that look like magic until someone explains the base-16 trick. Now you are in on it — go read some hex.