Created in May 2010

Generate All Websafe Colors with PHP

#FFF

#FFC

#FF9

#FF6

#FF3

#FF0

#FCF

#FCC

#FC9

#FC6

#FC3

#FC0

#F9F

#F9C

#F99

#F96

#F93

#F90

#F6F

#F6C

#F69

#F66

#F63

#F60

#F3F

#F3C

#F39

#F36

#F33

#F30

#F0F

#F0C

#F09

#F06

#F03

#F00

#CFF

#CFC

#CF9

#CF6

#CF3

#CF0

#CCF

#CCC

#CC9

#CC6

#CC3

#CC0

#C9F

#C9C

#C99

#C96

#C93

#C90

#C6F

#C6C

#C69

#C66

#C63

#C60

#C3F

#C3C

#C39

#C36

#C33

#C30

#C0F

#C0C

#C09

#C06

#C03

#C00

#9FF

#9FC

#9F9

#9F6

#9F3

#9F0

#9CF

#9CC

#9C9

#9C6

#9C3

#9C0

#99F

#99C

#999

#996

#993

#990

#96F

#96C

#969

#966

#963

#960

#93F

#93C

#939

#936

#933

#930

#90F

#90C

#909

#906

#903

#900

#6FF

#6FC

#6F9

#6F6

#6F3

#6F0

#6CF

#6CC

#6C9

#6C6

#6C3

#6C0

#69F

#69C

#699

#696

#693

#690

#66F

#66C

#669

#666

#663

#660

#63F

#63C

#639

#636

#633

#630

#60F

#60C

#609

#606

#603

#600

#3FF

#3FC

#3F9

#3F6

#3F3

#3F0

#3CF

#3CC

#3C9

#3C6

#3C3

#3C0

#39F

#39C

#399

#396

#393

#390

#36F

#36C

#369

#366

#363

#360

#33F

#33C

#339

#336

#333

#330

#30F

#30C

#309

#306

#303

#300

#0FF

#0FC

#0F9

#0F6

#0F3

#0F0

#0CF

#0CC

#0C9

#0C6

#0C3

#0C0

#09F

#09C

#099

#096

#093

#090

#06F

#06C

#069

#066

#063

#060

#03F

#03C

#039

#036

#033

#030

#00F

#00C

#009

#006

#003

#000


