html
/

CSS Colors

Last Sync: Today

On this page

13
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

html

CSS Colors

What are CSS Colors?

CSS colors are used to define the color of text, backgrounds, borders, and other elements in a webpage.

Color Property Example

CSSRead-only
1
p {
  color: blue;
}

Named Colors

CSSRead-only
1
h1 {
  color: red;
}

HEX Colors

CSSRead-only
1
p {
  color: #ff0000;
}

RGB Colors

CSSRead-only
1
p {
  color: rgb(255, 0, 0);
}

RGBA (With Opacity)

CSSRead-only
1
p {
  color: rgba(255, 0, 0, 0.5);
}

HSL Colors

CSSRead-only
1
p {
  color: hsl(0, 100%, 50%);
}

HSLA Colors

CSSRead-only
1
p {
  color: hsla(0, 100%, 50%, 0.5);
}

Background Color

CSSRead-only
1
div {
  background-color: lightblue;
}

Color Formats Comparison

FormatExample
Namedred
HEX#ff0000
RGBrgb(255,0,0)
RGBArgba(255,0,0,0.5)
HSLhsl(0,100%,50%)

Best Practices

  • Use HEX or RGB for consistency
  • Use RGBA/HSLA for transparency
  • Maintain color contrast for accessibility
  • Use variables for reusable colors

Common Mistakes

  • Low contrast colors affecting readability
  • Mixing too many color formats unnecessarily
  • Using hard-coded colors everywhere
  • Ignoring accessibility guidelines

Conclusion

CSS provides multiple ways to define colors. Choosing the right format improves design consistency and user experience.

Try it yourself

p {
  color: #ff0000;
}

div {
  background-color: rgba(0,0,255,0.3);
}

Test Your Knowledge

Q1
of 3

Which format includes opacity?

A
HEX
B
RGB
C
RGBA
D
Named
Q2
of 3

What does #ff0000 represent?

A
Blue
B
Green
C
Red
D
Black
Q3
of 3

Which function uses hue?

A
rgb()
B
hsl()
C
hex()
D
color()

Frequently Asked Questions

What is HEX color?

A 6-digit code representing RGB values.

What is RGBA?

RGB with alpha (opacity) value.

Which format is best?

Depends on use case, HEX and RGB are most common.

Previous

css comments

Next

css units

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.