Good Color Combinations for the <BODY>
Standards Used, Assumptions Made.
- High contrast is required for readability.
- Light color backgrounds are best.
- Text should be black (or a very dark color).
- The colors should look good on 256 -color monitors as well.
(All of the colors suggested on this page are within the 256 basic colors, so they should look the same on 255-color monitors as they do on monitors with more colors.) - Link colors should be standard.
- The link color should be blue (or bluish)
- The visited link color should be purple (or redish).
JavaScript Background Color Chooser
If you are using a JavaScript-enabled browser, then you can see the topmost colors of each list.
Notes
- Just copy and paste one of these into your HTML page.
- Those marked with * are less acceptable and it would probably be better to avoid them.
- The lightest color background is at the top of each list.
Blue <BODY BGCOLOR=#CCFFFF TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> <BODY BGCOLOR=#99FFFF TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> <BODY BGCOLOR=#66FFFF TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> <BODY BGCOLOR=#33FFFF TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> <BODY BGCOLOR=#00FFFF TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> * <BODY BGCOLOR=#99CCFF TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> * <BODY BGCOLOR=#99CCCC TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> Blue-Green <BODY BGCOLOR=#66FFCC TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> <BODY BGCOLOR=#66FF99 TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> <BODY BGCOLOR=#33FFCC TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> <BODY BGCOLOR=#00FFCC TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> <BODY BGCOLOR=#00FF99 TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> Brown <BODY BGCOLOR=#CCCC99 TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> <BODY BGCOLOR=#CCCC66 TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> <BODY BGCOLOR=#CCCCFF TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> <BODY BGCOLOR=#CC9966 TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> * <BODY BGCOLOR=#CC9933 TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> * <BODY BGCOLOR=#CCCC33 TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> * <BODY BGCOLOR=#CCCC00 TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> Green <BODY BGCOLOR=#CCFF99 TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> <BODY BGCOLOR=#99FFCC TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> <BODY BGCOLOR=#99FF99 TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> <BODY BGCOLOR=#CCFF66 TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> <BODY BGCOLOR=#99CC99 TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> <BODY BGCOLOR=#33FF99 TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> * <BODY BGCOLOR=#33FF33 TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> * <BODY BGCOLOR=#33FF66 TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> * <BODY BGCOLOR=#00CC66 TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> * <BODY BGCOLOR=#66CC99 TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> * <BODY BGCOLOR=#99CC66 TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> * <BODY BGCOLOR=#CCFF33 TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> * <BODY BGCOLOR=#CCFF33 TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> * <BODY BGCOLOR=#99FF66 TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> * <BODY BGCOLOR=#99FF33 TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> * <BODY BGCOLOR=#66FF66 TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> * <BODY BGCOLOR=#00EE00 TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> * <BODY BGCOLOR=#00DD00 TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> Grey <BODY BGCOLOR=#EEEEEE TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> <BODY BGCOLOR=#DDDDDD TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> <BODY BGCOLOR=#CCCCCC TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> <BODY BGCOLOR=#BBBBBB TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> Orange <BODY BGCOLOR=#FFCC66 TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> * <BODY BGCOLOR=#FFCC33 TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> * <BODY BGCOLOR=#FFCC33 TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> Pink <BODY BGCOLOR=#FFCCFF TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> <BODY BGCOLOR=#FFCCCC TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> <BODY BGCOLOR=#FFCC99 TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> * <BODY BGCOLOR=#FFCC33 TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> Purple <BODY BGCOLOR=#CCCCFF TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> White <BODY BGCOLOR=#FFFFFF TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> Yellow <BODY BGCOLOR=#FFFFCC TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> <BODY BGCOLOR=#FFFF99 TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> <BODY BGCOLOR=#FFFF66 TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> <BODY BGCOLOR=#FFFF33 TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> * <BODY BGCOLOR=#FFFF00 TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066> * <BODY BGCOLOR=#FF9966 TEXT=#000000 LINK=#0000FF ALINK=#FFFF00 VLINK=#FF0066>
Dark Backgrounds
These are a little harder on the eye and will probably make reading the page a little slower.The darkest backgrounds are on the top of each list.
Blacks & Greys <BODY BGCOLOR=#000000 TEXT=#FFFFFF LINK=#33FFFF ALINK=#FFFF99 VLINK=#FF99FF> <BODY BGCOLOR=#111111 TEXT=#FFFFFF LINK=#33FFFF ALINK=#FFFF99 VLINK=#FF99FF> <BODY BGCOLOR=#222222 TEXT=#FFFFFF LINK=#33FFFF ALINK=#FFFF99 VLINK=#FF99FF> <BODY BGCOLOR=#444444 TEXT=#FFFFFF LINK=#33FFFF ALINK=#FFFF99 VLINK=#FF99FF> <BODY BGCOLOR=#555555 TEXT=#FFFFFF LINK=#33FFFF ALINK=#FFFF99 VLINK=#FF99FF> Blue <BODY BGCOLOR=#000055 TEXT=#FFFFFF LINK=#33FFFF ALINK=#FFFF99 VLINK=#FF99FF> <BODY BGCOLOR=#000077 TEXT=#FFFFFF LINK=#33FFFF ALINK=#FFFF99 VLINK=#FF99FF> <BODY BGCOLOR=#000088 TEXT=#FFFFFF LINK=#33FFFF ALINK=#FFFF99 VLINK=#FF99FF> <BODY BGCOLOR=#0000AA TEXT=#FFFFFF LINK=#33FFFF ALINK=#FFFF99 VLINK=#FF99FF> Green <BODY BGCOLOR=#002200 TEXT=#FFFFFF LINK=#33FFFF ALINK=#FFFF99 VLINK=#FF99FF> <BODY BGCOLOR=#004400 TEXT=#FFFFFF LINK=#33FFFF ALINK=#FFFF99 VLINK=#FF99FF> <BODY BGCOLOR=#005500 TEXT=#FFFFFF LINK=#33FFFF ALINK=#FFFF99 VLINK=#FF99FF> Brown <BODY BGCOLOR=#550000 TEXT=#FFFFFF LINK=#33FFFF ALINK=#FFFF99 VLINK=#FF99FF> <BODY BGCOLOR=#770000 TEXT=#FFFFFF LINK=#33FFFF ALINK=#FFFF99 VLINK=#FF99FF> <BODY BGCOLOR=#996600 TEXT=#FFFFFF LINK=#33FFFF ALINK=#FFFF99 VLINK=#FF99FF> Red <BODY BGCOLOR=#880000 TEXT=#FFFFFF LINK=#33FFFF ALINK=#FFFF99 VLINK=#FF99FF> <BODY BGCOLOR=#AA0000 TEXT=#FFFFFF LINK=#33FFFF ALINK=#FFFF99 VLINK=#FF99FF> <BODY BGCOLOR=#BB0000 TEXT=#FFFFFF LINK=#33FFFF ALINK=#FFFF99 VLINK=#FF99FF> <BODY BGCOLOR=#DD0000 TEXT=#FFFFFF LINK=#33FFFF ALINK=#FFFF99 VLINK=#FF99FF>