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 PermissionBrowser-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. |
