In CSS, colors can be defined by their names or by using one of the several methods to display a specific value. I’ll be insisting on the use of specific values.
A common mistake is to lazily type the name of the color rather than carefully choose a color to best fit your design.
Other mistakes include leaving a space between rgb and the first parenthesis on rgb(x, x, x) or forgetting the pound sign on #xxxxxx.
When you give the color property the value PaleVioletRed, you get the same result as if you typed #db7093 or rgb(219, 112, 147). In CSS3, names of colors are valid, and they are usually easier to remember—if you know what AntiqueWhite, Bisque, and BlanchedAlmond are, that is.
There are some drawbacks, though.
First, using the names give you a limited 140‑color palette, which may sound like a lot, but is not that many compared to the 16 million possible colors on the RGB spectrum. You probably won’t use more than a handful of colors at one page or website, but you don’t want to limit yourself.
Even if you know that the color you chose has a name, you want to use its value, so you never allow yourself to be lazy. And because you want to keep your CSS consistent, if you declared a color name for a color in your design, you’d be more likely to choose another color that has a name, limiting your palette.
So I want you to choose your color and your color palette carefully.
Another problem—that won’t affect this class directly but may affect your work in the future—is the use of Javascript to create colors based on calculations, such as data visualizations, for example. As you can imagine, it’s much easier for a script language to make calculations with values than names.
Do yourself a favor and always choose a value.
From W3Schools:
RGB color values are supported in all browsers.
An RGB color value is specified with:
rgb(red, green, blue).Each parameter (red, green, and blue) defines the intensity of the color as an integer between 0 and 255.
For example,
rgb(0, 0, 255)is rendered as blue, because the blue parameter is set to its highest value (255) and the others are set to 0.
div {
background-color: rgb(0, 191, 255);
color: rgb(255, 255, 255);
}
From W3Schools:
Hexadecimal color values are also supported in all browsers.
A hexadecimal color is specified with:
#RRGGBB.RR (red), GG (green) and BB (blue) are hexadecimal integers between 00 and FF specifying the intensity of the color.
For example,
#0000FFis displayed as blue, because the blue component is set to its highest value (FF) and the others are set to 00.
div {
background-color: #00bfff;
color: #ffffff;
}
Working in hexadecimal certainly is less intuitive to figure out the colors, but there is a logical, mathematical reason for what looks like random numbers and letters. If you like math and like knowing more about the reasons behind technical decisions, this post in the Pluralsight blog is a start:
Why do we use letters instead of numbers? Since decimal numbers can only run from 0–9, there needed to be another way to represent larger numbers. Letters replace the higher numbers. These are what the hexadecimal letters stand for: A=10, B=11, C=12, D=13, E=14, F=15. So the way that we get a hexadecimal number is to multiply the first number by 16 and the second number by one and add them together.
The easiest, though, is to pick your colors in a tool like Photoshop or W3School color picker and copy and paste into your CSS file.
When using hexadecimal colors, it’s a personal preference whether you want to use uppercase or lowercase. I prefer lowercase, because they’re easier to type and easier to read. You can choose for yourself, but you should try to keep them consistent.
The front-end developer Sara Soueidan makes a very compelling case to use HSL rather than HEX or RGB, because it’s more intuitive to tweak your color, and it can be more systematic to build a color palette.
HSL stands for Hue, Saturation, and Lightness. Hue is the angle of that color on the color wheel; Saturation controls how vivid or dull a color is; and Lightness control if you want to make it darker or lighter.
I’ve never used it very much and I don’t necessarily think it’s very intuitive. But you may want to give it a try. I still think it’s easier to choose a color in some tool and it’ll give me the values that I need.
You may be tempted to substitute black and white for #000000 and #ffffff, because they’re exceptions. In theory, it could make sense. But you still don’t want to do it for two different reasons.
First, for consistency, you want to set all colors in the same system, using rgb(x, x, x), #xxxxxx, or hsl(x, x%, x%).
Furthermore, you don’t really want to use pure black and pure white; try replacing them with very dark or very light gray (#222222 and #eeeeee for example). I promise you it’ll look better.