CSS Colors: HEX, RGB, HSL and Opacity Explained

Colour is the quickest way to give a page personality. CSS lets you write the same colour in several ways (names, HEX codes, RGB and HSL), and each one is handy in different situations.

Choosing colours is also about readability. Text needs enough contrast against its background, links should stand out from normal text, and a small, consistent palette looks far more professional than a rainbow. This lesson covers both the syntax and the habits that make colours work.

Which CSS properties take a colour

color sets the text colour.
background-color sets the background.
border-color, outline-color and text-decoration-color colour borders, outlines and underlines.

Note the American spelling: CSS always uses color, never colour. Writing colour: red; is silently ignored.

Four ways to write a CSS colour

Format	Example	Notes
Name	`tomato`	Over 140 built-in names. Quick but limited.
HEX	`#ff6347`	Red, green and blue as pairs from 00 to ff. Common in design tools.
RGB	`rgb(255 99 71)`	Red, green and blue from 0 to 255.
HSL	`hsl(9 100% 64%)`	Hue (0 to 360 degrees on the colour wheel), saturation and lightness. The easiest to adjust by hand.

All four values above produce exactly the same orange-red. Screens mix every colour from red, green and blue light, and HEX and RGB describe those amounts directly, while HSL describes the colour the way people tend to think about it.

Short HEX codes and transparency

#fff is short for #ffffff (white), and #000 is black.
Add an alpha (opacity) value to make a colour see-through:
rgb(0 0 0 / 50%) is black at 50% opacity.
#00000080 is the same in HEX, where the last pair is the alpha.
hsl(150 70% 40% / 0.2) is a pale, transparent green.
opacity: 0.5 makes the whole element half see-through, including its text and children.

Use an alpha colour when you only want a transparent background, and opacity when you want to fade the entire element.

Colour contrast and readability

Light grey text on white can look stylish, but many people can't read it, especially on a phone in sunlight. Accessibility guidelines (WCAG) ask for a contrast ratio of at least 4.5 to 1 for normal text and 3 to 1 for large headings. Browser DevTools show the ratio when you inspect a colour.

Also avoid using colour as the only signal. A form error shown only in red is invisible to many colour-blind visitors, so add a message or an icon as well.

CSS Colors Syntax

Colour values

color: navy;
color: #1e3a8a;
color: rgb(30 58 138);
color: hsl(224 64% 33%);
background-color: rgb(30 58 138 / 20%);

CSS Colors Summary

color sets text colour and background-color sets the background.
Colours can be written as names, HEX, RGB or HSL.
Add an alpha value for transparent colours; opacity fades the whole element.
HSL makes it easy to create lighter and darker shades of one colour.
Keep text contrast at 4.5 to 1 or higher, and don't rely on colour alone.

CSS Colors Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

One colour, four ways

All four boxes are the same colour. Change the hue (the first number) in the HSL box and run.

<div class="box a">name</div>
<div class="box b">hex</div>
<div class="box c">rgb</div>
<div class="box d">hsl</div>

.box { padding: 12px; margin: 6px 0; color: white; font-family: sans-serif; border-radius: 8px; }

