CSS Colors

CSS colors are used to define the color of text, backgrounds, borders, and many other elements on a web page. CSS provides multiple ways to specify colors, giving developers great flexibility in design.

Where CSS Colors Are Used

Text color
Background color
Border color
Outline color
Box shadow and gradients

Color Names

CSS supports predefined color names such as red, blue, green, and black. Color names are easy to use but limited in variety.

Example

<!DOCTYPE html>
<html>
<body>

<p style="color: red;">Red Color</p>
<p style="color: green;">Green Color</p>
<p style="color: blue;">Blue Color</p>
<p style="color: orange;">Orange Color</p>
<p style="color: purple;">Purple Color</p>

</body>
</html>

Try this code

HEX Color Values

HEX colors are written using a hash (#) followed by six hexadecimal characters. Each pair represents the intensity of Red, Green, and Blue colors. Hex values range from 00 (minimum) to FF (maximum), which equals 0 to 255 in decimal.

HEX Format

#RRGGBB

RR = Red
GG = Green
BB = Blue

Examples


#ff0000  → Red
#00ff00  → Green
#0000ff  → Blue
#ffffff  → White
#000000  → Black

Color Mixing Example


#ff00ff  → Red + Blue = Purple
#ffff00  → Red + Green = Yellow

Example

<!DOCTYPE html>
<html>
<body>

<h3 style="color:#ff0000;">Red Color</h3>
<h3 style="color:#ff00ff;">Purple Color</h3>

</body>
</html>

Try this code

Short HEX Values (3-Digit Format)

If both digits in each pair are the same, you can use the shorter 3-digit format. Each digit is automatically doubled.

#f00  → #ff0000
#0f0  → #00ff00
#00f  → #0000ff
#fff  → #ffffff
#333  → #333333

Example

<!DOCTYPE html>
<html>
<body>

<h3 style="color:#f00;">Red Color</h3>
<h3 style="color:#f0f;">Purple Color</h3>

</body>
</html>

Try this code

RGB Color Values

RGB stands for Red, Green, and Blue. Each value ranges from 0 to 255.

Example

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color: rgb(0, 128, 255);">Hello World</h1>
<p style="background-color: rgb(0, 128, 255);">This is my first CSS page.</p>

</body>
</html>

Try this code

RGBA Color Values

RGBA colors add an alpha channel to control transparency. The alpha value ranges from 0 (transparent) to 1 (opaque).

Example

<!DOCTYPE html>
<html>
<body>

<h2 style="background-color: rgba(0, 0, 0, 0.5);">This is my first CSS page.</h2>

</body>
</html>

Try this code

HSL Color Values

HSL stands for Hue, Saturation, and Lightness. It provides a more intuitive way to control colors.

Example

<!DOCTYPE html>
<html>
<body>

<span style="color: hsl(120, 100%, 40%);">This is my first CSS page.</span>

</body>
</html>

Try this code

HSLA Color Values

HSLA is similar to HSL but includes transparency.

Example

<!DOCTYPE html>
<html>
<body>

<h2 style="background-color: hsla(200, 80%, 50%, 0.7);">This is my first CSS page.</h2>

</body>
</html>

Try this code

Background Color

The background-color property is used to set the background color of an element.

Example

<!DOCTYPE html>
<html>
<body>

<h3 style="background-color:skyblue;">SkyBlue</h3>
<h3 style="background-color:tomato;">Tomato</h3>
<h3 style="background-color:orange;">Orange</h3>
<h3 style="background-color:red;">Red</h3>

</body>
</html>

Try this code

Text Color

The color property defines the color of text.

Example

<!DOCTYPE html>
<html>
<body>

<p style="color:red;">Danish</p>
<p style="color:purple;">Danish</p>
<p style="color:yellow;">Danish</p>

</body>
</html>

Try this code

Best Practices for Using Colors

Maintain good contrast for readability
Use consistent color themes
Avoid using too many colors
Test colors for accessibility

Common Mistakes with CSS Colors

Low contrast between text and background
Overusing bright colors
Using color alone to convey meaning

Tip: Use HEX or RGB formats for better control and professional-looking designs.