<?php
$all = array (
  0 => '#FFF',
  1 => '#FFC',
  2 => '#FF9',
  3 => '#FF6',
  4 => '#FF3',
  5 => '#FF0',
  6 => '#FCF',
  7 => '#FCC',
  8 => '#FC9',
  9 => '#FC6',
  10 => '#FC3',
  11 => '#FC0',
  12 => '#F9F',
  13 => '#F9C',
  14 => '#F99',
  15 => '#F96',
  16 => '#F93',
  17 => '#F90',
  18 => '#F6F',
  19 => '#F6C',
  20 => '#F69',
  21 => '#F66',
  22 => '#F63',
  23 => '#F60',
  24 => '#F3F',
  25 => '#F3C',
  26 => '#F39',
  27 => '#F36',
  28 => '#F33',
  29 => '#F30',
  30 => '#F0F',
  31 => '#F0C',
  32 => '#F09',
  33 => '#F06',
  34 => '#F03',
  35 => '#F00',
  36 => '#CFF',
  37 => '#CFC',
  38 => '#CF9',
  39 => '#CF6',
  40 => '#CF3',
  41 => '#CF0',
  42 => '#CCF',
  43 => '#CCC',
  44 => '#CC9',
  45 => '#CC6',
  46 => '#CC3',
  47 => '#CC0',
  48 => '#C9F',
  49 => '#C9C',
  50 => '#C99',
  51 => '#C96',
  52 => '#C93',
  53 => '#C90',
  54 => '#C6F',
  55 => '#C6C',
  56 => '#C69',
  57 => '#C66',
  58 => '#C63',
  59 => '#C60',
  60 => '#C3F',
  61 => '#C3C',
  62 => '#C39',
  63 => '#C36',
  64 => '#C33',
  65 => '#C30',
  66 => '#C0F',
  67 => '#C0C',
  68 => '#C09',
  69 => '#C06',
  70 => '#C03',
  71 => '#C00',
  72 => '#9FF',
  73 => '#9FC',
  74 => '#9F9',
  75 => '#9F6',
  76 => '#9F3',
  77 => '#9F0',
  78 => '#9CF',
  79 => '#9CC',
  80 => '#9C9',
  81 => '#9C6',
  82 => '#9C3',
  83 => '#9C0',
  84 => '#99F',
  85 => '#99C',
  86 => '#999',
  87 => '#996',
  88 => '#993',
  89 => '#990',
  90 => '#96F',
  91 => '#96C',
  92 => '#969',
  93 => '#966',
  94 => '#963',
  95 => '#960',
  96 => '#93F',
  97 => '#93C',
  98 => '#939',
  99 => '#936',
  100 => '#933',
  101 => '#930',
  102 => '#90F',
  103 => '#90C',
  104 => '#909',
  105 => '#906',
  106 => '#903',
  107 => '#900',
  108 => '#6FF',
  109 => '#6FC',
  110 => '#6F9',
  111 => '#6F6',
  112 => '#6F3',
  113 => '#6F0',
  114 => '#6CF',
  115 => '#6CC',
  116 => '#6C9',
  117 => '#6C6',
  118 => '#6C3',
  119 => '#6C0',
  120 => '#69F',
  121 => '#69C',
  122 => '#699',
  123 => '#696',
  124 => '#693',
  125 => '#690',
  126 => '#66F',
  127 => '#66C',
  128 => '#669',
  129 => '#666',
  130 => '#663',
  131 => '#660',
  132 => '#63F',
  133 => '#63C',
  134 => '#639',
  135 => '#636',
  136 => '#633',
  137 => '#630',
  138 => '#60F',
  139 => '#60C',
  140 => '#609',
  141 => '#606',
  142 => '#603',
  143 => '#600',
  144 => '#3FF',
  145 => '#3FC',
  146 => '#3F9',
  147 => '#3F6',
  148 => '#3F3',
  149 => '#3F0',
  150 => '#3CF',
  151 => '#3CC',
  152 => '#3C9',
  153 => '#3C6',
  154 => '#3C3',
  155 => '#3C0',
  156 => '#39F',
  157 => '#39C',
  158 => '#399',
  159 => '#396',
  160 => '#393',
  161 => '#390',
  162 => '#36F',
  163 => '#36C',
  164 => '#369',
  165 => '#366',
  166 => '#363',
  167 => '#360',
  168 => '#33F',
  169 => '#33C',
  170 => '#339',
  171 => '#336',
  172 => '#333',
  173 => '#330',
  174 => '#30F',
  175 => '#30C',
  176 => '#309',
  177 => '#306',
  178 => '#303',
  179 => '#300',
  180 => '#0FF',
  181 => '#0FC',
  182 => '#0F9',
  183 => '#0F6',
  184 => '#0F3',
  185 => '#0F0',
  186 => '#0CF',
  187 => '#0CC',
  188 => '#0C9',
  189 => '#0C6',
  190 => '#0C3',
  191 => '#0C0',
  192 => '#09F',
  193 => '#09C',
  194 => '#099',
  195 => '#096',
  196 => '#093',
  197 => '#090',
  198 => '#06F',
  199 => '#06C',
  200 => '#069',
  201 => '#066',
  202 => '#063',
  203 => '#060',
  204 => '#03F',
  205 => '#03C',
  206 => '#039',
  207 => '#036',
  208 => '#033',
  209 => '#030',
  210 => '#00F',
  211 => '#00C',
  212 => '#009',
  213 => '#006',
  214 => '#003',
  215 => '#000',
);

Additional Code


<?php
/**
 * Get a contrasting color, black or white, based on a background color
 *
 * @param $color
 *
 * @return string
 */
function contrastingBlackOrWhite($color)
{
    $color = str_replace('#', '', $color);
    $red = hexdec(substr($color, 0, 1) . substr($color, 0, 1));
    $green = hexdec(substr($color, 1, 1) . substr($color, 1, 1));
    $blue = hexdec(substr($color, 2, 1) . substr($color, 2, 1));
    $yiq = (($red * 299) + ($green * 587) + ($blue * 114)) / 1000;
    return ($yiq >= 128) ? 'black' : 'white';
}

$all = array();
$chars = array('0', '3', '6', '9', 'C', 'F');
foreach ($chars as $a) {
    foreach ($chars as $b) {
        foreach ($chars as $c) {
            $all[] = '#' . $a . $b . $c;
        }
    }
}
rsort($all);


foreach ($all as $c) {
    $backgroundColor = $c;
    $white_or_black = contrastingBlackOrWhite($backgroundColor);
    echo "<div style=\"background-color: {$backgroundColor};color: {$white_or_black}\">{$backgroundColor}</div>";
}

$all_code = '<?php' . "\n" . '$all = ' . var_export($all, true) . ';';
echo "<pre>";
echo highlight_string($all_code, true);
echo "</pre>";

Source Code

<style>
#holder { width: 624px; text-align: left; margin: 0 auto; }
#holder div { width: 50px; height: 50px; margin: 1px; display: inline-block; }
</style>