Geeky Bob | 216-Color Safe Web Palette

23 July 2001 • by Bob • Internet Explorer

In the early days of the Internet, some computers had video capabilities that were limited to 256-color palettes. Since HTML's 24-bit RGB palette supports 16,777,216 colors, someone very smart figured out an algorithm that reduced the full 24-bit color palette into a much smaller 216-color palette that computers with limited color support could utilize.

Today most operating systems don't have a problem with full 24-bit or 32-bit color palettes, but I tend to stick to the 216-color palette in most circumstances just because it's pretty easy to do the math in my head. When you think about the hexadecimal 00-33-66-99-CC-FF progression, it's pretty easy to figure out which colors you need. That said, every once in a while I need to see the subtle differences between colors that are close to each other. With that in mind, it's pretty handy to keep a color palette around, and the following table lists the original 216-color safe web palette that all browsers should support.

`FFFFFF`	`FFFFCC`	`FFFF99`	`FFFF66`	`FFFF33`	`FFFF00`
`FFCCFF`	`FFCCCC`	`FFCC99`	`FFCC66`	`FFCC33`	`FFCC00`
`FF99FF`	`FF99CC`	`FF9999`	`FF9966`	`FF9933`	`FF9900`
`FF66FF`	`FF66CC`	`FF6699`	`FF6666`	`FF6633`	`FF6600`
`FF33FF`	`FF33CC`	`FF3399`	`FF3366`	`FF3333`	`FF3300`
`FF00FF`	`FF00CC`	`FF0099`	`FF0066`	`FF0033`	`FF0000`
`CCFFFF`	`CCFFCC`	`CCFF99`	`CCFF66`	`CCFF33`	`CCFF00`
`CCCCFF`	`CCCCCC`	`CCCC99`	`CCCC66`	`CCCC33`	`CCCC00`
`CC99FF`	`CC99CC`	`CC9999`	`CC9966`	`CC9933`	`CC9900`
`CC66FF`	`CC66CC`	`CC6699`	`CC6666`	`CC6633`	`CC6600`
`CC33FF`	`CC33CC`	`CC3399`	`CC3366`	`CC3333`	`CC3300`
`CC00FF`	`CC00CC`	`CC0099`	`CC0066`	`CC0033`	`CC0000`
`99FFFF`	`99FFCC`	`99FF99`	`99FF66`	`99FF33`	`99FF00`
`99CCFF`	`99CCCC`	`99CC99`	`99CC66`	`99CC33`	`99CC00`
`9999FF`	`9999CC`	`999999`	`999966`	`999933`	`999900`
`9966FF`	`9966CC`	`996699`	`996666`	`996633`	`996600`
`9933FF`	`9933CC`	`993399`	`993366`	`993333`	`993300`
`9900FF`	`9900CC`	`990099`	`990066`	`990033`	`990000`
`66FFFF`	`66FFCC`	`66FF99`	`66FF66`	`66FF33`	`66FF00`
`66CCFF`	`66CCCC`	`66CC99`	`66CC66`	`66CC33`	`66CC00`
`6699FF`	`6699CC`	`669999`	`669966`	`669933`	`669900`
`6666FF`	`6666CC`	`666699`	`666666`	`666633`	`666600`
`6633FF`	`6633CC`	`663399`	`663366`	`663333`	`663300`
`6600FF`	`6600CC`	`660099`	`660066`	`660033`	`660000`
`33FFFF`	`33FFCC`	`33FF99`	`33FF66`	`33FF33`	`33FF00`
`33CCFF`	`33CCCC`	`33CC99`	`33CC66`	`33CC33`	`33CC00`
`3399FF`	`3399CC`	`339999`	`339966`	`339933`	`339900`
`3366FF`	`3366CC`	`336699`	`336666`	`336633`	`336600`
`3333FF`	`3333CC`	`333399`	`333366`	`333333`	`333300`
`3300FF`	`3300CC`	`330099`	`330066`	`330033`	`330000`
`00FFFF`	`00FFCC`	`00FF99`	`00FF66`	`00FF33`	`00FF00`
`00CCFF`	`00CCCC`	`00CC99`	`00CC66`	`00CC33`	`00CC00`
`0099FF`	`0099CC`	`009999`	`009966`	`009933`	`009900`
`0066FF`	`0066CC`	`006699`	`006666`	`006633`	`006600`
`0033FF`	`0033CC`	`003399`	`003366`	`003333`	`003300`
`0000FF`	`0000CC`	`000099`	`000066`	`000033`	`000000`

Update #1

I should also mention that sometime back in 1998 I wrote a classic ASP page that automatically generates the HTML for the table that I listed, and here's the code for that:

<%
        Response.Write "<center><table border=""1"" cellspacing=0 cellpadding=5 style=""color: #000000; border-collapse: collapse; border: 1px solid #000000; padding: 5px; background-color: #FFFFFF"">" & vbCrLf
        
        Const intFactor = 51

        For X = 255 to 0 Step -intFactor
            For Y = 255 to 0 Step -intFactor
                Response.Write "<tr>" & vbCrLf
                For Z = 255 to 0 Step -intFactor
                    If X < 153 And Y < 153 And Z < 153 Then
                        strFgcolor = "ffffff"
                    Else
                        strFgcolor = "000000"
                    End If
                    strBgcolor = Right("00" & Hex(X),2)
                    strBgcolor = strBgcolor & Right("00" & Hex(Y),2)
                    strBgcolor = strBgcolor & Right("00" & Hex(Z),2)
                    Response.Write "<td style=""border:1px solid #000000;background-color:#" & strBgcolor & ";color:#" & strFgcolor & """>"
                    Response.Write "<tt>" & strBgcolor & "</tt>"
                    Response.Write "</td>"
                Next
                Response.Write "</tr>" & vbCrLf
            Next
        Next

        Response.Write "</table></center>" & vbCrLf
%>

Update #2

A lot of web programmers started out with classic ASP like I did, but like most of those programmers I eventually moved on to ASP.NET. And with that in mind, here's the C# code to create the table that I listed:

<%
        Response.Write("<center><table border=1 cellspacing=0 cellpadding=5 style=\"color: #000000; border-collapse: collapse; border: 1px solid #000000; padding: 5px; background-color: #FFFFFF\">");

        const int intFactor = 51;
        string strFgcolor = "";
        string strBgcolor = "";

        for (int X = 255; X > 0; X -= intFactor)
        {
            for (int Y = 255; Y > 0; Y -= intFactor)
            {
                Response.Write("<tr>");
                for (int Z = 255; Z > 0; Z -= intFactor)
                {
                    if ((X < 153) && (Y < 153) && (Z < 153))
                    {
                        strFgcolor = "ffffff";
                    }
                    else
                    {
                        strFgcolor = "000000";
                    }
                    strBgcolor = String.Format("{0:X2}{1:X2}{2:X2}", X, Y, Z);
                    Response.Write("<td style=\"border:1px solid #000000;font-size: 11pt;padding: 2px; background-color:#" + strBgcolor + ";color:#" + strFgcolor + "\">");
                    Response.Write("<tt>" + strBgcolor + "</tt>");
                    Response.Write("</td>");

                }
                Response.Write("</tr>");
            }
        }

        Response.Write("</table></center>");
%>

Tags: IE, HTML, ASP, C#