Web safe is a historical name for the 216-color browser-safe palette, not a claim that every swatch in the cube is safe for accessible text. The label comes from an era when many displays could only show 256 indexed colors at once, and 216 of those colors overlapped between major operating systems. Modern computers, phones, and browsers support millions or billions of displayable color combinations, so the cube no longer functions as a compatibility requirement for ordinary website styling. Text accessibility, by contrast, depends on the contrast ratio between a specific foreground and background, the font size, and the font weight used. Two colors drawn from the 216 cube can easily fail the contrast thresholds that WCAG defines for body text. The Web Safe Colors Chart therefore works as a reference, copy aid, and HEX-matching tool rather than an accessibility verdict. You still need to test the actual foreground and background pair with a dedicated contrast tool before declaring any text safe to read.
What "Web Safe" Actually Names
The phrase "web safe" names a fixed historical palette, not an accessibility property. It dates from the late 1990s, when most monitors could render only 256 indexed colors at once. The two dominant operating systems reserved slightly different subsets for system UI, leaving 216 colors that were guaranteed to look the same on both platforms. Browsers shipped palettes built from those 216 colors so designers could pick shades without triggering the speckled dithering that happens when a system has to approximate an out-of-gamut color on the fly.
The W3C's historical introduction to CSS documents the six evenly spaced channel levels that define the cube, and the W3C Web Accessibility Initiative lists a 216-choice color picker in its WCAG 2.1 working examples. The chart at /color/web-safe-colors/ implements the same cube from the Cartesian product of six channel levels across the red, green, and blue axes, generating exactly 216 entries in deterministic red-major, green-middle, blue-minor order. Modern displays have long since left the 256-color era behind, so the palette survives today mainly as a curiosity, a teaching tool, and a deliberate design constraint. None of those uses carry an implicit accessibility guarantee.
Why the 216 Cube Doesn't Guarantee Legible Text
Accessibility for text is governed by contrast ratios defined in the Web Content Accessibility Guidelines, not by membership in any fixed palette. A contrast ratio is computed from the relative luminance of two specific colors, and the result must clear a threshold that depends on the font size and weight in use. Common thresholds include 4.5:1 for body text and 3:1 for large text under WCAG 2.x AA, with stricter values for AAA. A pair of cube colors can easily fail these thresholds even though both entries belong to the historical palette.
Consider two web-safe colors that designers sometimes treat as "default" choices: a near-black like #000000 set on a dark green background such as #003300. Both belong to the cube, yet the foreground is darker than the background and the contrast ratio collapses to roughly 1.47:1, far below anything WCAG accepts. The same problem shows up with cube pairs like #999999 on #666666, which produce barely any separation at all, or pale yellow text like #ffff99 on a light gray such as #cccccc, which fails every AA threshold despite both colors being cube members. Membership in the 216 palette tells you nothing about how a specific foreground will read against a specific background.
The chart explicitly does not label swatches with subjective names or imply that picking from the cube satisfies any accessibility criterion. Its closest built-in cue is the visible result area, which still requires a separate contrast test before any reading decision is made.
Browsing and Matching HEX With the Chart
This is the core workflow for using the chart responsibly: pick a starting swatch or snap an outside HEX, then move to a contrast tool before committing to a design.
- Open the Web Safe Colors Chart in your browser.
- Browse the 216 swatches in the interactive grid and click any color to select it.
- Read the full six-digit HEX code in the larger result area, where it appears alongside the matching RGB triplet.
- Copy the visible code manually if your browser blocks clipboard access; the label and title attributes always carry the complete six-digit value.
- To snap an outside color, enter a valid 3-digit HEX like #abc or a 6-digit HEX like #3470d0 in the input field and select Find match.
- The matcher expands shorthand according to normal CSS rules and rounds each channel independently to the nearest of 0, 51, 102, 153, 204, or 255.
- Use the snapped result as a historical palette reference, then test the actual foreground and background pair with the Color Contrast Checker before publishing.
The Six Channel Levels That Build the 216 Cube
The 216-color cube is the Cartesian product of six allowed values across three independent channels. Each level is written in hexadecimal as 00, 33, 66, 99, CC, or FF, and they sit at even steps of 51 apart in decimal. The chart generates the grid directly from these levels rather than copying a hard-coded list, and it checks that the result contains exactly 216 unique HEX values whose channels each fall within the six allowed levels.
| Decimal | HEX | Channel intensity |
|---|---|---|
| 0 | 00 | 0% — channel off |
| 51 | 33 | 20% intensity |
| 102 | 66 | 40% intensity |
| 153 | 99 | 60% intensity |
| 204 | CC | 80% intensity |
| 255 | FF | 100% — channel full |
Multiplying 6 by 6 by 6 yields exactly 216 unique combinations, which is why the historical palette has that precise size. Independent channel snapping also makes the nearest-color function easy to audit: every channel is rounded separately and the three snapped values are reassembled. That behavior is equivalent to nearest distance in the unweighted RGB cube because the axes are independent and evenly spaced, but it is not a perceptual color-difference calculation and does not account for how human vision weighs channel changes. Gamma-encoded sRGB values are not perceptually uniform, so a specialist workflow might instead compare colors in Lab or OKLCH, account for an ICC profile, or optimize a palette across an entire image. The chart intentionally keeps the legacy palette's simple construction visible.
Testing Real Foreground and Background Pairs
Once you have chosen foreground and background candidates from the chart, the next step is to test the pair itself. Use the Color Contrast Checker to enter the two HEX values, then read the resulting ratio against the WCAG thresholds for your chosen font size and weight. A ratio of 4.5:1 or higher generally passes AA for body text, while 3:1 is the relaxed threshold for large text. AAA targets higher numbers and applies to the smallest body sizes.
The chart does not enforce this step. Its job stops at presenting the cube, copying HEX values, and snapping outside colors to the nearest cube member. Treating the snapped result as a license to skip contrast testing is the most common way the 216-cube label gets misused today. The W3C Web Accessibility Initiative page lists a 216-choice picker precisely so authors can experiment with color while still being expected to verify the pair against the published contrast guidelines.
For a deeper walk-through of specific foreground and background combinations from the cube and the contrast ratios they produce, the accessibility-focused guide at Web Safe Colors Accessibility Contrast: Pair and Test pairs every common cube pair with the threshold it actually clears.
Where the 216 Cube Still Earns Its Place
Even though it is no longer required for compatibility, the cube still does useful work in a few deliberate contexts. Designers building retro or period-accurate interfaces can pull authentic late-1990s palettes directly from the chart. Educators teaching hexadecimal channels use the cube because the math is visible: six evenly spaced levels per channel, combined across three channels, exactly 216 entries. Pixel artists and low-color game developers treat the constrained palette as a creative constraint rather than a limitation, and authors reproducing an older design can match the original swatches exactly.
Outside those contexts, the cube is generally not the right starting point for a modern brand system, a data visualization, or any interface that depends on subtle tonal separation. The chart keeps the legacy construction visible on purpose so that authors understand what the 216 entries represent and what they do not. Treat the chart as a transparent reference, a HEX matcher, and a copy aid; reach for a contrast tool whenever a real reading decision follows. "Web safe" was never a promise about legibility, and the chart does its best work when authors remember that distinction.
If you're weighing options, Is an HTML Color Names Chart Safe to Use Online? Here's Why covers this in detail.