The web safe palette is a fixed set of 216 colors built from six allowed values per red, green, and blue channel — 0, 51, 102, 153, 204, and 255 — combining as 6 × 6 × 6 to produce every entry. In hexadecimal those channel levels become 00, 33, 66, 99, CC, and FF, which is why a web-safe HEX code always reads as a smooth combination of those pairs, like #3366CC or #FF9900. The set dates to the era of 8-bit displays that could only show 256 colors simultaneously, when using a shared subset gave browsers and operating systems the best chance of rendering a page without dithering or color shifts. Modern computers, phones, and browsers normally support millions or billions of displayable color combinations, so the palette is no longer a compatibility requirement for ordinary website styling. It survives as a teaching artifact, a deliberate design constraint, and a transparent reference for how a quantized RGB cube is constructed. Browsing it through an interactive web safe colors chart makes the underlying structure visible instead of hidden inside a hard-coded list.
What "Web Safe" Originally Meant
The phrase "web safe" comes from the early web, when the W3C's introduction to CSS described "browser safe colors" as a subset designed to survive the limits of 8-bit indexed displays. In the 1990s, most monitors could only show 256 colors at once, and operating systems reserved roughly 40 of those slots for their own interface elements such as window borders, menu bars, and cursor colors. That left a working palette of around 216 shared colors that both Windows and Mac browsers could agree on without substituting or dithering. According to the W3C's historical CSS guide, picking colors from this shared cube reduced the chance that a browser would have to approximate a page color as a noisy speckle pattern.
Two facts explain why the label survives even though the constraint does not. First, the 216 figure was never arbitrary: it is exactly the number of ways to choose one of six levels for each of three channels, which mathematicians would describe as a Cartesian product of three independent six-element sets. Second, the six levels are evenly spaced across the 0–255 range, so any shade in between has an obvious nearest partner on the grid. That regularity is what makes the palette reproducible by formula rather than by a designer hand-picking entries.
The Math Behind the 216
Every web-safe color is defined by three independent choices: how much red, how much green, and how much blue. Each channel must be one of exactly six decimal values — 0, 51, 102, 153, 204, or 255 — which is the same set written in hexadecimal as 00, 33, 66, 99, CC, or FF. Because the three channels do not depend on each other, the total number of unique combinations is simply 6 × 6 × 6 = 216. That product is the source of the famous 216 figure, and it also explains why every web-safe HEX code, once parsed, has each pair drawn from those six values alone.
It helps to see the six levels side by side, because they are not equally spaced in human perception — they are equally spaced in raw 8-bit signal, which is the only property the older hardware could control directly.
| Decimal level | Hex pair | Position on the 0–255 channel |
|---|---|---|
| 0 | 00 | Channel fully off (black contribution) |
| 51 | 33 | One-fifth of full intensity |
| 102 | 66 | Two-fifths of full intensity |
| 153 | 99 | Three-fifths of full intensity |
| 204 | CC | Four-fifths of full intensity |
| 255 | FF | Channel at maximum (full intensity) |
Because 255 ÷ 5 = 51, the spacing is exact: each step adds exactly one-fifth of the channel's range. That is why snapping any color to the cube is mechanically simple — round each channel to its nearest multiple of 51 — and why the result is auditable by anyone who can do arithmetic.
How to Browse and Copy a Web-Safe Swatch
The fastest way to inspect the full 216-color grid is to open the interactive Web Safe Colors Chart and work through it in the same order the chart generates its rows: red first, green in the middle, blue last. That deterministic ordering makes it easy to predict where a given shade will sit.
- Open the chart and scroll the 216-entry grid. Each cell shows a compact three-character HEX hint so the grid stays compact.
- Click any swatch to select it. The full six-digit HEX value and the matching RGB triplet appear in the larger result area above or beside the grid.
- Copy the six-digit HEX. If your browser blocks clipboard access for permission reasons, the visible code remains selectable manually.
- Hover or focus a swatch to read its accessible label and title, which always carry the complete six-digit value, so screen readers receive the full code rather than the shortened hint.
- Paste the copied HEX into your stylesheet, design token file, or color variable, and verify it visually on the actual display you ship to.
How to Match Any HEX to Its Nearest Cube Entry
When a design starts with a non-cube color — for example, a brand color picked from a photograph or a screen recording — the chart can snap it to the closest member of the 216-cube so you can study what the constrained version looks like.
- Enter a valid HEX code into the matcher's input field. The matcher accepts the standard CSS three-digit shorthand such as #abc as well as full six-digit codes like #3470d0.
- Select the "Find match" action. Three-digit shorthand is expanded according to normal CSS rules before matching, so #abc becomes #aabbcc internally.
- Read the snapped result. Each 8-bit channel of the input is rounded independently to the nearest multiple of 51, then the three snapped levels are reassembled into a six-digit HEX code.
- Compare input and output side by side in the result panel. For #3470d0, the red channel rounds from 52 to 51 (33 in hex), the green channel rounds from 112 to 102 (66 in hex), and the blue channel rounds from 208 to 204 (CC in hex), giving #3366CC as the nearest cube entry.
- Use that snapped value as a historical palette reference. Treat it as one data point, not as a perceptual guarantee.
The snap is the same operation as Euclidean nearest-neighbor in the unweighted RGB cube, because the allowed levels are independent and evenly spaced. It is not a perceptual color-difference calculation: human vision does not weight red, green, and blue equally, and gamma-encoded sRGB is not perceptually uniform, so the visually closest swatch can occasionally differ from the arithmetic result. Anyone who needs a perceptual match should compare colors in Lab or OKLCH, account for an ICC profile, or evaluate a whole image's palette rather than a single hex pair.
What "Web Safe" Does Not Mean
The historical label is precise about one thing and silent about several others, and confusing those categories leads to real mistakes. A web-safe color is not automatically safe as foreground text against a web-safe background, because text legibility depends on the contrast ratio between the chosen pair, the font size, the font weight, and the accessibility criterion being measured. A web-safe color is not automatically safe for printing, because CMYK conversion, ink limits, and paper stock all change the final appearance. A web-safe color is not automatically a Pantone equivalent, a brand-safe primary, or a calibrated display value. It is simply a member of a 216-entry quantized cube that older hardware was likely to render without substitution.
The practical consequence is that any color pair chosen from the cube still needs to be tested with a contrast tool before it is shipped. The color contrast checker takes the exact foreground and background HEX values, runs them against WCAG AA and AAA rules, and reports the measured ratio so the decision is based on the actual pair, not on the assumption that a famous palette guarantees readability. A guide on pairing and testing web-safe colors for accessibility walks through the same workflow in more detail.
Using the 216 Cube in Modern Work
The palette still earns a place in contemporary toolkits, but only for the right reasons. It is a clean teaching surface for hexadecimal channels, because every swatch has each pair drawn from the same six values, so students can predict the structure before they see it. It is a deliberately constrained retro palette for branding exercises, low-color artwork, pixel-art recreations, or interfaces that want to evoke an older computing aesthetic. It is a transparent reference for any workflow that needs to show how channel quantization maps a continuous color space onto a discrete grid.
What it is not is a compatibility baseline. Modern displays and browsers can render the full sRGB range, so confining a contemporary brand system or data visualization to 216 choices hurts fidelity without buying any rendering safety. When the goal is teaching, deliberate constraint, or reproduction, the W3C's historical CSS guide still documents the six channel levels, and a W3C Web Accessibility Initiative example independently lists a 216-choice color picker to confirm that the cube has been a stable reference for decades. Used with that context explicit, the chart functions as a matcher, a copy aid, and a window into how a constrained palette was constructed in the first place.