Graphic Design for the Web

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:

• Hexadecimal numbers
• 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.

FFFFFF R=255 G=255 B=255

FFFFCC R=255 G=255 B=204

FFFF99 R=255 G=255 B=153

CCFFFF R=204 G=255 B=255

FFFF66 R=255 G=255 B=102

CCFFCC R=204 G=255 B=204

FFFF33 R=255 G=255 B=051

CCFF99 R=204 G=255 B=153

FFFF00 R=255 G=255 B=000

FFCCFF R=255 G=205 B=255

99FFFF R=153 G=255 B=255

CCFF00 R=204 G=255 B=102

FFCCCC R=255 G=204 B=204

99FFCC R=153 G=255 B=204

FFFF33 R=204 G=255 B=051

FFCC99 R=255 G=204 B=153

99FF99 R=153 G=255 B=153

CCFF00 R=204 G=255 B=000

CCFFFF R=204 G=204 B=255

66FFFF R=102 G=255 B=255

FFCC66 R=255 G=204 B=102

99FF66 R=153 G=255 B=102

CCCCCC R=204 G=204 B=204

66FFCC R=102 G=255 B=204

FFCC33 R=255 G=204 B=051

99FF33 R=153 G=255 B=051

CCCC99 R=204 G=204 B=153

66FF99 R=102 G=255 B=153

FFCC00 R=255 G=204 B=000

99FF00 R=153 G=255 B=000

FFCC33 R=255 G=204 B=051

99CCFF R=153 G=204 B=255

33FFFF R=051 G=255 B=255

CCCC66 R=204 G=204 B=102

66FF66 R=102 G=255 B=102

FF99CC R=255 G=153 B=204

99CCCC R=153 G=204 B=204

33FFCC R=051 G=255 B=204

CCCC33 R=204 G=204 B=051

66FF33 R=102 G=255 B=051

FF9999 R=255 G=153 B=153

99CC99 R=153 G=204 B=153

33FF99 R=051 G=255 B=153

CCCC00 R=204 G=204 B=000

66FF00 R=102 G=255 B=000

CC99FF R=204 G=153 B=255

66CCFF R=102 G=204 B=255

00FFFF R=000 G=255 B=255

FF9966 R=255 G=153 B=102

99CC66 R=153 G=204 B=102

33FF66 R=051 G=255 B=102

CC99CC R=204 G=153 B=204

66CCCC R=102 G=204 B=204

00FFCC R=000 G=255 B=204

FF9933 R=255 G=153 B=051

99CC33 R=153 G=204 B=051

33FF33 R=051 G=255 B=051

CC9999 R=204 G=153 B=153

66CC99 R=102 G=204 B=153

00FF99 R=000 G=255 B=153

FF9900 R=255 G=153 B=000

99CC00 R=153 G=204 B=000

33FF00 R=051 G=255 B=000

FF66FF R=255 G=102 B=255

9999FF R=153 G=153 B=255

33CCFF R=051 G=204 B=255

CC9966 R=204 G=153 B=102

66CC66 R=102 G=204 B=102

00FF66 R=000 G=255 B=102

FF66CC R=255 G=102 B=204

9999CC R=153 G=153 B=204

33CCCC R=051 G=204 B=204

CC9933 R=204 G=153 B=051

66CC33 R=102 G=204 B=051

00FF33 R=000 G=255 B=051

FF6699 R=255 G=102 B=153

999999 R=153 G=153 B=153

33CC99 R=051 G=204 B=153

CC9900 R=204 G=153 B=000

66CC00 R=102 G=204 B=000

00FF00 R=000 G=255 B=000

CC66FF R=204 G=102 B=255

6699FF R=102 G=153 B=255

00CCFF R=000 G=204 B=255

FF6666 R=255 G=102 B=102

999966 R=153 G=153 B=102

33CC66 R=051 G=204 B=102

CC66CC R=204 G=102 B=204

6699CC R=102 G=153 B=204

00CCCC R=000 G=204 B=204

FF6633 R=255 G=102 B=051

999933 R=153 G=153 B=051

33CC33 R=051 G=204 B=051

CC6699 R=204 G=102 B=153

669999 R=102 G=153 B=153

00CC99 R=000 G=204 B=153

FF6600 R=255 G=102 B=000

999900 R=153 G=153 B=000

33CC00 R=051 G=204 B=000

FF33FF R=255 G=051 B=255

9966FF R=153 G=102 B=255

339966 R=051 G=153 B=255

CC6666 R=204 G=102 B=102

