HEX Colors

By the end of this lesson, you will be able to write and read six-digit CSS HEX colors and use the three-digit shorthand when it is valid.

What it is

A HEX color is a hexadecimal notation for an RGB color. In CSS, the six-digit form is #RRGGBB. The first two digits set red, the next two green, and the last two blue. Hexadecimal digits are 0 through 9 and A through F. Each pair ranges from 00 to FF, which corresponds to decimal 0 to 255. For example, #0B1F3A is a dark blue because red is low, green is moderate, and blue is higher.

The shorthand form is #RGB. It works only when each pair has the same digit, because CSS expands it by duplicating each digit: #fff becomes #ffffff, and #abc becomes #aabbcc. HEX colors are case-insensitive, so #0b1f3a and #0B1F3A mean the same color. Related terms: hexadecimal, RGB channel, shorthand, opaque color.

Why it matters

• It is compact and easy to copy from design tools such as Figma, Sketch, or browser DevTools.
• It gives precise control over color without needing decimal values.
• It is widely supported in CSS properties such as color, background-color, and border-color.
• The shorthand can reduce repeated digits, making simple colors like white, black, and primary colors shorter.

Syntax or steps

1. Choose red, green, and blue values from 0 to 255.
2. Convert each value to two hexadecimal digits.
3. Write them after # as #RRGGBB.
4. If each pair is repeated, such as ff, 00, or aa, you may use #RGB.

Example

a {
  color: #0B1F3A;
}

span {
  color: #fff; /* shorthand for #ffffff */
}

Part by part:

• a and span are CSS selectors.
• color sets the text color.
• #0B1F3A is a six-digit HEX color: 0B red, 1F green, 3A blue.
• #fff is shorthand. CSS expands it to #ffffff, which is white.

Common mistakes

• Using shorthand when the pairs are not repeated. #ff0 is valid shorthand for #ffff00, but #ff00 is not shorthand for red.
• Forgetting that #000 is black and #fff is white, not the other way around.
• Writing too few or too many digits. For this lesson, valid opaque forms are three or six digits after #.
• Confusing opaque HEX colors with alpha HEX forms. This lesson focuses on #RGB and #RRGGBB.

When to use it

HEX is best when you need a compact, exact opaque color. Use rgb() when you prefer decimal values or need to calculate channels. Use rgba() when transparency is needed, and hsl() when hue-based adjustments are clearer.

Practice

Guided exercise: Convert rgb(255, 0, 128) to HEX. Red is ff, green is 00, blue is 80, so the answer is #ff0080.

Challenge: Write the shortest valid shorthand for #00ff00. Expected output: #0f0. Hint: each pair is repeated.

Quick check

Question: What six-digit color does #abc represent?

Answer: #aabbcc.

Summary

HEX colors encode red, green, and blue as hexadecimal pairs. Six-digit notation is always explicit, while three-digit shorthand only works when each pair repeats. Use HEX for compact, precise opaque colors in CSS.