The value of color is immeasurable for a designer of any aptitude. In the world of website design, it can be an important selling point for both the designer and end-user alike. Any range from vibrant reds and yellows to shallow grays can make an impact on the overall experience provided by the content. Color is the proverbial hammer that can hit the design nail on the head.
Using CSS, a designer can take generally bland HTML code and transform it into something that really makes the code pop on the page. Using simple color definitions such as “red,” “blue,” or “orange” can definitely do the trick.
However, there is a massive world of color out there — with just the perfect shade you need. In this easy-to-follow guide, you will learn how to unlock those color options using the power of CSS Hex Codes.
What Exactly is a Hex Color?
The word “hex” stands for hexadecimal (aka “base 16”), where the values of 0 to 15 are represented by a single character — 0, 1, .., 9, A, B, C, D, E, and F. Two characters, 00 to FF, represent 256 values. To represent the red, green, and blue (RGB) components of a single color CSS uses two hex characters, from 000000 (black) to FFFFFF (white).
Through the use of these individual color ranges, the values can be combined to shift the color tint and shade to something that matches just what the designer wants. CSS Hex color codes can be confusing at first, but this guide can provide clarity.
The Structure of a CSS Hex Color Code
CSS hex color codes are a six-digit number, preceded by a hash (or pound) mark. However, there is more to it than just numbers. Take the example below to start. This is the Hex code for a bright lime green is
#00FF22
Before long you’ll automatically see this as # 00 FF 22, a hash mark (denoting that hex values follow) and then red, green, and blue values. Base 16 is used because only two characters are needed to count to 256; in base 10 — for example — it’d be 000 256 022, nine characters instead of six. In the early days of computers those could add up, so hex it is.
So, summarizing hex, instead of counting to 15 in base 10, like this:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
We use base sixteen, or hex, like this:
0 1 2 3 4 5 6 7 8 9 A B C D E F
In essence, the hex color in CSS allows for a large pool of values to better refine the color selection process through the RGB spectrum. In the next area, you can see just how this works in action, as well as how easy it is to use.
Using CSS Hex Colors
Knowing how hexadecimal numbering works is great, but the real fun comes in using it for your own design needs. Note the value of the “border-color” property is specified in the last line of the following code.
div {
text-align: center;
padding: 20px;
margin: 0 auto;
display: inline-block;
border-width: 5px;
border-style: solid;
border-color: red;
}In this CSS code segment, you have a single div with various properties applied for styling. Take note of the last property, border-color which has the value red. This produces the following output on the HTML page.
Here’s the same code, but with the property value of border-color specified with a CSS Hex color code #FF0000 (or 256 red, 0 blue, 0 green) instead.
div {
text-align: center;
padding: 20px;
margin: 0 auto;
display: inline-block;
border-width: 5px;
border-style: solid;
border-color: #FF0000;
}If #FF0000 does the same job as red, why bother using CSS Hex codes and not direct color names? The short answer is that there are no color names for all 16,777,216 possible color combinations. You need the hex system to unlock all those extra color options.
Why CSS Hex Codes are Useful
Let’s see another example of CSS Hex codes in action.
Continuing with our example div with a red border:
What happens when the div background color has changed because the client asks for the site to have a bright red background?
Now the red border is invisible as it is lost in the background color This makes it quite useless as it is no longer visible to the user.
With the power of CSS Hex color codes, you can make this design request work. Because hex color codes cover a wide range of the RGB spectrum, you can alter the hex code to provide another shade (or intensity) of red. For example, take the new border value provided below.
border-color: #A31212;
This new hex color value will use a reddish color that’s made up of red A3 (or 163 in base 10), green 12, blue 12, resulting in the following border being applied.
Just like that, you have the red border back, albeit in a darker shade to allow it to be seen by the end-user. While making an all-red website might be a bit much, this example does show how awesome CSS Hex color codes can be. Keep in mind that even small changes to simple color can provide massive impacts on how page elements work together.
Take the following example. What if you wanted a white background with orange coloring on the borders?
div {border-color: orange;}
html {background-color: white;}
This would provide the following;
Instead of just using the named values of “white” and “orange” you could instead use those hex color codes to alter the tones and shades of those colors to produce something with a warmer appeal.
div {border-color: #c4740c;}
html {background-color: #e6ceae;}
This now provides the following color.
This color combination gives a softer overall appearance and can impact some user’s ability to read the content.
Where to Go From Here?
Working with colors is just a part of the CSS design process. A massive wealth of design options exist to not just decorate the HTML content, but also increase the general efficiency of the work. This is where learning more about color tone and shade can really help. Taking a look at classical color concepts such as “warm” and “cold” aspects and color theory can make a huge impact on the perceived professionalism of your own work.
That kind of study can lead to another area of expertise for you to focus on in the job market. Popular and effective user experience/user interface (UX/UI) designers not only know web design, but also the more human workings of what makes a site be perceived as effective. Color selection has a definite meaning and those underlying ideas cross over to the behavioral aspect of design.
Hewing to the medical aspects of design, consider the prevalence of all the types of color-blindness and how that affects color palettes (related combinations) which allow all users to see the customer’s content.
If you want to explore other areas of CSS design, check out the CSS Content Hub for a range of growing topics. Each one is designed to be easy to read and implement for beginners. Take the full range and see what wonderful ideas you can come up with by connecting everything together. Go ahead and paint the town with whatever CSS Hex Color you want!
______________________________________________________________________
Why stop at just web development. More and more, the power of programming is empowering people to do even more with their designs. If you are looking to fly farther and stronger than ever before, take the first steps with code. Learning to code can help you open doors to those new possibilities of a better you. Embrace Udacity’s Intro to Programming Nanodegree today to start the journey.
