CSS colors
Tags: beginners, css, colors
Published: 2019-11-11 21:42:13

---
title: CSS colors
published: true
description: A beginners introduction to CSS colors
tags: beginners, css, colors
series: FrontEnd Development Zero to Hero
---

Colors are everywhere, in our homes, offices, immediate environment and in nature. They can be in variety of patterns that can leave you stunned and you just wonder "How can this be?". 

Colors can tell you the origin of an object or someone and some colors represent the identity of a country or a group of people. 

CSS has a handful of properties that allows the addition of colors to varying page elements from borders, backgrounds, headers just to name a few. In this post we will be taking a tour on how to use some of these properties in your web documents.

We'll make use of the CSS specification(s), and i believe that if you've followed this series up to this point, you should be comfortable reading the specification. The specification was used to explain [CSS units](https://dev.to/ziizium/css-units-2bh1) and [CSS specificity](https://dev.to/ziizium/css-specificity-ilk). If you are still not comfortable reading the specification you should go back and read these articles.

_Kindly note that All screenshots are from <b>Firefox 70</b> web browser and its Developer Tools._

With that out of the way. Let's start.

<hr>

Colors are part of [CSS2.1 Specification specifically chapter fourteen](https://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#q14.0), but due to the modular nature of CSS3, different specifications now exist for colors these include CSS Color Module Level 3, CSS Color Module Level 4 and CSS Color Module Level 5.

From [chapter fourteen of CSS2.1 specification](https://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#q14.0):

> CSS properties allow authors to specify the foreground color and background of an element ...

Foreground color in this  particular  context is the color that the browser will use to render a page element text content when the document loads in the browser or in response to a user action e.g mouse hover. The CSS `color` property is used to achieve this.

Let's see some examples.

_Save the snippets with the `.html` and `.css` extensions and remember all HTML snippets will be in the `body` tag_.

```html
<div class="parent">
  <h1>HEADER</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.</p>
</div>
```
```css
p {
 font-size: 2em; /* set this font size to 2em which will compute to 32px; */
 color: green;   /* set the paragraph color to green */
}
```
Load the file in your browser. The paragraph color will be the green color we specified in our CSS.

![A paragraph text with the green color](https://thepracticaldev.s3.amazonaws.com/i/1i2ufjillb7d2op9ymy4.PNG)

Now let's change the `h1` color to red.

```css
h1 {
  color: red;
}
```

Save and refresh your browser.

![A red header text](https://thepracticaldev.s3.amazonaws.com/i/p7bnp5cjurkntnh8nnjs.PNG)

You can also declare the `color` property on a parent element and __it will be inherited by the child elements__.

__Delete__ the `p` and `h1` CSS rules then add the following:

```css
div {
  color: #1560bd
}
```

Save and refresh your browser. 

![A blue text](https://thepracticaldev.s3.amazonaws.com/i/d37y16ulgzyb6qlp4jqx.PNG)

If you've observed from the CSS snippets we've used so far you'll notice that the `color` values have been specified using:

* A color keyword e.g `green`
* Combination of numbers, letters and symbols e.g `#1560bd`.

There are other values that can be used, lets discuss them.

###__CSS COLOR VALUES__
CSS color values can be in the following format:

* Color keyword
* Numerical color values

###__Color keyword__

The [CSS Color Module 3 specification](https://drafts.csswg.org/css-color-3/#colorunits) list the basic color keyword as:

>`aqua`, `black`, `blue`, `fuchsia`, `gray`, `green`, `lime`, `maroon`, `navy`, `olive`, `purple`, `red`, `silver`, `teal`, `white`, and `yellow`.

The color names are case-insensitive. Which means `red` is equivalent to `RED`.

You can get more color keywords using the browser _Developer Tools_ by following the steps below:

* Specify the color for the element in your CSS using a keyword e.g `lime`
* Use "Inspect Element" on the element.
* Under the __Rules__ tab, click on the color name
* The browser will highlight it, __delete it__ and type the first letter of a color in _small case_
* The browser will show you all colors that start with that letter

I performed this same steps and typed letter `l` (_el_) and the browser showed the list of colors starting with `l` (_el_).

![The browser showing a list of colors in the Developer Tools](https://thepracticaldev.s3.amazonaws.com/i/f1pkncx2oxre0u8lsh21.PNG)

###__Numerical color values__
The numerical color values can be in the following format:

* RGB
* RGBA
* HSL
* HSLA

###__RGB__
RGB stands for __Red__ __Green__ __Blue__ and you can specify colors in this format using the `rgb()` function or Hexadecimal notation.

The `rgb()` function accepts three comma separated values, each value is the amount of `red`, `blue` and `green`  you want to apply and these values can be in decimal in the range of `0`  to `255` or percentage values between  `0%` and `100%`.

The hexadecimal notation is a `#`(called a Hash or Pound) symbol immediately followed by either __three__ or __six__ hexadecimal characters.

Hexadecimal characters are:

* Numbers between `0 `and `9`
* Letters between `A` and `F` (or `a` and `f`)

When you specify  color using _three_ hexadecimal notation e.g `#fff` it will converted to _six-digit_ form by digit replication. So `#fff` will become `#ffffff`. Other examples include:

* `#ddd` will be converted to `#dddddd`
* `#ccc` will be converted to `#cccccc`
* `#000` will be converted to `#000000`

But it's quite common to specify _six digit_ hexadecimal color in _three digits_ if the _six digit_ has a set of repeated values like the examples given above. More examples include:

* `#cc6666` can be written as `#c66`
* `#ff77ff` can be written as `#f7f`
* `#b22222` can be written as `#b22`

Let's demonstrate with some code.

__Delete__ any declaration you might have in your CSS then add the following:

```css
p {
 color: rgb(157, 100, 123);
}
```

Save and refresh your file, the paragraph's (`p`) color should change to a variation of `purple`

![A purple text](https://thepracticaldev.s3.amazonaws.com/i/f38jwrflgfiq566w6pb8.PNG)

__Delete__ any declaration you might have in your `h1` then add the following hexadecimal color:

```css
h1 {
 color: #ce2029;
}
```

Save and refresh your browser.

![A red text](https://thepracticaldev.s3.amazonaws.com/i/pf5bm6ff0jllm3cwi7tz.PNG)

###__RGBA__
This stands for __Red__, __Green__ __Blue__ __Alpha__. The `alpha` allow specification of the opacity of a color which is how visible the text will be on a web page.

Let's take some examples.

__Delete__ the property declaration in the paragraph (`p`) then add the following

```css
p {
 color: rgba(157, 100, 123, 0.2);
}
```

Save and refresh. The text will be unreadable due to the the alpha value.

![Unreadable text](https://thepracticaldev.s3.amazonaws.com/i/fzsvxrxqwz6fi6owpevp.PNG)

Unlike RGB values, there is __no hexadecimal notation__ for an RGBA value.

###__HSL__
HSL stands for __Hue__ __Saturation__ and __Lightness__  and its was introduced in CSS3.

Hue is represented as an angle of the color circle and measured in degrees while saturation and lightness are represented as percentages.

These colors are spread around the circle so:

* _red_  = _0_ = _360_
* _green_ = _120_
* _blue_ = _240_

As an angle, it implicitly wraps around such that:

* _-120_ = _240 (360  - 120)_
* _480_ = _120 (360 + 120)_

Check out the image below.

![HSL Color wheel](https://thepracticaldev.s3.amazonaws.com/i/uxrd657gdtbj4tzyopd6.png)

You can also visit the section ["HSL examples" in the specification](https://drafts.csswg.org/css-color-3/#hsl-examples) to see the colors and their corresponding angles.

Let's take some code examples.

Update your paragraph CSS rule to match the following:

```css
/*
 * 120 is for green, the saturation and lightness value will change this color
 * to a variation of green
*/

p {
 color: hsl(120, 100%, 25%);
}
```

Save and refresh your file.

![A green text](https://thepracticaldev.s3.amazonaws.com/i/e912t4ejvqigunij3707.PNG)

###__HSLA__
Just as the `rgb()` functional notation has the `rgba()` alpha counterpart, the `hsl()` functional notation has the `hsla()` alpha counterpart. HSLA stands for __Hue__ __Saturation__ __Lightness__ __Alpha__.

```css
/*
 * 240 is for blue, the saturation and lightness value will change this color
 * to a variation of blue, and the alpha value will make it semi-transparent
 * solid blue
*/
p {
 color: hsla(240, 100%, 50%, 0.5);
}
```

Save your file and refresh your browser.

![a blue text](https://thepracticaldev.s3.amazonaws.com/i/m9e7wscm7leetsbamxiq.PNG)

<hr>

There are two other color value that you should be aware of they are:

* `transparent`
* `currentColor` 

###__The `trsansparent` color keyword__
The `transparent`  value introduced in CSS1 for the `background-color` property. CSS2 allowed `border-color` to accept the `transparent` value. 

CSS3 extends the `color` value to include the `transparent` keyword to allow its use with all properties that accept a `color` value.

If you specify the color of any page element as `transparent`, it will invisible on screen.

```css
p {
  color: transparent; /* This will make the paragraph invisible */
}
```

###__The `currentColor`  color keyword__
From [CSS Color Module Level 3](https://drafts.csswg.org/css-color-3/#currentcolor):

> The used value of the `currentColor` keyword is the computed value of the `color` property. If the `currentColor` keyword is set on the `color` property itself, it is treated as `color: inherit`. 

Giving the following CSS:

```css
div {
  color: #1560bd;
}

p {
  /*this is equivalent to color: inherit;*/
  color: currentColor;
}
```
<hr>

I mentioned earlier that (take note of the emphasis):

> Foreground color in this  particular  context is the color that the browser will use to render a page element text content when the document loads in the browser __or in response to a user action e.g mouse hover__

Let's demonstrate the emphasized part of the sentence.

__Delete__ the previous CSS rule for the paragraph and update with the following code:
 
```css
p {
  color: #1560bd;
}

p:hover {
  color: #ce2029;
}
```

Save and refresh your browser. 

Hover your mouse over the text, and its color will change.

You can also replicate the `:hover` behavior using the browser _Developer Tools_.  

* _Right click_ on the paragraph (the `p` element) in the _Developer Tools_
* Click on _Change Pseudo-class_
* Click on _hover_

![A context menu in Firefox Developer tools](https://thepracticaldev.s3.amazonaws.com/i/7dj8g5grlas5winzogcm.PNG)

<hr>

###__TIP__

You can click on the _multi-colored circle_ beside the `color` of an element in the _Developer Tools_ to reveal the color picker

![The color in the firefox devtools](https://thepracticaldev.s3.amazonaws.com/i/ywxs24h3vz84zpla0tty.PNG)

You can also change the color values in the _Developer Tools_ by Holding the `Shift` key on your keyboard and clicking the _colored circle_.

<hr>

You should be careful of your color combinations. Why? _Accessibility_. 

Web  Accessibility is still  a topic of its own in this series, but let's discuss accessibility in regards to colors.

###__COLORS AND ACCESSIBILITY__
The combination you use for your text and background can make it easy or difficult for your users to read your web document.

The browser _Developer Tools_ has a _useful feature_ that will let you know if your text is accessible.

To demonstrate this, perform the following:

* Add a background color to your `body` element in your CSS e.g `background-color: red;`
* Change the paragraph (`p`) text color. e.g `color: orange;`
* Save your file and refresh your browser
* Use "Inspect Element" on the paragraph text
* Click on the _colored circle_. This should show the _Color Picker_

You will notice the __Contrast__ value and a  _red exclamation mark_ at the bottom part of the _Color Picker_.  If you hover your mouse over this, an information will show indicating that the text: "_Does not meet WCAG standard for accessible text_". Which means our text will be difficult to read.

![Inaccessible text](https://thepracticaldev.s3.amazonaws.com/i/el4nac3bwmh7nm3gpypt.PNG)

You can fix this by manually dragging the _multi-colored slider_ and clicking across the _Color spectrum_ (the square area) until the _exclamation mark_ changes to a _green checked mark_ then you can copy the color value and paste in your CSS.

![A text color marked as accessible](https://thepracticaldev.s3.amazonaws.com/i/clg9iiu4o4tv8s7mzn9n.PNG)

This is just an introduction to accessible text, we will cover accessibility in-depth under the topic _Web Accessibility and Usability_.

We made mention of background and the `background-color` property to raise awareness about accessible text  but there is more to backgrounds than changing their color.

This is will discussed in the next topic _CSS Backgrounds_.