Most designers work with hexadecimal colors on a regular basis. Each hex color is made up of letters and numbers that indicate the exact shade. While you might use it frequently, you may not fully understand the ins and outs of the code’s formation. In a nutshell, computers use a different language than humans use. This means you have to talk to them in code, and hex is a binary that tells the computer what to do.
Hex color is a six-digit value made up of three two-digit combinations. The values are made up of red, green and blue. The number of possible colors formed by the hex system is 16,777,216, so there’s no lack of color choices.
The Origins of Hex Colors
Screens show us color through light, so are different than what we see in print and the real world. You might use CMYK on white paper, for example, but the color won’t look the same when viewed through a computer screen, television or on a mobile device. Hex colors are a simplified way of using blue, green and red to show different colors.
In years past, advertisers laid out their ads on boards and took them to the printer. Today, nearly every aspect of publishing is digital. Even if an ad eventually appears in print, the design starts on a computer screen. A majority of marketing materials appear online, even if just in a social media ad. Knowledge of hex color is now vital to all types of designers.
Hex codes always start with a pound sign (#) and are followed by six digits. They can be shortened to three digits if they repeat. For example, the hex color white is #FFFFFF but can be reduced to #FFF. Understanding how hex codes work and the colors each one represents helps you generate your own code more easily.
Determining Color From Hex Value
In the code, the value for red, green and blue are represented in that order. So, the first two slots both indicate red saturation, the second two green and the last two blue. Values start at 00, which is a low intensity of the color, to FF, which is the highest. So, white is #FFFFFF because white is made up of light and uses all colors to their highest intensity. Black is the absence of light, so you’d use the lowest intensity to represent black #000000.
Grayscale colors are easily created since they are made up of equal amounts of each color. For a dark gray, you might use #565656, and for a lighter gray, you might use #898989.
Brighter Hex Colors
Let’s take a journey back to grade school when you first learned about primary colors and how mixing them results in other shades. For hex color, you have red, green and blue to work with. If you need one of those three shades for your design, you would mix a high intensity of the color you want with low intensity of the ones you don’t. So, if you want a bright green, you would set red and blue’s values at zero and use high intensity (FF) for the green. The code would look like this: #00FF00.
Tools for Choosing Hex Colors
Sure, you could sit around all day and try out different color combinations, but that isn’t a very good use of your time as a designer. Fortunately, there are several color picking tools that give you the perfect shade without all the trial and error.
- WebFX Color Picker: Not only does this tool give you a hex color code, but you can also choose complementary, triade, tetrade or analogic shades. You can also save tones you love and make up your own palette. You’ll get the RGB values as well as the hex code.
- HueSnap: This is a mobile tool. If you see a beautiful sunset and know that’s the right color for a design project, you can snap a photo or create an entire palette based on what inspired you. Translate the shaded into hex color codes.
- Eggradients: One of today’s design trends is using gradient colors. This tool gives you the different hex codes for a gradient color scheme.
- HTML Color Codes: This site offers a color picker. Start with an RGB scale and choose a color. You can then look at the shades in the box and choose something close to what you want, making tweaks as you go. The tool offers hex code, RGB and CMYK.
There are many different tools for choosing a color. You can also simply use your photo editing software, pulling a shade out and then looking at the codes. This allows you to get a perfect palette match when designing based on an image.
How Hex Relates to RGB
The RGB color system is a decimal one represented in red, green, blue (RGB) and looks like this: 255,0,0. Zero is the lowest number on the scale and 255 is the highest. Each number defines how much red, green and blue there is in the color. So, if you want a bright green, you’d make the other values zero and the green 255 (0,255,0). Similar to hex color, RGB color mixes light to come up with shades.
Hex is basically a conversion of RGB. Think about if you have a gallon of milk and you want to know how many liters you have. Converting from RGB to Hex is similar to converting between standard in metric in that the language and values are different. Rather than figuring out the difference in the two systems, you can use an online converter to simplify the process.
Choosing the Perfect Hex Color
Now that you understand how the hex system works and relates to RGB, you’re ready to choose the right code. Stick to good design rules, choosing contrast where needed and complementary colors in other places. Designing with hexadecimals is no different than any other type of design. Use your knowledge of how colors work together and come up with a creation users will love.
About The Author
Eleanor Hecks is the Editor-in-Chief of Designerly Magazine, an online publication dedicated to providing in-depth content from the design and marketing industries. When she's not designing or writing code, you can find her exploring the outdoors with her husband and dog in their RV, burning calories at a local Zumba class, or curled up with a good book with her cats Gem and Cali.
You can find more of Eleanor's work at www.eleanorhecks.com.