You have probably seen colors described like this: #042FA1. Wouldn’t it be nice if you could understand and edit that color?
Colors have three or four parts. In the case of three parts, they are arranged by the amount of red, the amount of green, and the amount of blue that compose the color.
Some color system add a fourth component, an amount of transparency.
If you’re familiar with the foundation behind painting on paper or printing, you may know that any color can be composed from three primaries, cyan, magenta, and yellow. Black is often added by printers and paint makers because there is a difference between the theoretical mixing of colors, and the reality of pigments and paper. This color system is called CMYK (Cyan, Magenta, Yellow, and Black).
You may be surprised to discover that when colors are projected, rather than reflected as they are on paper, the colors are nearly reversed. all colors can be created from varying levels of red, green and blue, known as RGB.
“What about colors like yellow,” you may ask. Look at this: when you have large squares of green and red, it looks like a pattern. But as it gets smaller, it becomes yellow. Who would have figured? (Note, this may not look quite right on all monitors.)
So for computer technology, including WordPress, colors are mixed by combining the amounts of red, green and blue. Each of the primary colors can have an amount from 0 to 255. HTML provides a little function to turn three primaries into a color, like so: RGB(255,0,255), which is purple.
Why are the values in the range of 0-255 instead of something sensible, like 0 – 100? That’s based on early computers that used a ‘byte’ as a unit of data. A byte was composed of 8 on or off bits. A single bit can be 0 or 1, Two bits together can represent any value from 0 – 3, and three bits can range from 0-7, So, with 8 bits, you have 256 combinations. An RGB color uses three 8-bit bytes.
Just to make things more interesting, you’ll seldom see the RGB function in WordPress. Instead, you’ll see a mixture of red, green and blue described like this: #FF00FF, or sometimes #FOF.
These are hexadecimal numbers. In ordinary decimal number systems, each character in a number can range from 0 to 9. But with hexadecimal, they can range from 0 to F, 16 values in all. So, 10 would be described as A, and of course 15 is F.
Let’s look at the simpler #FOF first. This is an R(ed), G(reen), B(lue) combination. F is the most you can have of red. There’s no Green since there’s a zero there in the middle. and the final F is the full 15 parts of blue. So, that’s purple.
Are you following so far? This is remarkably difficult for most people to figure out at first. In time, it becomes second nature.
The more common color designations have 6 digits. It’s still RGB, but red has a double-digit, green has it’s own two-digit value, as does blue.
So, looking at each color individually, it can range from nothing, represented by 00, to 255, represented by FF. You see, the first digit of the two is multiplied by sixteen, then added to the second digit.
When you think about it, that’s just like the number 17 in decimal, for example. That’s 1 times ten, added to 7.
So, you can have 0 – 255 for an amount of red, 0 – 255 for an amount of green, and 0 – 255 for an amount of blue. That’s 16,777,216 different colors you can have in WordPress. How cool is that?
To make life easier, remember to think of colors as their individual amounts of red, green, and blue. Then, to avoid the mind-bending chore of converting from something that’s easy to understand, 0 – 255 to 0 – FF, you can use this hex converter with one color at a time.
Or you may enjoy: How To Build A Converter.