was successfully added to your cart.

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 blog post for another day.

If graphic designers tell a web developer a certain color is “blizzard blue”, “blue gray”, “celestial blue”, or simply “light blue,” (if those sounded like retired Crayola™ colors to you, then you are spot on—they are) then chances are that the exact color they are thinking of will vary from person to person — unless that person happens to be a computer.

hexcolors
Any of these could mean any of the mentioned colors, leading to confusion among team members.

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 orange.

To figure out how this code works we should look at its core structure. The first character is the hash sign, #, and lets the computer know “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.

hash

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 in #999999, only a medium grey is returned. 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, which represent numbers 11-16. So f9 makes an even “16.”

The Math of It

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 is black, our beginning string
#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 our 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 case, 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.

significant left hand 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 has gained a lot of vivacity. As you’re probably able to guess, I’m about to describe the benefits of using hex coding to adjust a colors brightness, and you’d be right. 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 loweringit’s 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 to looking like a vibrant neon sign when increased to 100% brightness.

brightness and saturation example hex colors

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 grey 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.
In the case of this paragraph in this post, I added a color attribute to the paragraph and used a hex code of: #4d4d4d to darken the text some.

While in this specific case I used HTML to implement the code, adding attributes such as the one above shouldn’t be a challenge.

Copy-Paste

For designers who recognize the hex code logical make-up and function, a unique 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 designer myself, I’ve 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 identify new colors that coordinate with the photograph without ever being present in the photo.

copy paste example hex color code

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 allows for on-the-fly tweaks in color to improve text visibility on websites, identify certain elements of a page through stylesheets by simply recognizing 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 coding 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.”

Leave a Reply

Warehouse75

FREE
VIEW