Home Graphic Design Page 4 - Graphic Design for the Web

# Graphic Design for the Web

Aside from HTML, graphics are what make the web "look good." Many sites will turn a surfer away if they don't have pleasing graphics. We will cover some of the basic design tips and tricks to help your site stand out.

Author Info:
By: Rob Foster
Rating:  / 9
March 24, 1999

SEARCH DEVARTICLES

Graphic Design for the Web - RGB and HEX
(Page 4 of 4 )

Hex is derived from the Greek word "hexa," meaning six (6). Decimal means 10. So, hexadecimal is a word meaning "sixteen" (16).

In the hexadecimal system, 6 letters are added to the standard 0-9 Arabic Numerals, to give you a numbering system with base 16, instead of base ten.

Decimal: 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Hexadecimal: 0 1 2 3 4 5 6 7 8 9 A B C D E F

How does Hex pertain to HTML and color?

A hexadecimal color code is a series of six characters, for instance 0FCB3E or 954AD2, which identify a specific color. These codes are used throughout HTML pages to identify what color each element should be. For instance, they can be used to make certain words red, green, blue, or any other color that is desired. However, to use these codes within HTML, you must know two things:

• The RGB color model
Using Hex to display color

All colors are mixtures of the three primary colors: red, green, and blue. A hexadecimal color code uses a six digit number. The first two digits are the value for red, the next two for green, and the last two for blue. This is called the RGB (Red, Green, Blue) color model.

Example:
Hex Code "808080" = Red 80, Green 80, Blue 80

 80 80 80 = 808080 Red Green Blue = Gray

This is a mixture of equal amounts of the three colors. The result is a medium gray.

Each value uses two hexadecimal digits, giving you 256 possibilities for each color. Since there are three colors, the total number of possible colors is 256 X 256 X 256 = over 16 million.

Creating Colors

 Black - If all values are set to 0, the screen will be black. White - If they are set to the maximum (hex FF, decimal 255), the screen will be white. Primary Colors - To produce pure colors, leave two colors at 0, and set a value for the third color (the desired color). Mixing Colors - Set values for two or three of the colors to obtain colors that are a mixture of the primary colors. Warning: Mixing colors in HTML is directly opposite from mixing colors with paint. Low amounts of color make dark shade; high amounts of color make bright shades. With HTML, you are mixing light, not paint.

From: Hexadecimal Color Tutorial, by Los Trancos Systems, LLC - Used by Permission

Browser-Safe Colors?

Macintosh and the PC platforms have system palettes with 256 different colors. However, there are 40 colors that differ on both platforms. This means that 216 colors are the same in both platforms. It is a helpful hint to use these 216 colors in your web design, so that your pages and graphics will look the same on both platforms. Graphics that are viewed with 256 color depth shall appear the same as anybody with a higher color depth.

