Coding Color: The Brilliance of Hex
When developing/designing a website, using color not only establishes the emotional impact of the site but also gives the user an immediate impression of the company/person/entity the website reflects. A web designer must have a fundamental understanding of color schemes, how they work to portray the intended message, and how to effectively select colors to initiate a certain emotional response – this topic in itself is a post for another day.
If graphic designers tell a web designer a certain color is Blizzard Blue, Blue Gray, or Celestial Blue (if those sounded like retired Crayola™ colors to you, then you are spot on – they are) then chances are that the exact color you are thinking of will vary from person to person, unless that person happens to be a computer.
Precision of Hex Code
Hexadecimal code (or simply: hex code) is a simple but logical computer language designed to accurately describe colors. Basically, hex code describes 24-bit colors with combinations of exactly 6 characters made from ten numerals and six letters all led by a hash mark. Think of it this way: pixels on back-lit screens remain dark until lit with red, green, blue, or any combination of the three. Hex code represents these exact combinations.
Breaking Down the Code
An example of a hex code is #f5821f – an exact shade of a specific color of orange.
To figure out how this code works, we should take a better look at its core structure. The first character is the hash sign, #, and tells the computer “this is a hex number.” The other 6 numbers are really three pairs grouped together. Again, these pairs can have characters that range from 0-9 and a-f. Each pair controls the output of one primary color on the monitor.
The higher the first number/letter of each pair is, the brighter each primary color will be. In the example, red is the brightest primary color with f5 (f being the brightest), followed by green with an 8 digit, and then blue with a 1 digit. Each pair can only hold two characters, but when typing #999999, only a medium gray is returned. Wondering why? This is because numbers only represent the first half of the total brightness a code can have. To increase the brightness beyond “9”, we use letters, specifically a-f. These letters represent numbers 11-16. So f9 makes an even “16.”
The Math of it All
Hex code is a mathematical code. Also, since it is computer-friendly, these codes are chock-full of patterns and strings of patterns. To further explain, a pair of 00 represents a lack of color, and “ff” is the full-strength of the brightness. Therefore, #000000 is solid black (since we removed all of the primary colors out of the code), and #ffffff would be white (all of the primaries and full strength). By changing the values of the pairs within the code, we can then build on these patterns to find specific colors. We’ll start with editing the black hex code, #000000. This technique is using additive colors to change the color within a hex code.
#000000 stands for black #0000ff stands for solid blue #00ff00 stands for solid green #ff0000 stands for solid red
Subtractive colors start with a base of white, #ffffff. For finding subtractive primaries, we’ll change each pair to “00”.
#ffffff is your starting point, white. #00ffff is cyan #ff00ff is magenta #ffff00 is yellow #000000 is again, black.
All of you designers out there should hopefully have recognized the CMYK values shown above.
A Few Shortcuts
Some hex codes will only be presented using 3 characters, like #1fb. These codes basically imply that each second character in a pair should match the first. Thus, #1fb would be #11ffbb and #09b would be #0099bb. In most cases, you should be able to read a hex code by ignoring every other character, because the difference among the first character of a pair tells the designer/developer/computer more than the second characters.
Keeping Shades with Brightness
When brightening or darkening a color, often times a designer will decide to first adjust the color’s brightness. While this allows for a color to have some brilliance at the upper end of the spectrum (100%), the character of the color is lost through adjusting the brightness. For example, if we were to adjust a middle blue, it would become nearly black when reduced to 20% overall brightness, and at the other end of the spectrum (100%), the color gained a lot of vivacity. Now let’s look at using hex coding to adjust a color’s brightness. Ben Gremillion, a writer at ZURB, came up with the notion that if you think of the left-handed character of each pair as an increment of ten, you can effectively raise a color’s brightness while simultaneously lowering its overall saturation. You can see in the example below that through using this method, you can prevent any color from wandering too far towards the black end of the spectrum or looking like a vibrant neon sign when increased to 100% brightness.
Body Copy with Hex
In some cases, having headers with the same color as the body seems like the correct method for creating a website’s color scheme. When a thick header with gray type is positioned above narrower, more delicate type of the same color, the body text may appear lighter and therefore hard to read. By lowering the left-hand character of each hex code pair, the text will become easier to read.
For designers who recognize the hex code logical make-up and function, a tool is acquired that allows for a unique exploration of color combinations. Unlike color wheels, charts, or any other tool, hex coding allows for a simple and easy process to change hues while keeping the overall character of the color scheme intact. Sometimes, the result isn’t predictable, but this adds an element of variety, testing, and entertainment to the daily life of a designer. The simplest way to start experimenting with changing hues is to move one pair of characters to a different spot which trades the primary colors, keeping the hue but changing the value. As a former professional web designer myself, I often used hex colors from a photograph to help with the color scheme of an overall design. However, understanding hex coding can help take the color scheme a step further, through helping to identify new colors that coordinate with the photograph without ever being present in the photo.
Why Hex Code is Important to Know
You may have been reading this entire blog post thinking, “why do I need to know how hex code works? I have Photoshop and Illustrator that tell me the hex codes of every color.” Well, beyond impressing your coworkers by being able to spout off the hex codes of certain colors, having a healthy understanding of this language has many other benefits. Knowledge of this language allows for on-the-fly tweaks in color to improve text visibility on websites, the ability to identify certain elements of a page through stylesheets by simply recognizing the hex code of the color you’re looking for, and a better understanding to develop color schemes in ways that you generally won’t find easily accessible in Photoshop or Illustrator, giving you an advantage.
Implementing Into Your Life
Although this article is long and in-depth, don’t let hex coding intimidate you. Instead, allow your new found knowledge of hex act as a tool at your disposal. Utilize these techniques when they make sense and see how the colors of your designs will begin to go together much better than before. If nothing else, you can brag to your friends that you can now, as Ben Gremillion puts it, “(shuffle) hexadecimal triplets in my head.”