CSS Color Reference

Color reference

CSS provides various ways to specify colors, such as using color names, HEX values, RGB values, RGBA values, HSL values, and HSLA values. Here’s a reference with examples for each method:

1. Color Names

CSS has 140 color names you can use directly.

Examples:

/* Using color names */
p {
color: red; /* Red color */
}
h1 {
color: blue; /* Blue color */
}

2. HEX Values

HEX values are specified using a six-digit combination of numbers and letters, prefixed by #.

Examples:

/* Using HEX values */
p {
color: #FF5733; /* A vibrant orange color */
}

h1 {
color: #008000; /* A deep green color */
}

3. RGB Values

RGB values specify colors using the red, green, and blue components.

Examples:

/* Using RGB values */
p {
color: rgb(255, 87, 51); /* A vibrant orange color */
}
h1 {
color: rgb(0, 128, 0); /* A deep green color */
}

4. RGBA Values

RGBA values are similar to RGB but include an alpha channel for opacity. Alpha represents the transparency level of the color, ranging from 0 (completely transparent) to 1 (completely opaque).

Examples:

/* Using RGBA values */
p {
color: rgba(255, 87, 51, 0.8); /* A vibrant orange color with 80% opacity */
}
h1 {
color: rgba(0, 128, 0, 0.5); /* A deep green color with 50% opacity */
}

5. HSL Values

HSL stands for hue, saturation, and lightness.

Hue: The color itself, represented as a degree on the color wheel (0-360). For example:
0° is red
120° is green
240° is blue

Saturation: The intensity or purity of the color, ranging from 0% (a shade of gray) to 100% (full color).
Lightness: The brightness of the color, ranging from 0% (black) to 100% (white).

Examples:

/* Using HSL values */
p {
color: hsl(9, 100%, 60%); /* A vibrant orange color */
}
h1 {
color: hsl(120, 100%, 25%); /* A deep green color */
}

6. HSLA Values

HSLA values are similar to HSL but include an alpha channel for opacity. Alpha represents the transparency level of the color, ranging from 0 (completely transparent) to 1 (completely opaque).

Examples:

/* Using HSLA values */
p {
color: hsla(9, 100%, 60%, 0.8); /* A vibrant orange color with 80% opacity */
}
h1 {
color: hsla(120, 100%, 25%, 0.5); /* A deep green color with 50% opacity */
}

Example to show the color properties

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>CSS Background Color Example</title>
<style>
/* Basic Named Color */
p {
background-color: red; /* Red background */
}

/* Hexadecimal Color */
h1 {
background-color: #000000; /* Green background */
color:white;
}

/* RGB Color */
h2 {
background-color: rgb(0, 0, 255); /* Blue background */
}

/* RGBA Color with Transparency */
h3 {
background-color: rgba(0, 0, 255, 0.5); /* Semi-transparent blue background */
}

/* HSL Color */
h4 {
background-color: hsl(120, 100%, 50%); /* Green background */
}

/* HSLA Color with Transparency */
h5 {
background-color: hsla(120, 100%, 50%, 0.5); /* Semi-transparent green background */
}

</style>
</head>
<body>

<p>This paragraph has a red background (named color).</p>

<h1>This heading has a black background (hex).</h1>

<h2>This heading has a blue background (RGB).</h2>

<h3>This heading has a semi-transparent blue background (RGBA).</h3>

<h4>This heading has a green background (HSL).</h4>

<h5>This heading has a semi-transparent green background (HSLA).</h5>

</body>
</html>

CSS Background Color Example

This paragraph has a red background (named color).

This heading has a black background (hex).