7

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?

Thanks.

Improve this question

3 Answers 3

Reset to default
9

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.

Improve this answer
8
  • I think that it would be great as well if you explain as well what is the vaule of white and black, red green and blue. And explain about difference between CYMK and RGB.
    – Littlemad
    Jan 21, 2011 at 3:28
  • @Littlemad: graphicdesign.stackexchange.com/questions/60/…
    – squillman
    Jan 21, 2011 at 3:33
  • Actually, I do know what HSB, RGB and CYMK means. What I do not know is how to choose the right color to get the wanted effect. Anyway, thanks for your complete answer.
    – Jichao
    Jan 21, 2011 at 3:54
  • @Jichao Ah, I see. Then my answer is that it's a combination of knowledge of design theory and experience.
    – squillman
    Jan 21, 2011 at 3:57
  • 1
    I don't think this is worth its own answer, but just to comment that I can't see any good reason for using hex notation in this context. And little good reason in any case - see also my SO question: stackoverflow.com/questions/1171422/…
    – e100
    Jan 21, 2011 at 9:34
1

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

Improve this answer
-1

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:

alt text

Improve this answer
2
  • 3
    This explanation is incorrect.
    – e100
    Jan 20, 2011 at 18:28
  • 4
    This has nothing to do with the 256 colors displayable with 8 bit. The #xxxxxx-value represents 24 Bit-colors. The answer is simply wrong. squillman's answer is better.
    – Mnementh
    Jan 20, 2011 at 18:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.