A web safe color palette is a set of exactly 216 hex colors in which each red, green, and blue channel is restricted to one of six values: 0, 51, 102, 153, 204, or 255, written in hexadecimal as 00, 33, 66, 99, CC, and FF. Picking independently across three channels produces 6 × 6 × 6 = 216 unique combinations, each expressed as a six-digit hex code. The palette dates from an era when many displays could only show 256 indexed colors at once, so choosing colors from a shared cube reduced the chance that a browser would dither a page color into a speckled approximation. The W3C's historical introduction to CSS documents those six channel levels as the browser-safe palette, and a separate W3C Web Accessibility Initiative 216-color picker example independently lists the same grid. Modern computers, phones, and browsers support millions or billions of displayable color combinations, so web-safe colors are no longer a compatibility requirement for ordinary website styling. They remain useful, however, as a transparent reference for retro design, as a way to teach hex channels, and as a deliberately constrained palette for low-color artwork. The Web Safe Colors Chart presents the full cube as an interactive grid, lets you copy any six-digit value in one click, and maps any custom three-digit or six-digit hex to its nearest cube entry by rounding each channel independently.
Where the 216 Colors Come From
The web safe palette is built from a small, fixed set of channel levels rather than the full 0–255 range each RGB channel can take. Six levels per channel, used independently, generate the entire cube:
| Decimal level | Hex equivalent | Channel role |
|---|---|---|
| 0 | 00 | Off / no contribution |
| 51 | 33 | Quarter-strength |
| 102 | 66 | Mid-low |
| 153 | 99 | Mid-high |
| 204 | CC | Three-quarter strength |
| 255 | FF | Full strength |
Choosing these six levels independently across red, green, and blue yields exactly 216 unique colors, and the spacing is deliberate: 255 ÷ 5 = 51, so the levels cover the full range in five steps of equal size. Each result is just one of those 216 combinations, with no perceptual name, no Pantone mapping, and no claim of CMYK accuracy. The browser-safe label is a historical name from the 256-color era, not a current guarantee of accessibility, print fidelity, or readability on any specific device.
The chart itself is generated in deterministic red-major, green-middle, blue-minor order from those six source levels rather than copied from an opaque hard-coded list, and the resulting table is checked for exactly 216 entries, unique hex values, and channel membership in the six allowed levels. That construction is what lets the snap function behave predictably, and what makes the cube a useful teaching artifact: every color has a traceable recipe built from three channel choices.
Browse, Copy, and Snap Any HEX From the Cube
The Web Safe Colors Chart puts every one of the 216 hex values on a single, deterministic grid ordered by red, then green, then blue. To pull a working color out of the cube or to map an outside color into it, work through these steps:
- Open the Web Safe Colors Chart and skim the 216 swatches in red-major, green-middle, blue-minor order until you find a starting point.
- Click any swatch to select it. The full six-digit hex code appears in the result area alongside an RGB triplet, while each swatch's shortened three-character hint, accessible label, and title all carry the complete six-digit value for screen readers and tooltip checks.
- Use the copy control to put the six-digit hex on your clipboard. If a browser denies clipboard access, the visible code remains selectable text you can copy by hand.
- To bring an outside color into the cube, enter a valid three-digit shorthand such as #abc or a full six-digit hex in the match field and pick "Find match." A three-digit value is expanded to six digits first using the normal CSS shorthand rule, so #abc becomes #aabbcc before any rounding happens.
- Read the snapped result. Each red, green, and blue channel has been rounded on its own to the nearest of the six allowed levels, then reassembled into a single six-digit hex code you can drop into a stylesheet.
The snap rule is plain and predictable: each 8-bit channel is rounded independently to the nearest multiple of 51 in the allowed set {0, 51, 102, 153, 204, 255}. Because the three axes are independent, this is equivalent to nearest distance in the ordinary unweighted RGB cube, which makes the result easy to audit and reason about. It is not a perceptual color-difference calculation, so a visually closest swatch from a perceptual model such as Lab or OKLCH can occasionally differ from the Euclidean RGB result.
Worked example. Take the input #3470d0. Its hex channels are 0x34, 0x70, and 0xD0, which equal 52, 112, and 208 in decimal. Round each to the nearest allowed level:
- 52: distances of 52 to 0, 1 to 51, and 50 to 102 → nearest is 51 → hex 33.
- 112: distances of 61 to 51, 10 to 102, and 41 to 153 → nearest is 102 → hex 66.
- 208: distances of 55 to 153, 4 to 204, and 47 to 255 → nearest is 204 → hex CC.
Reassembled, the snap result is #3366CC.
Choosing the 216 Cube on Purpose
A 216-color limitation sounds small today, but that very constraint is the value proposition for several real workflows. The cube is less interesting as a compatibility fix and more interesting as a deliberate design or teaching frame.
| Workflow | Why the cube helps | What to watch for |
|---|---|---|
| Retro or pixel-art design | The six-channel grid mirrors the look of older 8-bit displays and forces a deliberately constrained visual feel. | Modern screens render the cube crisply, so pair it with crisp pixel rendering if the retro look really matters. |
| Low-color illustrations and data graphics | Knowing every possible swatch up front makes it easier to plan a coherent, limited scheme across many figures. | Color encoding in data graphics still relies on shape and label, not on the palette alone, for accessibility. |
| Teaching hex channels | Six predictable levels per channel are easier to reason about than 256 arbitrary values per channel. | Demonstrate shorthand expansion and channel rounding alongside the cube so students see the whole chain. |
| Reproducing older interfaces | Screenshots and legacy CSS often assume the 216 grid, so the chart offers an exact reference for rebuilding. | Sample rebuilt pixels against the original instead of trusting color names or memory to confirm fidelity. |
For ordinary modern branding or interface styling, an unrestricted palette built by a color palette generator offers far more nuance. Treat the 216 cube as a transparent reference, a matcher, and a copy aid rather than a default brand decision, and you will get the value of the constraint without overstating it.
Contrast, Conversion, and the Limits of "Web Safe"
The "web safe" label only describes the cube's construction; it does not promise contrast, accessibility, branding neutrality, or print fidelity. Many swatches in the cube share similar luminance and will fail WCAG contrast when paired with another mid-tone swatch as foreground against background. Color values, contrast checks, and visual appearance also follow different rules on different devices, so any workflow that reaches for "web safe" should pair the cube with a separate check rather than treating the historical name as an accessibility or quality claim.
- Text accessibility depends on the foreground–background pair plus font size and weight. Always verify the actual pair with a color contrast checker rather than assuming a historical palette guarantees legibility on screen.
- Hex and 8-bit RGB conversion is lossless inside sRGB, since the cube is just a sub-grid of sRGB. Converting in or out via a RGB to HEX converter does not change a snapped value, but it also does not produce any perceptual smoothing.
- CMYK print, Pantone spot inks, ICC-managed displays, and perceptual color models such as Lab or OKLCH are all out of scope for the cube, so treating a cube value as a print target will only give an approximation.
- The snap function is intentionally a plain unweighted RGB match, so it should be treated as a quick reference rather than a substitute for perceptual comparison across an image or a full palette.
Treat the chart like a constraint to embrace on purpose: pick colors that share a coherent slice of the cube, snap any outside hex values into the same slice, then run the resulting pairs through a real contrast checker before publishing. The discipline of 216 deliberate options is more useful today as a design and teaching tool than as a compatibility fix, and that is exactly the role the chart is built to support.