CSS Color Names

CSS Color Names

CSS allows you to define colors using color names, HEX, RGB, HSL, and other formats. This guide covers CSS color names—predefined colors that you can use directly.

1. Basic Usage

You can use color names in CSS like this:

div {
  color: red; /* Text color */
  background-color: lightblue; /* Background color */
  border: 2px solid green; /* Border color */
}

✅ No need for HEX or RGB codes—just use the color name!

2. Full List of CSS Color Names

CSS provides 140+ named colors. Here are the most common ones:

A. Basic Colors

Color Name	Example
red	🔴
blue	🔵
green	🟢
yellow	🟡
black	⚫
white	⚪
gray	⚫
purple	🟣
orange	🟠
pink	💗
brown	🟤

Example:

h1 {
  color: blue;
}

✅ The text will appear in blue.

B. Light & Dark Variants

Light Colors	Dark Colors
lightgray	darkgray
lightblue	darkblue
lightgreen	darkgreen
lightcoral	darkred
lightsalmon	darksalmon

p {
  background-color: lightcoral;
}

✅ Sets the background color to light coral.

C. Web-Safe Colors

Some colors are widely supported on all devices:

Color Name	Example
aqua	🟦
fuchsia	💜
lime	🟢
maroon	🍷
navy	🔷
olive	🫒
teal	🌊

3. Special Colors

Color	Description
transparent	Fully invisible (no color).
currentColor	Inherits the current text color.
inherit	Takes the color from the parent element.

button {
  color: inherit;
}

✅ The button text color will match its parent element.

4. How to Find More Colors?

🔹 Use color pickers or tools like:

• Google Color Picker
• CSS Named Colors List

5. Browser Support

✅ Works in all modern browsers.