How To Make Your Logo Colors Web-Smart

Share this:

Have you ever noticed your logo colors look different from one screen to the next?

Maybe your orange appears more red on a Windows computer or your blue appears more purple when presented on safari than on a chrome browser?

The colors of your logo will change based on each computer monitor calibration of how it perceives color otherwise known as HEX codes. HEX means hexadecimal number and it is used to define colors for HTML code.  

There is a solution to ensure that your logo appears more or less THE SAME no matter where you’re viewing it. In this blog, we explain 2 ways to make sure your logo looks professional and consistent across all browsers, operating systems and monitor types. The first way is manually changing your code and the second is to refer to a standardized color chart.

1. Change Your HEX CODE

You will need to change your HEX color code.

To make any color web-smart you simply take the first letter/number of each pair in the HEX code and repeat it. 

A red HEX code of #ed7514 turns to #ee7711.

This expands the color range and ensures these colors show up more or less similar on different screens. 

For example, Supernova Sites logo color is a royal blue with HEX code #4743ea.

When we convert the blue to a web-safe color, we change the HEX code from #4743ea to #4444ee – repeating the first unit in the second unit placement. 

Before Changing HEX code:

After Changing HEX code:

Of course, the blue has slightly changed but the difference is so minimal to the human eye, that you can’t notice the difference. Problem solved! Now, you can be confident that the color in your logo will appear the same across the web, on different devices, browsers and monitors!

2. The Web-Smart Color Chart

There is a standardized color palette of 216 restricted colors that consistently display across all major browsers.

Check out the chart here.

Scanning down the chart, HEX code#6633FF would match best to our royal blue color.

Source: www.htmlcolorcodes.com/color-chart/web-safe-color-chart/

Later, technology became more adapted and the 216 palette grew to 4096 colors. The 4096 palette expanded the palette while keeping colors reasonably compatible.

You can find color choices for the 4096 palette here.

Source: www.ficml.org/jemimap/style/color/wheel.html

Choosing to use web-safe colors for your logo is helpful because they’re predictable, well-known, and easy to use. 

Did you try changing your HEX code or referring to the color palette charts? Let us know what solution worked best for you!

Subscribe

Subscribe for free resources, design tips, upcoming events and more!