Colors in CSS: An Overview

Ahh, colors :)

They're everywhere.

In CSS, several properties define colors for different parts of your web page: backgrounds, borders, outlines, text, and much more.

These properties have values, which can be defined using various types of color codes and functions.

We'll go over all that in this article.

CSS Color Properties

color

The color property specifies the text color of an element.

h1 {
  color: blue;
}

background-color

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

Let's say we wanted to give the heading above an orange background.

h1 {
  color: blue;
  /* give the heading an orange background */
  background-color: orange;
}

border-color

This property defines the color of the border of an element.

Let's give the heading a 2px solid border first.

h1 {
  color: blue;
  background-color: orange;
  /* give the heading a 2px solid border */
  border-width: 2px;
  border-style: solid;
}

Now we can specify the color of the border. Let's make it green.

h1 {
  color: blue;
  background-color: orange;
  border-width: 2px;
  border-style: solid;
  /* set the border color as green */
  border-color: green;
}

box-shadow

When you apply a shadow to an element, you have to also specify the color of the shadow.

h1 {
  color: blue;
  background-color: orange;
  border-width: 2px;
  border-style: solid;
  border-color: green;
  /* apply a black shadow to the heading */
  box-shadow: 0px 0px 10px 2px black;
}

text-shadow

Just like box-shadow, text-shadow also needs a color specified.

h1 {
  color: blue;
  background-color: orange;
  border-width: 2px;
  border-style: solid;
  border-color: green;
  box-shadow: 0px 0px 10px 2px black;
  /* apply a brown text shadow */
  text-shadow: 1px 1px 2px brown;
}

outline-color

This property sets the color of an element's outline when it's in a focused state.

Outlines apply to focusable elements such as input fields and buttons.

Let's add an input field and give it a 2px outline with a red color.

h1 {
  color: blue;
  background-color: orange;
  border-width: 2px;
  border-style: solid;
  border-color: green;
  box-shadow: 0px 0px 10px 2px black;
  text-shadow: 1px 1px 2px brown;
  /* add an outline */
  outline-width: 2px;
  outline-style: solid;
  outline-color: red;
}

That's it for the color properties.

CSS Color Values

While we were going over the CSS properties, we used different values to define the different colors, such as blue, orange, red, green and black.

Those color values are known as named colors.

There are other ways to specify color values such as HEX code, RGB, RGBA, HSL, and HSLA.

Named Colors

CSS allows us to define colors using their actual names, such as red, brown, black, white, and so on.

color: red;

Hexadecimal Colors

Also known as HEX colors, hexadecimal colors are defined using hexadecimal code. This code uses a combination of characters from 0-9, and a-f, preceded by a hashtag (#).

0 represents the least value, and f represents the highest value.

background-color: #f00;

HEX colors can be written in three characters, each representing red, green and blue respectively.

The HEX code above represents a value with the highest value of red, and the lowest values for green and blue.

An extra character represents the opacity of the color.

HEX colors can also be written in six characters, two each representing red, green and blue.

In this case, adding two extra characters will represent the opacity.

Red color with full opacity will look something like this:

With reduced opacity, it becomes partly see-through and looks like this:

RGB Colors

Colors in CSS can also be represented using color functions, namely: rgb(), rgba(), hsl(), and hsla().

RGB stands for Red-Green-Blue.

The rgb() color function takes three parameters, each representing the amount of red, green and blue in the color. The values are then mixed to come up with the final color.

The range of values for each of red, green, and blue is 0 to 255.

A purely red color will be represented as rgb(255, 0, 0).

Purely green will be rgb(0, 255, 0).

Purely blue will be rgb(0, 0, 255).

background-color: rgb(255, 0, 0); /* red color */

RGBA Colors

Similar to RGB, RGBA includes an additional "alpha" parameter for transparency. The alpha value ranges from 0 (fully transparent) to 1 (fully opaque). For example:

background-color: rgba(0, 128, 0, 0.5); /* semi-transparent green */

Thus, we can specify the opacity of an rgb() color using rgba().

HSL Colors

HSL stands for Hue-Saturation-Lightness.

The value for hue ranges from 0 to 360.

The values for saturation and lightness both range from 0% to 100%.

For example:

background-color: hsl(120, 100%, 50%); /* bright green */

HSLA Colors

Just as rgba() adds an alpha parameter to rgb() for transparency, hsla() also adds the alpha parameter to hsl() for transparency.

background-color: hsla(240, 100%, 50%, 0.5); /* semi-transparent blue */

Parting Words

I decided to write about colors in CSS because a student of mine was struggling with the concept.

Hopefully, this helps not just them, but anyone else struggling to understand colors in CSS.

Thank you for reading. Have a good one!