Home arrow Graphic Design arrow Page 4 - Graphic Design for the Web
GRAPHIC DESIGN

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: 3 stars3 stars3 stars3 stars3 stars / 9
March 24, 1999
TABLE OF CONTENTS:
  1. · Graphic Design for the Web
  2. · Web Colors, GIFs and More
  3. · What about JPEG's?
  4. · RGB and HEX

print this article
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:

  • 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
GRAPHIC DESIGN ARTICLES

- Customizing Wordpress Favicons and Gravatars
- Building Corner Effects with Transparent Bac...
- 3D Graphics Technology: VRML Part I - Introd...
- Creating Visual Effects
- Web Page Design Overview
- Creating Artistic Photographs
- Working with Tools in Paint Shop Pro 8
- Using HTML Quickform for Form Processing
- Introduction to Adobe FrameMaker
- WebLogic Workshop, WebLogic Platform, and th...
- Planning the Site
- Working with Web Services
- WebLogic Workshop Application Development Ba...
- Scanning Images for Web Use
- Web Graphics Overview

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials