Learn CSS 2.2: Color Notation
Last time
Last time we learned:
-
The
<div>and<span>tags as generic tags to aid styling -
The
<style>tag to enclose a CSS stylesheet -
A basic CSS stylesheet
We made a CSS stylesheet which was as follows:
p {
color: orange;
}But what if you want more than simple colors? What if you want a precise shade of green, or purple, or blue?
Luckily, there are actually seven-ish ways to denote colors in CSS. Let's look at them, one by one, shall we?
Built-in colors
p {
color: orange;
}CSS has 140 built-in colors (listed here) for you to use. These include the primary and secondary colors, several grays, and several variations.
The HSL (HSV) color model
p {
color: hsl(32, 90%, 60%);
}A lot of drawing apps use the HSL color model, which uses values for "hue", the exact color you want, "saturation", the amount of color or greyness of the color, and "lightness" or how bright the color should be.
In CSS, hue is expressed as a quantity between 0 and 360 (corresponding to degrees from red on the color wheel) while saturation and lightness are expressed in percent. All is formatted as hsl(0-360, 0%-100%, 0%-100%)
The HSLA color model
p {
color: hsla(32, 90%, 60%, 0.7);
}To make HSL colors transparent, change to HSLA and add the opacity value (a decimal) to the end.
The RGB color model
p {
color: rgb(255,128,0);
}Computer screens work by displaying tiny red, green, and blue lights at just the right intensities to create the illusion of color. Red, green, and blue are used instead of red, yellow, and blue because of how the eye works; we have red, green, and blue photoreceptors in our eyes.
Because computers work in a binary system, it is most convenient to express the amount of red, green, and blue in a program as amounts between 0-255, since 255 is 2⁸-1. You'll need three of these numbers: the first is red, then green. then blue. Enclose them in parentheses preceded by "rgb" for rgb(0-255,0-255,0-255).
The RGBA color model
p {
color: rgba(255,128,0,0.7)
}If you want to make something transparent while using RGB, make it RGBA and add the opacity value (as a decimal) afterwards.
24-bit Hexadecimal RGB
p {
color: #ff8000;
}Binary is hard to read; it's just a bunch of ones and zeros, and it takes a long time to write. To solve this, a lot of things use hexadecimal, which is base 16. Hexadecimal uses all of the decimal digits and then A through F.
Instead of noting a color with three numbers between 0-255, you can define them as hexadecimal numbers with two digits, since in hexadecimal, 100-1=FF, which is 255 in hexadecimal.
Because computers know that the color will have exactly two digits, they do not need commas anymore. All the need is a number symbol (#) to tell them it's a color in this format.
12-bit Hexadecimal RGB
p {
color: #f80;
}CSS will also accept three hexadecimal digits, with each being either red, green, or blue. This is arguably the most compact way to write any color (unless it's red, in which case there's a one-character improvement).
Conclusion
There are many ways to write a color in CSS. Which one to use depends on what computers and browsers you want your site to work on, whether you want to make your text transparent, and personal preference.