Trouble Shooting Neutral ( Shades of Grey) Hex Colors.

Different eyes, monitors and browser will interpet neutral colors differently.

All people have their own unique sensitivity to color. In additon, it is important to keep in mind, all monitors and browser will alter any color into a unique mixture.

Bright bold colors can look slightly less bright and bold depending on the monitor. But a neutral color can look radically different from browser to browser. Neutrals can also be perceived as "reddish" or "bluish" or "warmer" or "cooler" depending on any factors. So when it comes to choosing an light, neutral color it is really hard to determine how a human eye or a computer will *interpret* about the color you choose.

Sometimes I can spend hours sending different examples to clients without resolution.

I have come to the conclusion the best way solve this particluar problem is to let the client pick out several Hexadecimal colors using Colorlovers.com palette. Then the client will have several colors to test using the Firefox developer tool bar to see how these colors look in their website.

To do this:

Colorlovers:http://www.colourlovers.com/create

Click Create a Palatte >>Basic and choose your colors (see image 1.)

Next:

Download the Firefox developers tool bar from https://addons.mozilla.org/en-US/firefox/addon/60 by clicking "Add to Firefox" button

On restart,  in the new toolbar click CSS (see image 2.) >> Edit CSS

 

and select "defalut.css" (see image 3.)

 

 

 

 

This default.css contains all the styles for the site. You can make temporary changes to the presentation of the site in area.

 

For this next example I am going to try out a different grey for the module tables on the left  column for the HomeVet website:

In the "default.css" scroll down to:

 /*--------this is the styling module menus on the left and right*/    
.moduletable{
display:block;
background-color:#fafafa;
line-height:22px;
padding:10px 3px 25px 0px;
margin-bottom:1em }

This snipit code above declares all the properties for the module.

Find "background-color:#fafafa"

and change it (we are making the grey a bit darker)

to

background-color:#f7f7f7;

You will see the change happen real time on the website to your left.

(don't be alarmed if background elements disappear, they are still there)

If you don't like that color, use another from your Colorlovers palette and test it out.

These changes are not permanent and you will loose these changes if you navigate to another page.

If you want to make changes permanent, send the new hex number to your designer who can implement it inside the default.css