How to choose the right color to get the wanted effect in web design?


For example, in this tutorial, how could the author know which color to choose for creating a navigation bar? Why did he/she know that the gradient from #d0d0d0 to #f9f9f9 would generate the following effect?

alt text

Where did these magic color code #xxxxx come from? Is there any principle, or is it only dependent on the experience?


1/23/2011 6:19:00 PM

Accepted Answer

The "magic color code #xxxxxx" is the hexadecimal RGB value of the color and is the standard format for representing color on the web (HTML and CSS). The first pair of digits is the hex value for red, second pair is hex for green and third pair is hex for blue. There are also names you can use for standard colors instead of using the hex format. You can see the list here.

Most design tools, and certainly the good ones, will help you to generate this value. In Photoshop if you choose to display the color window using Web Color Sliders you can see these values. You will also see it in the Color Picker in the box that has the # in front of it.

RGB values range from 0 - 255 which in hexadecimal is the range 0 - FF.

So if you have an RGB value of 181,210,16 (a somewhat pukey light olive green) your web (hex) color code would be #B5D210.

  • 181 decimal = B5 hex
  • 210 decimal = D2 hex
  • 16 decimal = 10 hex
  • Combine the hex values (in RGB order) and you have #B5D210

If you don't have a design tool that will generate hex values for you then you can do it manually with any scientific calculator or any of the plethora of conversion tools on the web.

By and large I'd say that nobody really knows off the top of their head that #d0d0d0 to #f9f9f9 makes a nice gradient (although this one's a bit easier to recognize given web design experience - equal RGB values will represent a grayscale color). They visualize what they want through design tools and either generate the values or edit them in based on what they design.

1/20/2011 7:33:00 PM