Web-Safe Colors: What the 216-Color Palette Was For

If you have ever read an old design guide that insists on #3366CC instead of #3467CC, you have met the web-safe color palette — a fixed set of 216 hex codes that guaranteed a color would look the same on every screen. It was essential advice in the late 1990s and it is obsolete today, but the reason it existed explains a lot about how color on the web works.

Why 216 colors?

Early consumer displays were 8-bit: they could show 256 colors at a time from a much larger palette. Of those 256 slots, roughly 40 were claimed by the operating system and browser chrome for their own use, leaving 216 that a web page could reliably control.

216 happens to be a perfect cube: 6 × 6 × 6 = 216. Six shades for red, six for green and six for blue — a coarse 3D color cube that fit inside the 8-bit budget and, importantly, was identical on Windows and Macintosh systems of the era.

When a page asked for a color outside the palette, the system approximated it by dithering — mixing pixels of two nearby palette colors like a woven texture. Photographs survived it; flat UI colors turned into speckled, muddy approximations. Web-safe colors existed to avoid that dithering entirely.

The six values per channel

Each of the three channels is limited to six possible values: 0, 51, 102, 153, 204 and 255. In hex that is a neat pattern:

So every web-safe channel value is a multiple of 51, and in hex it is always the same digit twice — 00, 33, 66, 99, CC or FF.

How to spot a web-safe code

Look at each pair of hex digits:

• #3366CC is web-safe — 33, 66 and CC are all in the list.
• #3B82F6 is not — 3B, 82 and F6 are arbitrary values.
• #CCCCCC, #FF9900 and #003300 are all web-safe.
• #C0C0C0 (the CSS keyword silver) is not: C0 is not one of the six pairs, even though it looks close.

A handy shorthand: if you can type the code by pressing each key twice, it is web-safe.

Rounding any color to the nearest web-safe code

Because the six values are evenly spaced 51 apart, converting is simple arithmetic: divide each channel by 51, round to the nearest whole number, and multiply back.

Take #2E7D32, a garden green at rgb(46, 125, 50):

• Red: 46 ÷ 51 = 0.90 → rounds to 1 → 51 → 33
• Green: 125 ÷ 51 = 2.45 → rounds to 2 → 102 → 66
• Blue: 50 ÷ 51 = 0.98 → rounds to 1 → 51 → 33

The nearest web-safe color is #336633 — visibly duller and darker than the original, which is exactly the trade-off the palette forced on designers.

Does the web-safe palette still matter?

For its original purpose, no:

• Displays are 24-bit (or more). Virtually every device today renders all 16,777,216 hex colors. Non-palette colors are shown as-is, so nothing dithers.
• The 216 colors are only about 1.3% of the color space. Staying inside them costs you most brand colors, the entire Tailwind and Material ramps, and subtle neutral steps between #CCCCCC and #999999.
• Accessibility is the modern constraint, not palette size. A color being web-safe says nothing about contrast. #999999 is web-safe and gives only about 2.8:1 on white, well short of the 4.5:1 that body text needs; #6B7280 is not web-safe and passes comfortably at roughly 4.8:1.

Where the idea still earns its place:

• A few of the grays stuck. #333333 and #CCCCCC are still common in hand-written CSS, a fossil of palette-safe thinking.
• Evenly spaced steps are genuinely useful. A grid of 6 values per channel is an easy way to build a consistent gray or shade ramp. The color charts keep a web-safe reference next to the Tailwind and Material ramps for exactly this kind of comparison.
• It is a good history lesson. When someone asks why an old site uses such strange hex codes, the 8-bit palette is usually the answer.

Try it: open the web-safe section of the color charts and compare it with a Tailwind ramp like blue-50 through blue-950. The web-safe cube jumps from light to mid to dark in six crude steps; a modern ramp uses eleven tuned steps and covers colors the cube cannot express at all.

Treat the 216 palette as a piece of web history you can still read, not a rule to design by. Pick the color you need, then check its contrast ratio — that is the constraint that actually affects your users.