The 216 web-safe colors are the fixed palette produced by picking each red, green, and blue channel from exactly six levels — 0, 51, 102, 153, 204, and 255 — which combines to give 6 × 6 × 6 = 216 unique HEX codes. Avoiding mistakes with a web safe colors chart starts with three things: understanding that the 216 is not an arbitrary count, the matching routine is not the same as a perceptual color difference, and the term "web safe" does not describe accessibility, print, or branding. Designers who treat the chart as a guarantee of legibility, as a substitute for a contrast checker, or as a modern brand constraint run into trouble as soon as a real user opens the page on a real display. Modern phones, laptops, and browsers can render millions or billions of colors, so the 216-cube exists today mainly as a teaching reference, a retro aesthetic choice, and a quantization exercise. Use the chart as a transparent list of 216 specific values and as a deterministic matcher that snaps each channel to its nearest allowed level. Then verify the pair in context, copy the full six-digit HEX, and check contrast with a dedicated tool before you ship the page.
What "Web Safe" Actually Means (and Doesn't)
The 216-cube comes from an era when many displays could only render 256 indexed colors at once, and a shared subset of those 256 colors was less likely to dither into a speckled approximation on someone else's monitor. Per W3C's historical introduction to CSS, browser-safe colors were standardized as those six channel levels per channel, and a W3C WAI example independently lists a 216-choice color picker for accessibility work. That historical definition has stuck, and it is the only definition the chart actually implements.
What the term "web safe" does not cover:
- It does not mean the swatch is safe as foreground text on any background.
- It does not mean the RGB values translate cleanly to CMYK ink.
- It does not mean the swatch matches a Pantone, a paint chip, or a device-calibrated ICC profile.
- It does not mean the chart is a useful source of brand colors for a contemporary product.
A palette entry is not automatically readable as foreground text — contrast depends on both the foreground and background, plus font size, weight, and the accessibility criterion you are measuring against. After picking colors, the actual pair has to be tested with a color contrast checker rather than assumed legible because both colors came from a famous historical palette.
How the 216-Cube Is Built
Every swatch in the chart is generated as the Cartesian product of the six channel levels, which is also how the page verifies the grid for the expected 216 entries:
| Channel | Allowed values (decimal) | Allowed values (HEX) |
|---|---|---|
| Red | 0, 51, 102, 153, 204, 255 | 00, 33, 66, 99, CC, FF |
| Green | 0, 51, 102, 153, 204, 255 | 00, 33, 66, 99, CC, FF |
| Blue | 0, 51, 102, 153, 204, 255 | 00, 33, 66, 99, CC, FF |
Six choices per channel times three channels gives 216 unique entries, and the chart is generated deterministically in red-major, green-middle, blue-minor order from those six source levels rather than copied from an opaque hard-coded list. The grid is checked for exactly 216 entries, unique HEX values, and channel membership in the six allowed levels. Because the shared steps are exactly 51 units of an 8-bit channel — that is, 20% of the 0–255 range — the chart shows a clean grid rather than a freeform picker. Each swatch displays a shortened three-character hint to keep the 216-item grid compact, while the accessible label and title carry the complete six-digit value and RGB triplet. For a deeper walk-through of the math, see the 216-cube formula explained.
Pick a Swatch and Snap a HEX Without Mistakes
Use this sequence with the Web Safe Colors Chart to avoid the pitfalls listed in the next section.
- Open the chart and scan the 216 swatches in red-major, green-middle, blue-minor order so you find what you want without hunting randomly. Each swatch shows a short three-character hint to keep the grid compact.
- Click the swatch you want. The chart displays the complete six-digit HEX value in the larger result area along with the RGB triplet.
- Copy the full six-digit HEX (not the three-character hint shown on the swatch). If your browser blocks clipboard permission, the visible code remains available for manual selection.
- To match a color you already have, paste either a three-digit or a six-digit HEX into the input field. Three-digit values such as #abc expand according to normal CSS shorthand rules to #aabbcc before matching, so the matcher never sees the short form.
- Select Find match. Each validated 8-bit channel is rounded independently to its nearest multiple of 51. For example, take #3470d0: the red channel 0x34 (= 52) rounds to 51, the green channel 0x70 (= 112) rounds to 102, and the blue channel 0xd0 (= 208) rounds to 204. Reassembled, #3470d0 maps to #3366cc.
- Treat the snapped HEX as a historical palette reference. The match is nearest distance in the ordinary unweighted RGB cube because the axes are independent and evenly spaced; it is not a perceptual color-difference calculation.
- Before publishing, test the actual foreground-and-background pair with a dedicated contrast checker. The chart does not know about your fonts, your target audience, or your accessibility goal.
Mistakes to Avoid With the Chart
Eight pitfalls, in roughly the order designers hit them:
- Assuming "web safe" means text accessibility. The set is a 1990s compatibility palette, not a legibility guarantee. Always test the pair against the WCAG criterion you ship against.
- Treating the snapped match as a perceptual match. The matcher rounds independently per channel, so the unweighted Euclidean RGB result is sometimes not the visually closest swatch. Gamma-encoded sRGB values are not perceptually uniform, and a specialist workflow might compare colors in Lab or OKLCH, account for an ICC profile, or optimize a palette across an entire image.
- Forgetting that the input is unweighted RGB. The chart does not model how human vision weights channel changes, brand tolerances, or display calibration.
- Restricting a modern brand or data visualization to 216 colors. Modern computers, phones, and browsers support millions or billions of color combinations, so the chart is a deliberate constraint, not a compatibility requirement for ordinary styling.
- Copying the short hint instead of the full code. The 3-character label exists to keep the grid compact; the result area carries the real six-digit value, and that is what your CSS should use.
- Assuming #rgb and #rrggbb behave identically. They do inside this chart because the matcher expands shorthand first — but a custom preprocessor or a hand-written stylesheet might not, so verify.
- Equating a chart member to Pantone, CMYK ink, or a physical material sample. The chart intentionally keeps the legacy palette's simple construction visible and does not imply equivalence to any of those. For print, route the snapped HEX through an RGB-to-CMYK converter and confirm against a physical proof.
- Letting a clipboard prompt block the workflow. If the browser denies clipboard permission, the displayed value stays selectable manually, so the chart still does its job.
From Chart to Page — Test the Real Pair
The chart is a transparent reference, a copy aid, and a quantization reference — it is not a one-stop shop for a published page. After you pick a swatch or snap a HEX, three follow-ups tend to catch the remaining mistakes. First, run the foreground and background through a contrast checker against the WCAG criterion your project targets, since contrast depends on font size, weight, and the criterion itself, not just the two HEX values. Second, for print workflows, convert the snapped HEX through an RGB to CMYK converter and check the result against a physical proof, because the chart is RGB only and does not model ink behavior. Third, for a brand palette, build the wider system with a color palette generator rather than chaining a few historical swatches, because the chart is too sparse for a modern identity system. Modern displays no longer need the 216-cube for compatibility, so the chart's job today is to make a dated, deterministic reference visible — use it that way and the common mistakes above stop being common.
Related reading: Is a Color Gradient Generator Safe to Use Online?.