.a { background-color: tomato; }
.b { background-color: #ff6347; }
.c { background-color: rgb(255 99 71); }
.d { background-color: hsl(9 100% 64%); }

ResultEdit the code, then press Run or Ctrl+Enter

Line-by-line explanation

Line 1Shared styling for all boxes.
Line 3A named colour.
Line 4The HEX version: ff = red 255, 63 = green 99, 47 = blue 71.
Line 5The RGB version.
Line 6The HSL version: hue 9° on the colour wheel (orangey red).

Example 2

A palette from one hue

<div class="swatch s1">Dark</div>
<div class="swatch s2">Main</div>
<div class="swatch s3">Light</div>
<p class="note">Tinted text on a tinted background</p>

.swatch { padding: 10px; font-family: sans-serif; }
.s1 { background: hsl(150 70% 25%); color: white; }
.s2 { background: hsl(150 70% 42%); color: white; }
.s3 { background: hsl(150 70% 90%); color: hsl(150 70% 20%); }

.note {
  background: rgb(68 103 255 / 15%);
  color: #2b3ea8;
  padding: 10px;
}

ResultEdit the code, then press Run or Ctrl+Enter

Line-by-line explanation

Lines 2 to 4Same hue (150°, green), different lightness = a matching palette.
Line 7A 15% transparent blue background lets the page colour show through.

Example 3

opacity vs transparent background

<div class="wrap">
  <div class="card faded">opacity: 0.4</div>
  <div class="card alpha">rgba background</div>
</div>

.wrap { background: url("https://picsum.photos/id/1011/400/120") center/cover; padding: 12px; }
.card { padding: 12px; margin: 6px; font: bold 16px sans-serif; }

.faded { background: white; opacity: 0.4; }
.alpha { background: rgb(255 255 255 / 40%); }

ResultEdit the code, then press Run or Ctrl+Enter

Line-by-line explanation

Line 4opacity fades everything, including the text.
Line 5An alpha background fades only the background, so the text stays crisp.

Common CSS Colors Mistakes

Low-contrast text

Don't

p { color: #ccc; background: white; }

p { color: #555; background: white; }

#ccc on white has a contrast ratio of about 1.6 to 1, which is very hard to read. #555 passes at about 7 to 1.

Invalid HEX codes

Don't

h1 { color: #12345; }
h2 { color: 1e3a8a; }

h1 { color: #123456; }
h2 { color: #1e3a8a; }

HEX needs # and 3, 4, 6 or 8 digits. Anything else is ignored.

CSS Colors in Real Projects

Brand colours

Companies define a small set of brand colours and reuse them everywhere, usually stored as CSS variables like --brand: #17a865. Design tools such as Figma give you HEX codes, and HSL is popular for generating lighter and darker shades for hover states and dark mode.

CSS Colors Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Set the text to white and the background to a HEX black.

.banner {
  : white;
  background-color: ;
}

color sets text; #000 (or #000000) is black.

Multiple choiceeasy

Which value is pure red?

Multiple choicemedium

In hsl(220 80% 50%), what does 220 control?

Multiple choicemedium

You want a see-through background but solid text. What should you use?

opacity affects the whole element; an alpha colour affects only that property.

Fix the bugmedium

The alert should have a light red background (#ffe3e3) and dark red text (rgb(153 27 27)). Two values are broken.

<p class="alert">Payment failed. Please try again.</p>

.alert {
  background-color: ffe3e3;
  color: rgb(153, 27);
  padding: 10px;
}

ResultEdit the code, then press Run or Ctrl+Enter

Checks

Light red background
Dark red text

CSS Colors Quiz

4 questions to check what you learned.

Which property sets the text colour?
- text-color
- font-color
- foreground
- color
What is #fff short for?
- #f0f0f0
- #ff0000
- #ffffff
- #fff000
What does opacity: 0 do?
- Makes the element black
- Removes the element from the page
- Nothing
- Makes the element fully transparent (but it still takes up space)
What is the minimum WCAG contrast ratio for normal body text?
- 4.5:1
- 2:1
- 3:1
- 10:1

CSS Colors Challenge

Traffic lights

Give each light its colour using a different format:

.red → background red (name)
.amber → background #ffbf00 (HEX)
.green → background rgb(0 200 83) (RGB)

<div class="light red"></div>
<div class="light amber"></div>
<div class="light green"></div>
<style>:where(.light) { width: 50px; height: 50px; border-radius: 50%; margin: 6px; background: #333; }</style>

ResultEdit the code, then press Run or Ctrl+Enter

Checks

Red light is red
Amber light is #ffbf00
Green light is rgb(0 200 83)

Which CSS properties take a colour

Four ways to write a CSS colour

Short HEX codes and transparency

Colour contrast and readability

CSS Colors Syntax

CSS Colors Summary

CSS Colors Examples

Common CSS Colors Mistakes

!Low-contrast text

!Invalid HEX codes

CSS Colors in Real Projects

Brand colours

CSS Colors Exercises

CSS Colors Quiz

CSS Colors Challenge

Traffic lights

Related CSS topics

Low-contrast text

Invalid HEX codes