Last update:
April 30, 1998

maw banner

The Mathematics of Web Design

The Biology Project

Screen Resolution

Computer monitors typically display at:
  • 72 pixels per inch
What does "pixel" stand for?

Typical screen resolutions:

  • 640 x 480 pixels
  • 800 x 600 pixels
What are the implications for
  • web page display?
  • printing web pages?
  • scanning pictures & slides for the web?

Bit Depth in Displays and Images

In computer displays and digital images,

  • R is for Red
  • G is for Green
  • B is for Blue
These colors are "additive" and when mixed together at full intensity, give white. Different mixtures give different colors.

What color do you get if you have no red, green or blue?

The number of colors in an image or display is called bit-depth.

A 1-bit display has 21 colors.

An 8-bit display has 28 colors.

An 8-bit image contains 256 colors. Why do none of the pixels have a value of 256?

A 24-bit display has 224 colors.

File Size & Format

A digital image is a rectangular array of numbers. Each pixel has an x-y location and a value.

  • larger image dimensions = larger file size
  • higher bit depth = larger file size

  • larger file size = longer download time

In order to increase efficiency of images travelling on the web, they are compressed into either GIF or JPEG format.

GIF uses LZW compression, which
  • recognizes and compresses repeated patterns using a "data dictionary"--patterns are entered into the dictionary and reused when they reappear in the image
  • limited to 1- to 8-bit images
  • is "lossless"
  • can achieve compression ratios of 40:1 or better
JPEG compression:
  • can compress continuous-tone image data by using a collection of algorithms that can be controlled by the user to emphasize quality or compression
  • can compress up to 24-bit images
  • is "lossy"
  • can achieve compression ratios of 20:1 or better
Which file format would best compress each image below?

Hexadecimal Codes for Color

The "browser-safe" palette has 216 colors

browser-safe palette organized by hue

Hexadecimal numbers convert RGB values to something that web browsers can understand. Hexadecimal is derived from base 16 mathematics--we are used to dealing with base 10 mathematics.

Base 10 0123456789101112131415
Base 16 0123456789ABCDEF

The good news is...

all RGB values in the browser-safe palette are combinations of the same six color values--which are 20% increments of red, green and blue.

% Color Value020406080100
Color Value051102153204255
Hex Code00336699CCFF

That means you can mix and match these browser-safe hex values to make browser safe text and backgrounds in HTML.
#33 66 00a little red (20%), more green (40%), and no blue (0%)
#33 66 99a little red (20%), more green (40%), and even more blue (60%)

Other, less mathematical ways of choosing hexadecimal colors

Color Serve Java[broken link, 2004/12/04]
Mediarama's RGB-HEX Converter

All contents copyright © 1998. All rights reserved.

Color display and bit-depth images used with permission of Patrick Lynch and Sarah Horton from the Yale Web Style Guide.