Kelly's 22 colors of maximum contrast

http://jsfiddle.net/k8NC2/1/

CSS

/* Kelly */

.kelly-vivid-yellow {
  background-color: #FFB300;
}

.kelly-strong-purple {
  background-color: #803E75;
}

.kelly-vivid-orange {
  background-color: #FF6800;
}

.kelly-very-light-blue {
  background-color: #A6BDD7;
}

.kelly-vivid-red {
  background-color: #C10020;
}

.kelly-grayish-yellow {
  background-color: #CEA262;
}

.kelly-medium-gray {
  background-color: #817066;
}

/* Kelly - The following will not be good for people with defective color vision */

.kelly-vivid-green {
  background-color: #007D34;
}

.kelly-strong-purplish-pink {
  background-color: #F6768E;
}

.kelly-strong-blue {
  background-color: #00538A;
}

.kelly-strong-yellowish-pink {
  background-color: #FF7A5C;
}

.kelly-strong-violet {
  background-color: #53377A;
}

.kelly-vivid-orange-yellow {
  background-color: #FF8E00;
}

.kelly-strong-purplish-red {
  background-color: #B32851;
}

.kelly-vivid-greenish-yellow {
  background-color: #F4C800;
}

.kelly-strong-reddish-brown {
  background-color: #7F180D;
}

.kelly-vivid-yellowish-green {
  background-color: #93AA00;
}

.kelly-deep-yellowish-brown {
  background-color: #593315;
}

.kelly-reddish-orange {
  background-color: #F13A13;
}

.kelly-dark-olive-green {
  background-color: #232C16;
}

/* Boynton Optimized */

.boynton-blue {
  background-color: #0000FF;
}

.boynton-red {
  background-color: #FF0000;
}

.boynton-green {
  background-color: #00FF00;
}

.boynton-yellow {
  background-color: #FFFF00;
}

.boynton-magenta {
  background-color: #FF00FF;
}

.boynton-pink {
  background-color: #FF8080;
}

.boynton-gray {
  background-color: #808080;
}

.boynton-brown {
  background-color: #800000;
}

.boynton-orange {
  background-color: #FF8000;
}

div {
  width: 90px;
  height: 90px;
  float: left;
  margin: 8px;
  text-align: center;
  display: table;
}

div span {
  padding: 0 6px;
  display: table-cell;
  vertical-align: middle;
}

h1 {
  float: left;
  clear: both;
  width: 100%;
  margin-top: 30px;
}

h1:first-child {
 ...

JavaScript

function drawPalette(colors, prefix, palletteName) {

  // pallette name
  $("<h1/>")
    .addClass("title")
    .text(palletteName)
    .appendTo("body");

  // add a swatch for each color
  for (var i = 0; i < colors.length; i++) {

    $("<div/>")
      .addClass(prefix + colors[i].replace(/ /g, "-").toLowerCase())
      .append($("<span/>").text(colors[i]))
      .appendTo("body");
  }
}

// Kelly
var kelly = ["Vivid Yellow", "Strong Purple", "Vivid Orange",
  "Very Light Blue", "Vivid Red", "Grayish Yellow",
  "Medium Gray", "Vivid Green", "Strong Purplish Pink",
  "Strong Blue", "Strong Yellowish Pink", "Strong Violet",
  "Vivid Orange Yellow", "Strong Purplish Red", "Vivid Greenish Yellow",
  "Strong Reddish Brown", "Vivid Yellowish Green", "Deep Yellowish Brown",
  "Reddish Orange", "Dark Olive Green"
];
drawPalette(kelly, "kelly-", "Kelly's 22 colors of maximum contrast");

// Boynton Optimized
var boynton = ["Blue", "Red", "Green", "Yellow", "Magenta",
  "Pink", "Gray", "Brown", "Orange"
];
drawPalette(boynton, "boynton-", "Boynton's list of 11 colors that are almost never confused. (Optimized)");