These days, there are lots of tools and systems available to help you build your website without learning HTML code or other technical stuff that happens behind the curtain… wait, Toto! I still run into color codes! What does it mean when I see #ff03ea???
Often, these systems offer you the option to pick a color from a color selection tool. Knowing the answer is not critical. But what if you want to use the same color repeatedly? This is where hexadecimal color codes come in handy…
I just saw a few eyes glaze over when they saw that word hexadecimal. Stick with me – that’s the biggest word we’ll learn today 🙂 As you may already know, computers do everything based on coding – specific instructions written in text form using a special language. In the case of hexadecimal, it’s not even a language. It’s a numbering system that follows a few basic rules.
To understand this, let’s go back to grade school math, when we learned different base numbering systems. For example, binary numbering only allows two numerals for counting. Thus 0, 1, 10, 11, 100, 101, 110, 111, etc. instead of 0, 1, 2, 3, 4, 5, 6 in our usual base 10 numbering system. Although binary is the fundamental numbering system for computers, engineers figured out early on that super-long strings of 1s and 0s are difficult to interact with. It turns out that batches of 16 are quite handy, so we work in base 16 instead.
This leaves a quandary – we need to be able to count to 16 within single digits. We could invent six more numerals. However, it’s easier to use something we already have available – letters! Yes letters, as in the first six letters of the alphabet. In hexadecimal numbering, we count like this: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. F=15 in base 10 and the next number is 10, which equals 16 in base 10.
Don’t worry if this is confusing – the idea to absorb is that we use A through F to represent extra numerals.
The next piece of understanding color codes is how we identify colors in a digital world. For computer displays and TVs we use a system called RGB. I covered RGB in detail in an earlier post here. RGB stands for Red, Green and Blue, the three primary colors a monitor or TV. Using hexadecimal numbering, we can represent each primary color with a pair of numerals. Let’s look at an example:
#FF0077 – break it apart into pairs: FF 00 77.
The higher the number represented by each pair, the more of that color is in the mix. In this case, FF is the highest possible number, so Red is up at full level. 00 is the lowest possible number, and in this case Green is set to 00, meaning there is no green in the mix. With Blue at level 77, it’s at about half in the mix – mix two parts Red with one part Blue and you get red-violet or close to magenta. Full white is #FFFFFF and full black is #000000.
To keep it simple, I’ve stuck to matching pairs of digits, a pattern commonly followed in web design. We can mix and match color codes within the hexadecimal system any way we like, which provides a range of millions of colors to choose from – just using six digits.
If this all sounds confusing, there is not much need to understand it unless you are working with colors on computers all the time. The important piece of all of this is when you see a color code that looks like this: #3399EE or #12ACE5, it represents a specific color.
If you want several elements in a web page to be the same color, you can select a color code, copy it and paste it into the panel for another element. It’s not a bad idea to note that color code somewhere for future reference. Some systems allow you to store colors in a palette or library – that’s a great way to maintain consistent colors across your digital media 🙂
One final note – I have been using the hash tag (#) in front of these numbers. It is required in many situations. In others, the software adds it for you. If you’re not sure whether to use the hash tag in front of the hexadecimal number, try it both ways and find out which method works 🙂 Also, upper case and lower case are acceptable – choose one method and stick with it.
See you all next week with more of Mike’s Media Production Tips!