The Motive Web Design Glossary

websafe colours, web palette

The websafe palette consists of 216 colours that when displayed on a 256-colour (8 bit) monitor will be displayed as continuous flat colours.

These colours will be rendered as flat colours on both Windows and Macintosh platforms - as to hue and saturation, well...

Hexadecimal system (base 16)

The hexadecimal counting system consists of 16 unique symbols;

• numbers from 0-9
• letters from A-F

Counting in hexadecimal: 0 1 2 3 4 5 6 7 8 9 A B C D E F, where 0 is null and F is the highest value.

Specifying websafe colours (using hexadecimal notation)

Colours in HTML are specified by a hash (#) followed by a six-digit hexadecimal number. This number consists of three 2-digit numbers corresponding to red, green and blue (RGB) values.

#XXxxxx = red #xxXXxx = green #xxxxXX = blue

The websafe (216 colour) palette consists of a subset of the possible hexadecimal combinations and is restricted to three pairs of the same value at 20% increments, i.e.:

00 33 66 99 CC FF

Examples:

#000000 = black #FF0000 = 100% red #00FF00 = 100% green #0000FF = 100% blue #FFFFFF = white

References and further reading

• Colour scheme accessibility checkers/simulators
  Tools that simulate common visual impairments or enable colour schemes to be evaluated.
  • Algorithm for determining colour visibility (W3C Working Draft)
  • Colorblind webpage filter (Matthew Wickline)
  • Colour Contrast Analyser (Gez Lemon, Juicy Studio)
    A calculator for determining the legibility of text against a background colour (using a provisional algorithm suggested by the W3C for comparing colour values).
  • Colour Contrast Analyser Firefox Extension/Add-on (Gez Lemon, Juicy Studio)
    In-page tool for reporting on background to foreground: luminosity contrast ratio; difference in brightness; and difference in colour.
  • Colour contrast check (Jonathan Snook)
    Use sliders or hexadecimal codes to dial-up text and background colours with real-time preview and colour contract compliance rating.
  • Greybit: Converts a webpage to greyscale/black-and-white (Greybit)
    Useful for testing colour contrast.
  • Luminosity Contrast Ratio Analyser (Gez Lemon, Juicy Studio)
    A calculator for determining the legibility of text against a background colour (using a provisional algorithm suggested by the W3C for comparing perceived colour brightness).
  • Vischeck: Color blindness simulator (Vischeck)
• How to make figures and presentations that are friendly to color blind people (J*Fly: Data depository for Dropsophila researchers)
• Color Glossary (SAP Design Guild)
  Colour and visual perception terms used in graphic design, web design and usability.
• Screen/web colour scheme generation tools
  • Color Scheme Chooser GX (Site Pro Central)
    Based on the colour theory pioneered by Johannes Itten in the mid-1900s.
  • Color Scheme Designer (wellstyled.com)
    Choose a colour to generate the corresponding, mono, contrast, triad, tetrad and analogic colour complements. Then dial up a variation from pastel, dark pastel, light pastel, contrast or pale. Finally, emulate how those with varying types of colour perception disorders will view your colour scheme.
  • Color Schemer Online
  • Hexadecimal Colour Calculation (splintered)
    Enter a hexadecimal code to generate tints of the original and corresponding complementary colours (along with hexadecimal codes).
  • Using hexadecimal color codes (Davesite)
    Provides hexadecimal colour examples.
  • Visibone Webmasters Color Lab
    Online resource allowing you to select and compare websafe colours and display the corresponding hexadecimal values.
  • Web-smart palette (morecrayons.com)
    Expanding to 4096 colours by using the ‘in-between’ hexadecimal value pairs; 11, 22, 44, 55, etc.
• Web builders’ Toolkit: Color Tools (The Crispen Family)
  Directory of colour scheme creation tools and articles on colour theory.

Related terms: dithering

Motive Web Design Glossary Trivia