CSS Colors

In this chapter, we will introduce you to colors in CSS, a significant fundamental of web development.

CSS provides several ways to define colors, including color names, hexadecimal (hex) values, RGB/RGBA, HSL/HSLa values.

Let's explore each option so you can use them in your projects.

Before we dive in, we have the following properties we can apply colors to:

• color: Which applies color to your text.
• background-color: Applies background color to an element.
• border-color: Applies color to the border of an element.

CSS Color Names

We've used color names in many of our examples and not really mentioned much about them. CSS has over 140 predefined color names that you can use directly in your styles. These color names are easy to remember and use for basic styling needs.

Here are some examples of CSS color names:

.element1 {
  background-color: red;
}

.element2 {
  color: blue;
}

.element3 {
  border-color: green;
}

Commonly used color names include:

• red
• blue
• green
• yellow
• purple
• pink
• orange
• brown
• black
• white
• gray

You can find a complete list of color names here.

RGB and RGBA Values

RGB (Red, Green, Blue) values define colors using the RGB color model. Each color is specified using three numbers between 0 and 255, representing the intensity of red, green, and blue, respectively.

Here are some examples of RGB values:

.element1 {
  background-color: rgb(255, 0, 0); /* Red */
}

.element2 {
  color: rgb(0, 0, 255); /* Blue */
}

.element3 {
  border-style: solid;
  border-width: 5px;
  border-color: rgb(0, 255, 0); /* Green */
}

By mixing these intensities you can create any color you could need.

RGBA is an extension of RGB that includes an "alpha" channel, which controls the opacity of the color. The alpha value ranges from 0 (completely transparent) to 1 (completely opaque).

Here are some examples of RGBA values:

.element1 {
  background-color: rgba(255, 0, 0, 0.5); /* Red */
}

.element2 {
  color: rgba(0, 0, 255, 0.7); /* Blue */
}

.element3 {
  border-style: solid;
  border-width: 5px;
  border-color: rgba(0, 255, 0, 0.3); /* Green */
}

This is the same as before, but now with the alpha values:

Hexadecimal (Hex) Values

Hexadecimal (hex) values are one of the most common ways to define colors in CSS. They are a compact way of representing RGB (Red, Green, Blue) colors using a six-digit code. Each pair of digits represents the intensity of one of the primary colors: red, green, and blue.

How Hex Values Work

A hex color code is always prefixed with a # followed by six hexadecimal digits. The digits are grouped into pairs, where each pair represents one of the three primary colors:

• The first two digits represent the red component.
• The next two digits represent the green component.
• The last two digits represent the blue component.

Hexadecimal digits range from 0 to F, where:

• 0 is the lowest value (0 in decimal).
• F is the highest value (15 in decimal).

The hex color code #000000 represents black because all three color components (red, green, and blue) are set to the lowest value (00 in hex). Conversely, #FFFFFF represents white because all three color components are set to the highest value (FF in hex).

Let's break down the hex color #34A853:

• # indicates that this is a hex color code.
• 34 is the red component.
  • 3 in hex is 3 in decimal.
  • 4 in hex is 4 in decimal.
  • Together, 34 in hex is 52 in decimal.
• A8 is the green component.
  • A in hex is 10 in decimal.
  • 8 in hex is 8 in decimal.
  • Together, A8 in hex is 168 in decimal.
• 53 is the blue component.
  • 5 in hex is 5 in decimal.
  • 3 in hex is 3 in decimal.
  • Together, 53 in hex is 83 in decimal.

So, #34A853 corresponds to an RGB value of rgb(52, 168, 83).

.element1 {
  background-color: #FF5733; /* Bright orange */
}

.element2 {
  color: #2980B9; /* Medium blue */
}

.element3 {
  border-color: #27AE60; /* Emerald green */
}

Shorthand Hex Values

If each pair of digits in a hex value is identical, you can use a shorthand notation by writing just one digit per pair. For example, #AABBCC can be abbreviated to #ABC.

Here are some examples of abbreviated hex values:

.element1 {
  background-color: #BBB; /* Grey, shorthand for #BBBBBB */
}

.element2 {
  background-color: #000; /* Black, shorthand for #000000 */
}

.element3 {
  background-color: #F00; /* Red, shorthand for #FF0000 */
}

Understanding CSS colors is essential. Each method has advantages and can be used depending on your specific needs.

Practice using these different methods to become comfortable defining and applying colors in your CSS. It might look a bit alien at first, but with time, like all of these skills, it'll start to become intuitive.