: 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

@Angie364

One of the really good website by adobe is kuler.adobe.com/. I use it often to come up with color scheme for the web sites I design.

Vote Up Vote Down

@Murray664

Hex codes came from 256 web colours, back when monitors could only show 256 colours. each number/letter goes from 0 to F - 0 1 2 3 4 5 6 7 8 9 A B C D E F
#000000 is Black
#FFFFFF is White
#F9F9F9 is a very light grey

#D0D0D0 is a middle of the ground darker grey

Here is an image that'll help you understand it:

Vote Up Vote Down

@Karen819

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.

Vote Up Vote Down