The Ultimate Guide to CSS Colors

CSS Color

The CSS color property specifies the foreground color for an HTML text element.?

Example -

h1 {
	color: red;
}        

CSS Background Color?

The CSS background-color property sets the background color of an element.

Example -

h1 {
	background-color: yellow;
}        

Color Values

CSS provides several methods for specifying colors, such as built-in color names, hexadecimal RGB color notations, RGB color functions, HSL color functions, etc.

CSS Built-in Color Names

The Built-in Color Names or Color Keywords are predefined Color Names.?

Primary Colors: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

Extended Colors: chocolate, cyan, darkblue, darkorange, lightgray, lightgreen, magenta, etc.

Example -

h1 {
	color: blue; /* blue is the built-in color name */
}        

CSS Hexadecimal RGB Color Notations

In CSS, the Color property supports hexadecimal RGB color values.

RGB Color Notations: #RRGGBB / #RGB (R - Red, G - Green, and B - Blue)

Example -?

h1 {
	color: #0000FF; /* Hex RGB notations for color blue */
}        

CSS rgb() Color Function?

The rgb() function defines colors using the RGB model.

Syntax: rgb(red, green, blue);

Each parameter defines the intensity of the color and can be a decimal value between 0 to 255 or a percentage value from 0 to 100.

Note: 255 is the decimal value for the Hexadecimal number FF.

Example -

h1 {
    color: rgb(255, 0, 0); /* Red Color */
}        

Equivalent to:

h1 {
    color: rgb(100%, 0, 0); /* Red Color */
}        

CSS rgba() Color Function

The CSS rgba() function defines colors using the RGBA model.

The RGBA Color is an extension of the RGB Color Model with an Alpha Channel that specifies the Opacity or Transparency of the color.

Syntax: rgba(red, green, blue, alpha);

The CSS rgba() function is widely used as a background color for an HTML element.

Example -

h1 {
    color: blue;
    background-color: rgba(255, 0, 0, 0.5);
}        

CSS hsl() Color Function

The hsl() function defines colors using the HSL model.

Syntax: hsl(hue, saturation, lightness);

Hue

Hue is a degree on the color wheel from 0 to 360. 0 or 360 is red, 120 is green, and 240 is blue.

Saturation

Saturation can be described as the intensity of a color. It is a percentage value from 0% to 100%.

100% is full color.

50% is gray, you can still see the color.

0% is black, you can't see the color.

Lightness

The lightness of a color can be described as how much light you provide to the color, where 0% means no light, 50% means medium light, and 100% means full light.

Example -

h1 {
    background-color: hsl(120, 50%, 75%);
}        

CSS hsla() Color Function

The hsla() function defines colors using the HSLA model.

Syntax: hsl(hue, saturation, lightness, alpha);

Alpha

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (no transparent at all).

Example -

h1 {
    background-color: hsla(120, 50%, 75%, 0.5);
}        

CSS Text Selection Color

In CSS, the ::selection selector allows you to style selected text.

Example -

::selection {
    color: yellow;
    background: black;
}        

CSS Scrollbar Color

The CSS scrollbar-color property sets the color of the scrollbar track and thumb.

Example -

.custom-scroll {
    scrollbar-color: darkblue lightblue;
}