When doing any kind of web design at all, whether you are making a site from scratch, using a Content Management System (CMS) like WordPress, or even using a turnkey online website service like GoDaddy’s Website Tonight, you will have some dealings with setting or changing COLORS.
I’m not talking about images here. I’m talking about the different elements in a website that can be assigned their color manually by you. Now, some web design products may allow you to choose a color with a little popup box with a color palette that allows you to make your selection by sight. Those are alright, but you won’t always be able to use them in every situation, and sometimes they just don’t give you the control you may want or need.
And for that reason, it would be helpful if you knew something about the different color codes and formats that a web page understands how to display.
But first, let me lay down some stable points for you to understand:
- The basic elements of a web page that can be colored directly with code are:
- Text
- Backgrounds
- Borders
- There are 4 basic color code formats you can use to assign one of these page elements a color (NOTE: Technically, there are 7 color code formats in total that can be used, but three of them are only supported in the newest browser versions, so I won’t be covering them here). Which type you use depends on your preference mainly (however, some online do-it-yourself web design products might limit your options).
- In the source code of a web page, or more appropriately, in its style sheet, you will see colors indicated in the follow ways:
(FOR TEXT) color: color code here;
(FOR BACKGROUND) background-color: color code here;
(FOR BORDER) border-color: color code here;
There are also shorthand ways of writing some of those, but I’m trying to keep this lesson simple.
Your Options
(Now I will show you what can go in the color code here space.)
COLOR NAMES
This first one is the simplest to understand and use, but also the most limited in the number of colors available. This method involves simply using the NAMES of the colors.
EXAMPLE: color: blue;
There are only 16 color names available for use: White, Silver, Gray, Black, Red, Maroon, Yellow, Olive, Lime, Green, Aqua, Teal, Blue, Navy, Fuchsia & Purple.
HEXADECIMAL CODES
Before you get too freaked out at that word, Hexadecimal basically means “pertaining to the number 16”. And with Hexadecimal color codes, you are dealing codes that are only allowed to use 16 characters. And those characters are the numbers 0-9 and the letters A-F. A Hexadecimal color code always starts with a hash sign (#) and then has 6 characters after it.
EXAMPLE: color: #0F03A1; – which in this case would display a deep blue color.
And at the extreme ends of the scale, you would have #000000 as the color BLACK and #FFFFFF as the color WHITE.
Actually, if you remember that all colors are a mix of the primary colors RED, GREEN and BLUE, then you might find it interesting to note that the first two digits represent the amount of RED, the second two represent the amount of GREEN and the last two digits represent the amount of BLUE.
There is also a shorthand way to do this that you can use in some cases – but only when you have three PAIRS of the same number in your hex code. Example: #FF6644 can be abbreviated to #F64 and will give you the same color. Oh, and in case you were wondering, with hex codes it does not matter whether the letters are upper or lower case.
With hexadecimal codes there are over 16.7 million colors available to use. This code format is what I personally find the easiest to work with when designing web pages.
RGB CODES
Possibly you have already guessed that RGB stands for RED-GREEN-BLUE. The basic concept of these is the same as Hexadecimal codes, but with a less esoteric look. This format just uses a set of three numbers to represent the same 16.7 million-plus colors.
EXAMPLE: color: rgb(255, 47, 23); – which in this case would display a bright red color.
Each of the three numbers, separated by commas, can be from 0-255. And in case you are wondering, 0,0,0 would be BLACK and 255,255,255 would be WHITE.
RGB PERCENTAGE CODES
These have the same basic structure as RGB codes, but using percentages 0% to 100% in the place of the above numbers.
EXAMPLE: color: rgb(0%, 100%, 0%); – which in this case would display a bright green color. That is: 0% of RED, 100% of GREEN and 0% of BLUE.
Final Note
You might ask yourself, “OK, so how do I know which color I am choosing, when I pick a code?” Well the simplest way to do that, is to use a graphics program. If you want to pick a color you like, go in that program and do it by sight, then note down the code it shows and put that in your website code. Or the other way around, if you see a color code in your website HTML, copy the code and plug it into your color palette of the graphics program and see which color is displayed. By jockeying those two factors you should get the colors you want in no time.
