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
, andyellow
.
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
0
and9
- Letters between
A
andF
(ora
andf
)
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 thecolor
property. If thecurrentColor
keyword is set on thecolor
property itself, it is treated ascolor: 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.gbackground-color: red;
- Change the paragraph (
p
) text color. e.gcolor: 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.