CSS Colors Big Part of Web Design

May 6, 2014

Yesterday I told you Major Elements of Graphics Unleashed Web Site Get Design Refresh. While there were some graphics involved in the changes, there were many more edits to the style sheet of the Graphics Unleashed Shopping Cart. Of course I don’t expect you’ll be editing the style sheet for our site, though it is good for all designers to understand the basics of color changes in style sheets and HTML code.

CSS Color Change

Above is one small snippet of old style sheet on the left and the new style sheet on the right. In this instance we are only looking at the line in the middle for “background-color” as it specifies the color for the background of a table found throughout the shopping cart. I drew an arrow between the two using the color and new colors. So it goes from the medium gray to a light blue.

If you are not familiar with colors specified as hexidecimal numbers, let’s break it down a bit. The six characters you see are actually three sets of two numbers with the first two being red, the next two green and the last two blue. A pair of 00 would be black and ff would be white. In total there are 256 possible values for that pair of characters.

While you may not be familiar with hex color codes, you are likely somewhat familiar with RGB decimal color codes. So if I said R127 G127 B125 instead of #7f7f7d, would that be more familiar to you? They are exactly the same color.

What can we tell from the first number? Each of the three pairs of numbers is more or less identical so it comes to me as no surprise that it represents a gray color. And the numbers are about halfway between 00 and ff so I expected a medium gray.

Now look at the new number. The last pair of ff tells us the blue is at full strength and the other numbers are not as high so I expected a blue shade. I’m also not surprised to get a lighter shade since the first two sets of numbers are fairly high.

Hex Color CorelDRAW

For those who prefer a more visual way to look at colors, you can use the Select Color dialog box in CorelDRAW as shown above. If you are not a CorelDRAW user, most other software allows you to specify colors in hecidecimal values. On the left side of this dialog, we can move the selector around to exactly the color we want. On the right side of the dialog box are both decimal and hexidecimal values for that color. When I have a color I like, I often use this dialog box to give me the desired hex value.

Of course you can also use this in reverse. See a color you like on a Web site and you can plug in the hexidecimal values to CorelDRAW so the same color can be used in your artwork. Even if working with colors specified as hex values isn’t a big part of your workflow, it is good to have at least a basic understanding of how they work.

Post Discussion

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You May Also Like…

Seamless Textures Unleashed

Seamless Textures Unleashed Now on Facebook

Over the years, we've had a number of Web sites in different areas that were all managed on the Graphics Unleashed Facebook page. Two months ago we rolled out a separate Facebook page for Vehicle Templates Unleashed. Now we have created a Facebook page for Seamless...

View Full Post
Tech Disasters

Week of Tech Disasters and Solutions

The local weather was spectacular a couple of weeks ago and I wanted to take a day off to have some fun. So I planned a day of scuba diving that Friday to end the week on a high note. The diving went well, but the day before was the beginning of some tech disasters....

View Full Post

Foster D. Coburn III

Foster D. Coburn III built his first Web site in 1995 and he has been working exclusively in WordPress since 2013. He has used the Divi theme exclusively since 2015. Earlier in his career he was the author of 13 best-selling books on CorelDRAW and has been a contributor to numerous technology and graphics-related magazines. Foster has taken many projects, including this Web site, from the early design stage through to a finished piece. He has been a featured speaker at many graphics conferences.

Recent Posts

    Feed has no items.

Web Design Blog

    Feed has no items.
Build Divi WordPress Site
WordPress Site Care
Divi Tools
Graphics Unleashed Logo