There are a lot of tools and techniques for working with color on the web. I think you should always know how things work, and color is no exception. Let’s go over the technical details of working with color on the web.
Mixing Colors
It’s very important to realize that using colors on the computer the way you did when you were a kid is not going to work because of the color mixing. When you were kids, you had paint. Ink and printer ink are made up of pigments, little particles that mix and form visible color. This is a subtractive pattern of color formation. The more color you add, the darker the color will be. The base colors are cyan, magenta, and yellow, but when you mix them in the subtractive scheme, you get black.
On a computer (or any monitor) you work with light, which means when you mix all the colors you get white. Before Isaac Newton did his famous prism experiment, people believed that color was within objects, not absorbed by them and reflected from them. Newton, on the other hand, used a prism and proved that bright light is just a mixture of several colors, producing a rainbow. However, the individual colors of the rainbow were no longer separated, and it showed that the prism did not contain color. Such a scheme is called additive.
Monitors are many combinations of small pieces of light that form a myriad of colors. Resolution refers to the number of these pieces — pixels — that are on the screen. Interestingly, this approach was used by artists before monitors even existed.
Color values
RGB values
At the end of the previous section, it was told between the lines what rbga(x, x, x, y) means; but it’s worth getting to know it better. If we work with the RGB model, we divide the color into three channels with values from 0 to 255.
x is a number from 0-255
y is a number from 0.0 to 1.0
rgb(x, x, x); or rgba(x, x, x, y);
Example: rbga(150, 150, 150, 0.5);
Hex Values
Hexadecimal colors are a slightly different format for displaying color and are most commonly used on the web.
As you know, a byte is 8 bits, so each hex color is specified by 1 byte. Each byte is a number from 00 to FF in hex, or 0 to 255 in decimal. So black is specified as #000000 and white as #FFFFFFFF.
If digits are repeated in pairs, they can be reduced, for example #00FFFFFF becomes #0FFFF. This system of notation is very convenient for understanding and notation, as well as for use in programming. If you are going to work with color at a deeper level, it is worth considering the HSL system.
HSL Values
HSL works pretty much the same way as RGB, but instead of colors, it sets hue, saturation, and lightness.
Tone rotates 360 degrees, and saturation and lightness take values from 0 to 1.
x is a number from 0 – 360
y is a percentage from 0% to 100%
z is a number from 0.0 to 1.0
hsl(x, y, y); or hsla(x, y, y, z);
Example: hsla(150, 50%, 50%, 0.5);
The transition between the two systems is very simple, but the HSL is much better for the human perception. This demo and this tool will help you understand it better.
HSL will also be discussed in the next article.
Named colors
Named colors are also available to developers. However, they are not easy to work with because of the difference in perception and their inaccuracy. A blatant example is that “dark grey” is lighter than “grey”. There is even a game where you have to guess the colors. In the past, for example, blood red was called chucknorris (now it’s only supported in HTML, as far as I know). Anyway, it would be much more convenient and professional to use preprocessors like Sass to store colors in variables.
Color Variables
It’s good practice to store color variables, but never use them, overriding them with more readable names. There are native variables in CSS:
:root {
–brandColor: red;
}
body {
background: var(–brandColor);
}
But this is a very new feature, and Microsoft browsers don’t support it at the time of writing.
CSS preprocessors also support variables, so you can create variables like $brandPrimary and use them. Or use map:
$colors: (
mainBrand: #FA6ACC,
secondaryBrand: #F02A52,
highlight: #09A6E4
);
@function color($key) {
@if map-has-key($colors, $key) {
@return map-get($colors, $key);
}
@warn "Unknown `#{$key}` in $colors.";
@return null;
}
// _component.scss
.element {
background-color: color(highlight); // #09A6E4
}Remember that names are important. Abstract names come in handy sometimes, because if you change a variable that used to specify blue and now is orange, you don’t have to rename all the other variables, or worse, hang a comment like “$blue is now orange.”
currentColor
currentColor is a very important value. It takes nesting into account, and is used to transfer color to shadows, borders, and even backgrounds.
Suppose you have created a div and a nested div within it. The code below will create an orange border for the inner div:
.div-external { color: orange; }
.div-internal { border: 1px solid currentColor; }
This is very useful when working with icon systems. You can set currentColor as the default value, and then use the necessary CSS classes for styling.
Color Properties
Color as a CSS property refers to the color of the font. You use background-color to fill a large area with color, and fill in the case of an SVG element. Border is the border around the HTML element and stroke is its SVG equivalent.
Shadows
The box-shadow and text-shadow take on a color value. Text shadows take 2 or 3 values (vertical and horizontal shadows and optional blur radius). Block shadows, on the other hand, can take an optional blur radius. You can also create internal shadows. Here’s a great site with a demo.
Gradients
Linear gradients take direction, color change points and transparency value. Here’s an example:
The syntax is quite simple, but it’s easier to work with online code generators, if only because they generate code for eliminating browsers. Here’s another pretty nice gradient generator. By the way, its sources are open.