The following is a complete list of the 216 different "Browser-Safe" colors organized by Value. Included is the Hex code, and RGB values.

 FFFFFFR=255G=255B=255 FFFFCCR=255G=255B=204 FFFF99R=255G=255B=153 CCFFFFR=204G=255B=255 FFFF66R=255G=255B=102 CCFFCCR=204G=255B=204 FFFF33R=255G=255B=051 CCFF99R=204G=255B=153 FFFF00R=255G=255B=000 FFCCFFR=255G=205B=255 99FFFFR=153G=255B=255 CCFF00R=204G=255B=102 FFCCCCR=255G=204B=204 99FFCCR=153G=255B=204 FFFF33R=204G=255B=051 FFCC99R=255G=204B=153 99FF99R=153G=255B=153 CCFF00R=204G=255B=000 CCFFFFR=204G=204B=255 66FFFFR=102G=255B=255 FFCC66R=255G=204B=102 99FF66R=153G=255B=102 CCCCCCR=204G=204B=204 66FFCCR=102G=255B=204 FFCC33R=255G=204B=051 99FF33R=153G=255B=051 CCCC99R=204G=204B=153 66FF99R=102G=255B=153 FFCC00R=255G=204B=000 99FF00R=153G=255B=000 FFCC33R=255G=204B=051 99CCFFR=153G=204B=255 33FFFFR=051G=255B=255 CCCC66R=204G=204B=102 66FF66R=102G=255B=102 FF99CCR=255G=153B=204 99CCCCR=153G=204B=204 33FFCCR=051G=255B=204 CCCC33R=204G=204B=051 66FF33R=102G=255B=051 FF9999R=255G=153B=153 99CC99R=153G=204B=153 33FF99R=051G=255B=153 CCCC00R=204G=204B=000 66FF00R=102G=255B=000 CC99FFR=204G=153B=255 66CCFFR=102G=204B=255 00FFFFR=000G=255B=255 FF9966R=255G=153B=102 99CC66R=153G=204B=102 33FF66R=051G=255B=102 CC99CCR=204G=153B=204 66CCCCR=102G=204B=204 00FFCCR=000G=255B=204 FF9933R=255G=153B=051 99CC33R=153G=204B=051 33FF33R=051G=255B=051 CC9999R=204G=153B=153 66CC99R=102G=204B=153 00FF99R=000G=255B=153 FF9900R=255G=153B=000 99CC00R=153G=204B=000 33FF00R=051G=255B=000 FF66FFR=255G=102B=255 9999FFR=153G=153B=255 33CCFFR=051G=204B=255 CC9966R=204G=153B=102 66CC66R=102G=204B=102 00FF66R=000G=255B=102 FF66CCR=255G=102B=204 9999CCR=153G=153B=204 33CCCCR=051G=204B=204 CC9933R=204G=153B=051 66CC33R=102G=204B=051 00FF33R=000G=255B=051 FF6699R=255G=102B=153 999999R=153G=153B=153 33CC99R=051G=204B=153 CC9900R=204G=153B=000 66CC00R=102G=204B=000 00FF00R=000G=255B=000 CC66FFR=204G=102B=255 6699FFR=102G=153B=255 00CCFFR=000G=204B=255 FF6666R=255G=102B=102 999966R=153G=153B=102 33CC66R=051G=204B=102 CC66CCR=204G=102B=204 6699CCR=102G=153B=204 00CCCCR=000G=204B=204 FF6633R=255G=102B=051 999933R=153G=153B=051 33CC33R=051G=204B=051 CC6699R=204G=102B=153 669999R=102G=153B=153 00CC99R=000G=204B=153 FF6600R=255G=102B=000 999900R=153G=153B=000 33CC00R=051G=204B=000 FF33FFR=255G=051B=255 9966FFR=153G=102B=255 339966R=051G=153B=255 CC6666R=204G=102B=102 669966R=102G=153B=102 00CC66R=000G=204B=102 FF33CCR=255G=051B=204 9966CCR=153G=102B=204 3399CCR=051G=153B=204 CC6633R=204G=102B=051 669933R=102G=153B=051 00CC33R=000G=204B=051 FF3399R=255G=051B=153 996699R=153G=102B=153 339999R=051G=153B=153 CC6600R=204G=102B=000 669900R=102G=153B=000 00CC00R=000G=204B=000 CC33FFR=204G=051B=255 66FFFFR=102G=255B=255 0099FFR=000G=153B=255 FF3366R=255G=051B=102 996666R=153G=102B=102 339966R=051G=153B=102 CC33CCR=204G=051B=204 6666CCR=102G=102B=204 0099CCR=000G=153B=204 FF3333R=255G=051B=051 996633R=153G=102B=051 339933R=051G=153B=051 CC3399R=204G=051B=153 666699R=102G=102B=153 009999R=000G=153B=153 FF3300R=255G=051B=000 996600R=153G=102B=000 339900R=051G=153B=000 FF00FFR=255G=000B=255 9933FFR=153G=051B=255 3366FFR=051G=102B=255 CC3366R=204G=051B=102 666666R=102G=102B=102 009966R=000G=153B=102 FF00CCR=255G=000B=204 9933CCR=153G=051B=204 3366CCR=051G=102B=204 CC3333R=204G=051B=051 663333R=102G=051B=051 009933R=000G=153B=051 FF0099R=255G=153B=051 993399R=153G=051B=153 336699R=051G=102B=153 CC3300R=204G=051B=000 666600R=102G=102B=000 009900R=000G=153B=000 CC00FFR=204G=000B=255 6633FFR=102G=051B=255 0066FFR=000G=102B=255 FF0066R=255G=000B=102 993366R=153G=051B=102 336666R=051G=102B=102 CC00CCR=204G=000B=204 663366R=102G=051B=102 0066CCR=000G=102B=204 FF0033R=255G=000B=051 993333R=153G=051B=051 336633R=051G=102B=051 CC0099R=204G=000B=153 663399R=102G=051B=153 006699R=000G=102B=153 FF0000R=255G=000B=000 993300R=153G=051B=000 336600R=051G=102B=000 9900FFR=153G=000B=255 3333FFR=051G=051B=255 CC0066R=204G=000B=102 663366R=102G=051B=102 006666R=000G=102B=102 9900CCR=153G=000B=204 3333CCR=051G=051B=204 CC0033R=204G=000B=051 663333R=102G=051B=051 006633R=000G=102B=051 990099R=153G=000B=153 333399R=051G=051B=153 CC0000R=204G=000B=000 663300R=102G=051B=000 006600R=000G=102B=000 6600FFR=102G=000B=255 0033FFR=000G=051B=255 990066R=153G=000B=102 333366R=051G=051B=102 6600CCR=102G=000B=204 0033CCR=000G=051B=204 990033R=153G=000B=051 333333R=051G=051B=051 660099R=102G=000B=153 003399R=000G=051B=153 990000R=153G=000B=000 333300R=051G=051B=000 3300FFR=051G=000B=255 660066R=102G=000B=102 003366R=000G=051B=102 3300CCR=051G=000B=204 660033R=102G=000B=051 003333R=000G=051B=051 330099R=051G=000B=153 660000R=102G=000B=000 003300R=000G=051B=000 0000FFR=000G=000B=255 330066R=051G=000B=102 0000CCR=000G=000B=204 330033R=051G=000B=051 000099R=000G=000B=102 330000R=051G=000B=000 000066R=000G=000B=102 000033R=000G=000B=051 000000R=000G=000B=000

 DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.