Hex Math. You Know, for Color! The Basics of CSS Color.

Hex Math. You Know, for Color! The Basics of CSS Color.

colored glass windows with hex colors - demonstrating hex math

Today we're going to get into CSS hexadecimal color notation, hex math! I have done only one programming post so far. Sorry about that but creativity and my interests vary so widely, it is hard to get back around sometimes. Inspired by a thought during my morning shower, it is now time for this fun little ditty!

If CSS is a foreign topic to you, here are the basics. This is sort of like my HTML basics article a few months ago where I introduced the simplest levels of web coding. If you think you'll never need to learn how to code HTML, you should reconsider. We are still relatively early in the whole Internet frontier. More and more of our lives are moving on to the web in some form. The more you know, the more control you have. I like to relate it to putting the numbers on your mailbox. If you have a mailbox, you want to put your street number on the box clearly so you get the right mail. You can use the numbers that come with a new mailbox. You can go to the hardware store and buy the package of numbers. This gives you the chance to choose between two or three styles. If your house number has more than two of the same digit, you might have to buy two packs. That is frustrating, plus you may think the style options are limited. If you had the ability to make your own numbers, you'd have control to make as many digits, in what ever color, font and size that you want! You have artistic control. That is my point with putting things on the web. If you learn CSS you will have more artistic control in your code.

What is CSS?

CSS stands for Cascading Style Sheets. The important word is style. These are web files, documents, or sheets, that are combined to provide style information for any element on a website. The cascade is simply the way that choices you made combine as they are all put together. A reference to one kind of element affects all of those elements. The order that the page loads them is very important. Later on if there is a change to this element's style, or a different style to a more specific version of this element, those are overridden. Hence the cascade. Later adjustments build up to the final result. Like water tumbling, or cascading down a cliff, it splashes and bumps off of rocks and things. The overall direction is the same, but minor splashes can have variation. It is efficient. Big changes made up front control everything. Then fine-tuned elements handle specific variations.

I'm here to talk about how color is noted. This article is not a full explanation of CSS. If you want to go beyond this and change fonts, text sizes, padding, margins and many other things, go to my favorite web coding reference site W3Schools.com and start learning! There are certainly other places to learn the basics. I find their site to be very well organized and good for learning the basics.

What is Hexadecimal Notation? Hex Math?

demonstration graphic hex math

The way CSS describes color is a little different than the color models we were taught as children. Color models or color spaces have changed as technology has changed. Pigmented color, physical material added to a paint base works like we were taught in grade school. Yellow and blue do indeed make green. Professional printers have several technical color models for the printing industry. One is the PantoneTM system which is a business that prepares standardized color tones. Then those who mix inks use CMYK. If you've had to change the cartridges in a home or office printer, you may have run into the Cyan, Magenta, Yellow and Black that makes color on printed paper. But in the technology that makes our television and computer screens, we use the RGB color model.

When you were a kid, did you ever get close to a TV screen? You may have been yelled at, "Get away from that TV. You'll ruin your eyes!" I loved holding magnets up to the screen and goofing with the colors. Not a great idea for keeping TVs working well, but I learned a lot. If you get close to the dots on the screen, you can see that they aren't the traditional primary colors. They are literally Red, Green and Blue... RGB.

Now we're going to talk a little math, hex math. Do you remember talking about base-10 and binary numbering systems? We live in base-10 because human beings have ten fingers. Computers live and think in binary, because humans designed processors to think in terms of on and off or true and false, which are represented as 1 and 0. The base that you use is just how many potential digits you have before starting a new column. That's why binary numbers get long really fast, the number normal (base-10) 7 in in binary looks like this 111! When you run out of digits you carry the 1 to the next column. Does that bring back memories of middle school or high school math class?

Hexadecimal is just a fancy term for base-16. We don't stop at the digit 9, we add more "numbers" using letters to keep going. Beyond 9 is A, B, C, D, E and F. To help understand that we are referring to hexadecimal numbers and not a regular number, programmers put "0x" or in CSS a pound sign '#' in front of the number.

How hex math represents a color

Now the weird part of using hexadecimal notation to represent a color, is that they squash the value into one number. When you read CSS or HTML code that has a hex color reference, you are looking at three two-digit hex numbers. The values for R, G and B respectively. So if you want full red, you would see #FF0000, which means "we're writing a hexadecimal number" (#), the red value is the maximum of 255 (FF), the green and the blue values are both zero (0000). That's what it means. So if you're around a graphic designer who is also a programmer, you might be impressed when they dial in "#4C4C4C" and just know that they are going to get a medium-dark gray color. If they want a little more red in that gray, they just increase the first two digits, or lower the G & B values, so something like #6C4C4C would work or #4C2020 would be similar but darker.

Remember, it isn't like adding more gets you darker colors like in watercolors. More value approaches white. So, #FFFFFF is white and #000000 is black. In CSS this can also be abbreviated into a three digit reference. #F00 for red, #FFF for white and #000 for black. It is less accurate, but think of it like moving sliders up and down for the three values. Color usually isn't that precise, like an impressionist painting, it is the general color and the relationship with the surrounding ones that matter. If you do design for a company with brand guidelines, you're better off using the exact six-digit hex reference.

If you're doing programming that builds this number as input, like an on screen color selector, remember that this color reference is three separate digits. You get weird results if you were to carry a one from your FF green column and drop it into your red. Straight math might produce a problem like that. You can split the value into separate number references converting to a string and then parsing it as an integer or you can just grab those two digits using bitwise operators. If you aren't a programmer, don't worry about it. Some of that gets tricky. The important part is to think of it as three numbers in base-16. Then in your head you can think in terms of higher and lower. You don't have to compute it to a base ten digit, just remember that 0xC is a higher number than 0x7, (12 > 7). Two digits work the same way, 0x5A is less than 0xA5, (90

Still with me?

There is one more thing you could run into, transparency. As code and browsers get more sophisticated, there are more advanced tools waiting to be used. The hex number reference has an additional fourth digit, also called 32-bit color reference. That fourth pair of numbers is a transparency value also often called the alpha channel. So #FF00007F should come out full red shown 50% transparent. The notation in this code is a little different, some programming languages just add the four digits like I mentioned. In straight CSS, you add transparency by writing it like you see in the examples below. The fourth place is a value between 0 and 1, instead of 0 & 255. The main principles are still the same. If you have a modern browser, it might work. Let's try it:

This box has a style with full red
background-color: rgba(255, 0, 0, 1.0);

This box has a style with 50% red
background-color: rgba(255, 0, 0, 0.5);

This box has a style with only a touch of red
background-color: rgba(255, 0, 0, 0.03);

>>What do you think? If you have ever dabbled in CSS color, did that give you some clarity on how it works? Feel free to ask questions. If you get it, share your favorite color in the comments below. Make sure you share it in hex notation!

Photo credits: Knob that goes to 11, colorful windows.

Add new comment

This is to help verify that you are a real person commenting. Your address will not be displayed on the site. It is only for our records. This will also not cause you to be opted-in to creativity show emails. To sign up for updates, please click on the opt-in graphic at the top of the right column.