CSS Colors: Named, HEX, RGB and HSL

CSS colors can be written as named colors, HEX codes, RGB or HSL values. This lesson explains every format, transparency, and how to choose readable color contrast.

color and background-color

Two properties do most of the color work in CSS:

• color sets the text color.
• background-color sets the color behind the element.

<div class="notice">Your order has been shipped!</div>

.notice {
  color: #1b5e20;
  background-color: #e8f5e9;
  padding: 16px;
}

You will see a light green box with dark green text. Using a light and dark version of the same color is a simple trick that always looks clean.

Named colors

CSS has around 150 named colors, like red, navy, tomato, gold and rebeccapurple. They are easy to remember and perfect for testing.

h1 { color: tomato; }
body { background-color: whitesmoke; }

The problem is that you only get those 150 choices. Real designs usually need an exact shade, so you will use the other formats below.

HEX colors

A HEX code starts with # followed by six characters, using the numbers 0–9 and the letters a–f. The six characters are three pairs: red, green and blue.

#  ff  80  00
   |   |   |
  red green blue      (00 = none, ff = full)

• #000000 is black (no light at all).
• #ffffff is white (all colors at full).
• #ff0000 is pure red.
• #ff8000 is orange.

There is also a short form with three characters: #f80 means the same as #ff8800. HEX is the most common format you'll see, because design tools like Figma show colors in HEX.

RGB and HSL colors

RGB describes a color with three numbers from 0 to 255, for red, green and blue light. It's like mixing three flashlights. Modern CSS separates the numbers with spaces: rgb(30 136 229) is a bright blue. You will also see the older comma style, rgb(30, 136, 229), which still works everywhere.

HSL stands for hue, saturation and lightness. Many people find it the easiest format to understand.

• Hue is the position on a color wheel, from 0 to 360 degrees. 0 is red, 120 is green, 240 is blue.
• Saturation is how strong the color is. 0% is gray, 100% is full color.
• Lightness is how light it is. 0% is black, 50% is normal, 100% is white.

<a class="btn" href="/checkout">Go to checkout</a>

.btn {
  display: inline-block;
  padding: 12px 20px;
  color: rgb(255 255 255);
  background-color: hsl(210 80% 45%);   /* blue */
  text-decoration: none;
}

.btn:hover {
  background-color: hsl(210 80% 35%);   /* same blue, darker */
}

You will see a blue button with white text that turns darker blue when your mouse is over it. The big advantage of HSL: to make a darker or lighter version of a color, you only change the last number. Doing that with HEX is much harder.

Transparency: alpha, rgba and opacity

You can make a color see-through by adding an alpha value. Alpha goes from 0 (fully transparent) to 1 (fully solid). Write it after a slash.

.overlay {
  background-color: rgb(0 0 0 / 0.5);       /* black, 50% see-through */
}

.badge {
  background-color: hsl(210 80% 45% / 0.2); /* light blue tint */
}

The older functions rgba() and hsla() do the same thing, for example rgba(0, 0, 0, 0.5). HEX can also have alpha, using eight characters: #00000080.

The opacity property is different. It makes the whole element transparent, including its text, images and children.

.card-a { background-color: rgb(0 0 0 / 0.5); color: white; }  /* only the background fades */
.card-b { background-color: black; color: white; opacity: 0.5; } /* everything fades, text too */

Common mistake: Using opacity to fade a background and then wondering why the text is also faded. If you only want a see-through background, use a color with alpha instead.

How to choose readable color contrast

Contrast is the difference between the text color and the background color. Low contrast, like light gray text on white, is hard to read, especially for people with poor eyesight or on a phone in the sun.

The WCAG accessibility guidelines ask for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. You don't need to calculate this yourself: in Chrome, Edge or Firefox DevTools, click a color swatch in the Styles panel to see its contrast ratio.

Tip: Dark text on a light background is the safest choice for long text. Use #222 or #333 instead of pure black for a softer look that is still very readable.

Practice exercise

Create an alert box that says "Payment failed. Please try again." Give it a light red background and dark red text, written in HSL. Then add a second box with a semi-transparent black background on top of a page with a colorful body background.

Hint: try hsl(0 70% 95%) for the light red and hsl(0 70% 30%) for the dark red text. For the second box, use rgb(0 0 0 / 0.6) and white text.

Frequently asked questions

Which CSS color format should I use?

Any of them is fine. HEX is very common because design tools use it. HSL is easiest when you need lighter and darker shades. Pick one and be consistent.

What is the difference between rgb() and rgba()?

Today, nothing important. rgb() accepts an alpha value too, like rgb(0 0 0 / 0.5). rgba() is the older name and still works.

Are CSS color names case-sensitive?

No. Red, RED and red all work, and so do #FF0000 and #ff0000. Most developers write them in lowercase.

Key takeaways

• color sets text color; background-color sets the color behind an element.
• Colors can be named, HEX (#ff8000), RGB (rgb(255 128 0)) or HSL (hsl(30 100% 50%)).
• Add alpha for transparency: rgb(0 0 0 / 0.5).
• opacity fades the whole element, including text.
• Always check that text has enough contrast with its background.