CSS colors

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 and CSS specificity. If you are still not comfortable reading the specification you should go back and read these articles.

Kindly note that All screenshots are from Firefox 70 web browser and its Developer Tools.

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

Colors are part of CSS2.1 Specification specifically chapter fourteen, 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:

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.

<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>

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.

Now let's change the h1 color to red.

h1 {
  color: red;
}

Save and refresh your browser.

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:

div {
  color: #1560bd
}

Save and refresh your browser.

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 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).

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 0and 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:

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

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

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

h1 {
 color: #ce2029;
}

Save and refresh your browser.

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

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

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

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.

You can also visit the section "HSL examples" in the specification to see the colors and their corresponding angles.

Let's take some code examples.

Update your paragraph CSS rule to match the following:

/*
 * 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.

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.

/*
 * 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.

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.

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

The currentColor color keyword

From CSS Color Module Level 3:

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:

div {
  color: #1560bd;
}

p {
  /*this is equivalent to color: inherit;*/
  color: currentColor;
}

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:

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

TIP

You can click on the multi-colored circle beside the color of an element in the Developer Tools to reveal the color picker

You can also change the color values in the Developer Tools by Holding the Shift key on your keyboard and clicking the colored circle.

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.

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.

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.