Hey kid.
I’m Fish^12. Wanna learn CSS? This is the third installment of my CSS series. Make sure you're properly caught up before reading this guide.
This time, we're going to be talking about color. One step closer to making themes.
Preface: This guide is intended for beginners. If you know about color formatting and color accessibility, then you can downvote this guide. Additionally, this guide will not be talking about design, just the colors themselves.
THE COLORS
CSS is a very visual medium; you're going to be working with design and aesthetic constantly, which means that we have to learn how color works, both in a literal and figurative sense.
Unfortunately, aesthetic and color theory will have to come later. For now, we must do the absolute minimum.
We will start with how to make colors.
"I'm blue!"
This is blue text. But there are multiple ways to make blue.
.colloquialColoredText {
color: blue;
}
This is the simplest way. CSS has over a hundred named colors built-in to the language for ease of access. This resource lists out every single named color and what they look like.
"I'm saddlebrown!"
"And I'm maroon!"
"I'm navy!"
As long as you have a colloquial name, this one is very easy to intuit. That said, it has limited functionality; if you want a slightly lighter blue or a darker yellow, this won't help you much.
.hexColoredText {
color: #0000FF;
}
Hex codes! Hexadecimal relies on a range of values between 00 and FF, which represents 0 to 255.
In essence, the hex code can be broken up into three equal sections; Red, Green, and Blue respectively (RGB). So, you can imagine that #0000FF means 0 red, 0 green, and 255 blue, making the text blue.
That said, it's difficult to intuitively mix these in your head; without a clear knowledge of color mixing and then translating that into hexadecimal, you will probably be relying on color pickers to help select hex codes. Which leads to the next format.
.roygeebivColoredText {
color: rgba(0, 0, 255, 1);
}
RGBA! Rather than relying on hexadecimal, you have a clear, mathematical display of all colors. Just set a value between 0 and 255. It also adds a fourth modifier called Alpha, which ranges from 0 to 1. The Alpha value represents opacity; how solid or transparent the color is.
"I'm solid blue!"
"I'm blue, but half transparent!"
"My existence is barely tangible!"
That said, this one still requires you to have a decent knowledge of color mixing to maximize the use of. Maybe you want the best solution to intuiting colors.
.hassleColoredText {
color: hsla(240deg, 100%, 50%, 1);
}
This one is a handful to explain. HSLA stands for Hue, Saturation, Light, and Alpha.
Hue relies on a 360 degree range, which maps the rainbow onto a conic gradient. Red is 0deg, Yellow is 60deg, Green is 120deg, Cyan is 180deg, Blue is 240deg, and Purple is 300deg, before wrapping back around to Red.
"I'm 10deg!"
"I'm 200deg!"
"I'm 300deg!"
Saturation relies on a 0% to 100% range, which maps the intensity of a given color. At 0%, the color is gray, while 100% is the original color.
"I'm 100%!"
"I'm 60%!"
"I'm incredibly sad!"
Light also relies on a 0% to 100% range, which dictates the brightness of a color. At 0%, the color is black, while 100% is white.
"I'm 50%. Just right!"
"I'm 70%. Too bright!"
"I'm 30%. Too dark!"
It takes a little getting used to, but HSLA is the most intuitive of the different color formatting choices. HSLA also makes it easier to create color palettes, since you only need to change one or two values in order to create an accent. For example, if I have a cyan div, all I need to do is manipulate the Light or Saturation to create a darker version of cyan to create a box shadow.
Note: There are a bunch of different formats for colors out there. These one's are typically easiest to understand and are used most often on the wiki.
You have all these choices for colors, but there is no one correct method. Use whatever is comfortable for you to use and is appropriate for your needs. For example, if you're collabing with another person, it's probably best to use formatting you both will understand.
THE ACCESSIBILITY
Ah shit. It's the hard part.
It's easy to pick and choose colors, it's harder to pick and choose the right colors. We will be going over various tools and tips to enable accessibility.
.badText {
color: lightgrey;
background: grey;
}
This is not readable!
CSS policy dictates that all text should be readable. The main method with which to measure this is the Color Contrast Checker, which measures the ratio between font color and background.
In the ideal scenario, you shouldn't even need to use the calculator; your color choices should already be easy to read. If you have to measure it to ensure compliance, then that's a sign that you should probably change your color palette.
It's better to have something readable and not skirt the line of what is technically accessible.
.badText {
color: white;
background: black;
}
This is too jarring.
On a similar note, we can't have colors that are too contrasted.
Even though this is technically readable, it strains the eyes; white on black is the largest contrast you can physically get. The reason why pure white and pure black is rarely used in web design is because of this. Instead, you're typically going to be using an off white and off black.
.badText {
color: red;
background: green;
}
This is red/green colorblind.
On top of having terrible color contrast, this is also impossible to see for people with red/green colorblindness. In order to improve accessibility, this website is a handy tool for choosing color palettes that can handle common types of colorblindness.
A quick reference list of bad color combinations to use:
- Red / Green
- Red / Brown
- White / Yellow
- Blue / Purple
Note: This doesn't mean never use these colors elsewhere. If you're using a rainbow background, you obviously don't need to worry about the gradient between blue and purple. It just means that you shouldn't have blue text on purple background for the sake of readability.
Additionally, you should not rely on color alone to convey meaning. Stop and Go are both colored, but they also have text and shapes associated with them to keep their intentions clear. You can also use patterns, symbols, or images.
CONCLUSION
At the end of the day, I can go on and on about color theory or whatever, but all that really matters is if the colors look good. These are all rules of thumb, and should be taken with a grain of salt.