669966 R=102 G=153 B=102

00CC66 R=000 G=204 B=102

FF33CC R=255 G=051 B=204

9966CC R=153 G=102 B=204

3399CC R=051 G=153 B=204

CC6633 R=204 G=102 B=051

669933 R=102 G=153 B=051

00CC33 R=000 G=204 B=051

FF3399 R=255 G=051 B=153

996699 R=153 G=102 B=153

339999 R=051 G=153 B=153

CC6600 R=204 G=102 B=000

669900 R=102 G=153 B=000

00CC00 R=000 G=204 B=000

CC33FF R=204 G=051 B=255

66FFFF R=102 G=255 B=255

0099FF R=000 G=153 B=255

FF3366 R=255 G=051 B=102

996666 R=153 G=102 B=102

339966 R=051 G=153 B=102

CC33CC R=204 G=051 B=204

6666CC R=102 G=102 B=204

0099CC R=000 G=153 B=204

FF3333 R=255 G=051 B=051

996633 R=153 G=102 B=051

339933 R=051 G=153 B=051

CC3399 R=204 G=051 B=153

666699 R=102 G=102 B=153

009999 R=000 G=153 B=153

FF3300 R=255 G=051 B=000

996600 R=153 G=102 B=000

339900 R=051 G=153 B=000

FF00FF R=255 G=000 B=255

9933FF R=153 G=051 B=255

3366FF R=051 G=102 B=255

CC3366 R=204 G=051 B=102

666666 R=102 G=102 B=102

009966 R=000 G=153 B=102

FF00CC R=255 G=000 B=204

9933CC R=153 G=051 B=204

3366CC R=051 G=102 B=204

CC3333 R=204 G=051 B=051

663333 R=102 G=051 B=051

009933 R=000 G=153 B=051

FF0099 R=255 G=153 B=051

993399 R=153 G=051 B=153

336699 R=051 G=102 B=153

CC3300 R=204 G=051 B=000

666600 R=102 G=102 B=000

009900 R=000 G=153 B=000

CC00FF R=204 G=000 B=255

6633FF R=102 G=051 B=255

0066FF R=000 G=102 B=255

FF0066 R=255 G=000 B=102

993366 R=153 G=051 B=102

336666 R=051 G=102 B=102

CC00CC R=204 G=000 B=204

663366 R=102 G=051 B=102

0066CC R=000 G=102 B=204

FF0033 R=255 G=000 B=051

993333 R=153 G=051 B=051

336633 R=051 G=102 B=051

CC0099 R=204 G=000 B=153

663399 R=102 G=051 B=153

006699 R=000 G=102 B=153

FF0000 R=255 G=000 B=000

993300 R=153 G=051 B=000

336600 R=051 G=102 B=000

9900FF R=153 G=000 B=255

3333FF R=051 G=051 B=255

CC0066 R=204 G=000 B=102

663366 R=102 G=051 B=102

006666 R=000 G=102 B=102

9900CC R=153 G=000 B=204

3333CC R=051 G=051 B=204

CC0033 R=204 G=000 B=051

663333 R=102 G=051 B=051

006633 R=000 G=102 B=051

990099 R=153 G=000 B=153

333399 R=051 G=051 B=153

CC0000 R=204 G=000 B=000

663300 R=102 G=051 B=000

006600 R=000 G=102 B=000

6600FF R=102 G=000 B=255

0033FF R=000 G=051 B=255

990066 R=153 G=000 B=102

333366 R=051 G=051 B=102

6600CC R=102 G=000 B=204

0033CC R=000 G=051 B=204

990033 R=153 G=000 B=051

333333 R=051 G=051 B=051

660099 R=102 G=000 B=153

003399 R=000 G=051 B=153

990000 R=153 G=000 B=000

333300 R=051 G=051 B=000

3300FF R=051 G=000 B=255

660066 R=102 G=000 B=102

003366 R=000 G=051 B=102

3300CC R=051 G=000 B=204

660033 R=102 G=000 B=051

003333 R=000 G=051 B=051

330099 R=051 G=000 B=153

660000 R=102 G=000 B=000

003300 R=000 G=051 B=000

0000FF R=000 G=000 B=255

330066 R=051 G=000 B=102

0000CC R=000 G=000 B=204

330033 R=051 G=000 B=051

000099 R=000 G=000 B=102

330000 R=051 G=000 B=000

000066 R=000 G=000 B=102

000033 R=000 G=000 B=051

000000 R=000 G=000 B=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.

blog comments powered by Disqus