Learn more about colors
Some knowledge of how things work under the hood is always useful even if you use applications like Sandvox or Rapidweaver, if you want to customize your theme or have more control on how your website will look like.
One of the first things you may want to change is color.
You’ve probably seen before a piece of code like this one:
#770000. It’s the HTML way to specify a dark red color. Let’s separate its parts to understand what it means.
The first char,
#, means: what follows is a color code. Just it. Put it before your color code and don’t worry about it anymore.
The following string is a sequence of three numbers:
77-00-00. As you probably know, every color can be represented by the mixture of three primary colors. Every pixel of your monitor has three tiny components: one is red, one is green, one is blue. If all these sub-pixels are totally switched on, that pixel will be white; if they are all totally switched off, that pixel will be black.
Like a painter, your computer mixes these three colors adjusting their intensity to create every possible combination for each pixel. Remember this: red, green, blue – this is why we call this color representation “RGB“.
These three 2-digit numbers represent the three primary colors in RGB. In this case,
77 for red and
00 for both green and blue. That’s why #770000 is red: we got some intensity of red and no intensity at all for green and blue. “00”, of course, is the lowest level, it means: “totally switched off”.
Guess what color would be #330000? The answer is: a darker red. And #220000 is even darker. And #990000 is lighter. The same way #007700 would be green and #000077 would be blue.
Now there’s a problem: you can find letters in these codes as well. What do they mean? Let’s keep it simple and just say that each place in this sequence of six characters can handle not just ten numbers (0-9), but sixteen. But we haven’t sixteen digits… So we use letters to complete the missing digits (it’s not a decimal code, but a hexadecimal one).
This sounds crazy, but remember that computers work using bits and powers of two, not of ten as humans do. This is a bit of a concession we make to them. In this case we count from zero to twenty this way: 00 01 02 03 04 05 06 07 08 09 0A 0B 0C 0D 0E 0F 10 11 12… (up to “FF” which is, translated in human language, 256 – you see that this way we even save space, because 256 needs three digits instead of two).
You don’t have to understand this, just to believe it ;-) and to remember that “F” is a number and that it’s a higher number than “9”. Back to our red example: #770000 is red, #990000 is a lighter red, #CC0000 is even lighter, #FF0000 is pure, superbright red. “FF” is the top.
So just remember this: 00 is off, FF is on, everything in between is a more or less bright kind of red, green or blue.
Sometimes we simplify things avoiding codes like
#FE9801, rounding them to something simpler, like
#FF9900. Actually “FE” is almost the same as “FF”, just a step away in 256 possibilities. When numbers are coupled like that, you can save time and space and use an abbreviated code, avoiding repetitions and write just
#F90 (that’s orange). So
#990000 can be written
#900 and, the same way,
#667788. Of course you cannot abbreviate this:
#FF9901 – you have to write it the long way (FF becomes F, 99 becomes 9, but 01 can’t be abbreviated!).
Create your color
If you try to find your favorite color modifying these codes you’ll go nuts.
There are millions of possibilities and probably your eye won’t see any difference between colors that are too close to each other.
So, the best way is to let someone else find out the code. Any good graphic application can do this, but we want to keep things simple, right? So let’s use just web resources available right now from your browser.
This page is a good starting point: http://colorschemedesigner.com/.
You have a color wheel; choose your color: moving the mouse over it, its code will be shown. But now you know what it means!
So, you can write “
#F5F5DC” or “
beige” (in the latter case don’t use the “#” symbol!).
Let’s use Carbone 2.0 for Sandvox, assuming you have Sandvox Pro to insert code with the “Site Code Injection…” option.
You may want to change the background to a solid light blue color. You add your code to the head of the page (instructions are here, we’ll talk about this another time), as explained in the provided example:
What you need now is to change the color with something you like. A pure blue (
#00F) would be awful… too bright. Try this one, instead:
#008B8B. Better. There’s no red in it and the same quantity of green and blue.
Every theme has its default options, but if you know some HTML and CSS you can customize tons of documented and undocumented settings.