The browser-safe palette contains exactly 216 colors, formed by combining six evenly spaced channel values — 0, 51, 102, 153, 204, and 255 — independently across the red, green, and blue channels. That single formula, 6 × 6 × 6, is the entire legacy of "web-safe colors," and it is the reason every swatch in the historical palette snaps to one of those six levels in each channel. Written in hexadecimal, those six levels become 00, 33, 66, 99, CC, and FF, so every "safe" HEX code is built from only those characters. Understanding the formula is the foundation for every tip and every mistake that follows.
Web-safe colors were useful in an era when most displays could only show 256 indexed colors at once, and a shared cube reduced visible dithering on cross-platform pages. Today's screens render millions or billions of colors, so the palette is no longer a compatibility requirement for ordinary website styling. What remains is a transparent teaching tool, a ready-made constrained palette for retro design, and a precise matcher for snapping any modern HEX back into the cube when a project calls for it.
What the 216 web-safe cube actually is
The cube is the Cartesian product of six red levels, six green levels, and six blue levels. Each axis is independent, so a chosen red value can be paired with any green and any blue without restriction. The product is small enough to memorize the shape of (a recognizable spread of pure hues, dark tones, and light tones) and large enough to build full interfaces from. The W3C's historical introduction to CSS documents these six evenly spaced levels, and a W3C Web Accessibility Initiative example independently lists a 216-choice color picker that mirrors the same construction.
Two consequences follow directly from the math. First, the palette is not balanced around perceptual lightness: 51 sits close to true black while 204 sits close to true white, but the steps between them are arithmetically even rather than visually even. Second, the palette is deterministic. A six-digit HEX is "in the cube" only when each pair of characters is one of 00, 33, 66, 99, CC, or FF. Anything else is outside the safe set, even if it looks similar.
Practical tips for working with the cube today
- Treat the cube as a constrained palette, not a compatibility fix. Pick web-safe on purpose when the brief calls for retro look, low-color artwork, or a teaching example. For modern work, treat the cube as one possible starting palette rather than the only allowed set.
- Build around a dominant color plus two supports plus one accent. Even with 216 options, restraint produces cleaner pages than unrestricted mixing.
- Use the grid to teach HEX channels. Reading across rows holds the red channel constant while green and blue change, which is a clean way to show how each pair of hex characters maps to an 8-bit intensity.
- Pick swatches by purpose, not by name. The chart deliberately does not assign subjective names to colors. Treat each swatch as a pure HEX value rather than expecting "Ocean Blue" or "Forest Green" labels.
- Snap modern HEX values back to the cube on purpose. When a brand color exists outside the cube, use the nearest-match function to find the closest member, then make a deliberate choice about whether to keep the modern value or accept the snapped alternative.
How to find the nearest cube match for any HEX
- Open the Web Safe Colors Chart in your browser.
- Locate the HEX input field above the swatch grid and enter a valid 3-digit or 6-digit hexadecimal code (letters A through F, digits 0 through 9).
- If you entered a shorthand code such as #abc, remember that CSS expands it to #aabbcc before matching — the chart applies the same shorthand rule automatically.
- Click Find match to snap the value. The tool rounds each 8-bit red, green, and blue channel independently to its nearest multiple of 51 and recombines the three snapped levels into a six-digit HEX code shown in the result area.
- For a worked check, take #3470d0: the red channel 52 rounds to 51 (because 51 is closer than 0), the green channel 112 rounds to 102 (because 102 is closer than 153), and the blue channel 208 rounds to 204 (because 204 is closer than 255). Recombined as 51-102-204 the result is #3366cc, which sits inside the cube.
- Click any swatch in the 216 grid to display and copy its full six-digit HEX code. Clipboard access can be denied by browser permissions; if so, select and copy the visible code manually.
- Use the snapped result as a historical palette reference, then test real foreground and background pairs for contrast separately — the cube guarantees nothing about legibility.
Common mistakes people make with the 216 palette
| Mistake | Why it fails | Better habit |
|---|---|---|
| Assuming "web safe" means accessible | Safety refers to display compatibility, not text contrast. | Run every text/background pair through a dedicated contrast tool. |
| Mixing cube and non-cube HEX in the same UI | Dilutes the deliberate retro feel and forces a half-constrained design system. | Commit to either all-cube or all-modern values, not a mix. |
| Treating the cube as perceptually uniform | Steps of 51 are even in 8-bit space, not in human vision. | Use Lab or OKLCH for perception-sensitive work; use the cube for predictability. |
| Restricting a modern brand to 216 colors unnecessarily | Limits expression without buying compatibility on current hardware. | Use the cube only when the brief asks for a constrained palette. |
| Forgetting CSS shorthand expansion | #abc and #aabbcc are the same color; both must be expanded before matching. | Expand shorthand mentally, then enter either form into the chart. |
Each of these mistakes shares a single root cause: confusing a historical compatibility convention with a current best practice. The cube is a useful reference and a clean teaching tool, but it is not a substitute for accessibility testing, perceptual color difference math, or modern display calibration.
Contrast and accessibility errors to avoid
Two colors from the same historical palette can still produce unreadable text, fail WCAG checks, or wash out under glare. Contrast depends on the specific pair, the font size, the font weight, and the applicable accessibility criterion — not on whether the colors came from a famous list. WCAG 2.x commonly sets a minimum of 4.5:1 for normal text and 3:1 for large or bold text, with stricter AAA thresholds above those. Verify the actual pair with the Color Contrast Checker rather than assuming that a palette famous in 1996 still passes a 2026 review.
A related mistake is using the same swatch for both foreground and background with a translucent overlay in between. Translucent layers change the perceived color against whatever sits behind them, so the "safe" palette entry is not the color the user actually sees. Test the rendered pair, including any overlay, before signing off.
When web-safe colors still earn their place
The cube continues to fit several deliberate workflows. It is a clean teaching surface for HEX channels, a ready-made constrained palette for retro interfaces and pixel-style artwork, a transparent matcher for snapping modern HEX back into a fixed grid, and a reproducible reference for tutorials that need to show the same color on every visitor's screen. It is also useful for printed charts, embroidery patterns, beadwork, and other media where a fixed palette is a feature rather than a limitation.
For brand-driven work, data visualizations with thousands of distinct marks, or any UI that benefits from subtle gradients between similar tones, prefer a modern palette built from full RGB or an OKLCH-based system. Use the Web Safe Colors Chart as the transparent reference and matcher it is, keep its dated compatibility purpose explicit, and let accessibility testing handle the parts the cube was never designed to solve.
If you're weighing options, Generate SVG Patterns Without These Common Mistakes covers this in detail.
If you're weighing options, Web Safe Colors Chart: Are They Still Needed Today? covers this in detail.