Web safe colors are exactly 216 RGB combinations where every red, green, and blue channel is restricted to one of six evenly spaced levels — 0, 51, 102, 153, 204, and 255 — written in hexadecimal as 00, 33, 66, 99, CC, and FF. The "web safe" label is a historical name from the late 1990s, when most monitors and browsers could only reproduce 256 indexed colors at once and a shared cube reduced visible dithering across platforms. Modern displays render millions or billions of colors, so the cube no longer protects against compatibility problems; it is now a deliberate design constraint, a teaching aid, or a retro aesthetic. Accessibility and contrast, however, are governed by a completely separate set of rules. A swatch drawn from the 216-cube can still fail the WCAG contrast thresholds that govern readable text, and a designer who limits a palette to these 216 colors has not done any accessibility work by default. Treat the Web Safe Colors Chart as a transparent palette browser and a nearest-color matcher, then verify every actual pair with a dedicated contrast tool before shipping it on a live page.
Why "Web Safe" Does Not Mean "Accessibility Safe"
The two ideas come from different eras and solve different problems. The 216-cube was designed so that browsers running on 8-bit indexed displays would not have to dither page colors into a speckled approximation; it is a display-compatibility constraint, not a legibility one. Accessibility, by contrast, is governed by the Web Content Accessibility Guidelines published by the W3C's Web Accessibility Initiative. WCAG defines a contrast ratio between foreground and background colors and sets minimum thresholds such as 4.5:1 for normal-sized body text and 3:1 for large text (typically 18 point regular or 14 point bold) under the AA conformance level. A color chosen from the 216-cube can meet or fail those ratios depending entirely on which second cube entry it is paired with, what the body weight is, and how big the type renders.
Two popular 216-cube colors illustrate the gap. A pure red such as #FF0000 placed on a pure white background produces a contrast ratio well below 4.5:1 and fails AA for body text, even though both colors come from the official browser-safe palette. A dark navy such as #003366 on the same white background clears AA and approaches AAA. The colors themselves are equally "web safe"; only the pair, the font, and the size decide whether a reader can actually parse the text. Conflating "web safe" with "safe to read" is one of the most common mistakes designers make when reaching for a constrained palette.
The Six Channel Levels Behind the 216 Cube
Every entry in the cube is built from the same six channel levels applied independently to red, green, and blue. The Cartesian product of six choices across three channels yields 6 × 6 × 6 = 216 unique HEX values. The full set of allowed levels, written both as decimal integers and as hexadecimal pairs, is shown below.
| Decimal level | Hexadecimal level | Step from previous |
|---|---|---|
| 0 | 00 | — |
| 51 | 33 | +51 |
| 102 | 66 | +51 |
| 153 | 99 | +51 |
| 204 | CC | +51 |
| 255 | FF | +51 |
Because the six values are evenly spaced at intervals of 51 along each 8-bit channel, every cube entry can be written as three two-character hex pairs chosen from 00, 33, 66, 99, CC, FF. The same construction is documented in the W3C's historical introduction to CSS and reproduced as an example picker on the W3C Web Accessibility Initiative site. That picker is one of the canonical demonstrations of the cube, and it is independent of any single browser or design tool.
Match Any HEX to Its Nearest Cube Member
The matcher built into the Web Safe Colors Chart accepts both three-digit CSS shorthand and full six-digit HEX values. A three-digit entry such as #abc is first expanded to #aabbcc following standard shorthand rules. Then each 8-bit channel is rounded independently to its nearest allowed level of {0, 51, 102, 153, 204, 255}, and the three snapped levels are reassembled into a new HEX. Because the rounding happens one channel at a time on an evenly spaced grid, the result is exactly the same as the nearest unweighted RGB distance — but only because the axes are independent. The matcher is not a perceptual calculation: it does not weight channels the way human vision does, and it does not account for gamma-encoded sRGB non-uniformity.
A worked example with the input #3470d0 shows the snapping step by step:
- Red channel: 0x34 = 52 decimal. Of the allowed values, 51 is 1 step away and 102 is 50 steps away. Snap to 51 (hex 33).
- Green channel: 0x70 = 112 decimal. The closest allowed values are 102 (10 away) and 153 (41 away). Snap to 102 (hex 66).
- Blue channel: 0xd0 = 208 decimal. The closest allowed values are 204 (4 away) and 255 (47 away). Snap to 204 (hex CC).
- Reassembled: #3366CC.
The chart's grid 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, and the result area always shows the full six-digit value with an accessible label containing the matching RGB triplet. If your browser blocks clipboard access, the visible HEX remains selectable so the value can still be copied by hand.
How to Pick Web Safe Colors for Accessible Contrast
- Open the Web Safe Colors Chart in your browser and scan the 216-swatch grid to shortlist two or three candidate pairs that visually fit your design.
- Click each candidate swatch to select it and copy its full six-digit HEX value into your palette document.
- If your brand or source asset uses a non-cube color, paste that three- or six-digit HEX into the matcher's input field and choose Find match to snap it to the nearest cube entry. Record the snapped value.
- Choose a foreground cube entry and a background cube entry that match the visual hierarchy you want — body text, headings, buttons, or chart fills.
- Run each actual foreground/background pair through the Color Contrast Checker against the WCAG AA thresholds (4.5:1 for normal text, 3:1 for large text) and AAA where you can stretch to it.
- If a pair fails, repeat steps 4 and 5 with a darker foreground or a lighter background until the ratio clears the threshold for the font size and weight you intend to use.
Note that the chart does not label any swatch as "readable" or "high contrast". A pair that looks good on screen can still fail the formal ratio test, especially with thin or light-weight type at small sizes. Treat the chart as a palette reference and the checker as the gate.
A Pairing Workflow That Scales Beyond the Cube
Web-safe colors are useful as a transparent, easy-to-audit palette when the design brief calls for it — a 1-bit arcade look, a retro data dashboard, a teaching demo of hexadecimal channels, or a constrained print-style illustration. They are not a substitute for accessibility testing, and they should not be used to artificially limit a modern brand or a data visualization that needs a richer color range. The cube is a starting point, not an endpoint.
For projects that need both a retro feel and full WCAG conformance, keep the matcher and the checker running side by side. Pick a base cube color for the dominant surface, snap any non-cube accent to its nearest member with the chart, and then verify each composed pair with the contrast tool before publishing. If the accent lands too close to the surface for the WCAG threshold you have chosen, swap it for a more distant cube entry — for example, move from #999999 on white to either #666666 (darker, passes) or #CCCCCC on a dark surface (lighter on dark, passes). The exact ratio for any specific pair is best read straight off the contrast checker, since font size, weight, and the version of WCAG you target all change the pass-or-fail line.
When you are documenting the choice for other designers or auditors, include the snapped HEX, the RGB triplet, and the WCAG ratio you measured. That record makes the design reproducible, lets a reviewer re-run the contrast test if the type size changes, and keeps the historical "web safe" label from being misread as an accessibility claim. The legacy palette is honest about what it is: a quantized RGB cube. The accessibility work happens in the pairing step, not in the cube selection.