Web safe colors are a fixed palette of exactly 216 colors in which each red, green, and blue channel can only be one of six values: 0, 51, 102, 153, 204, and 255, written in hexadecimal as 00, 33, 66, 99, CC, and FF. With six independent choices for each of three channels, the cube contains 6 × 6 × 6 = 216 unique colors. The set dates from an era when many displays could only show 256 indexed colors at once; by restricting every channel to six evenly spaced levels, designers could pick a swatch that was almost certain to render without dithering on both Windows and Macintosh systems, where each platform reserved roughly twenty colors for its own interface. Modern displays and browsers now support millions or billions of distinct colors, so the palette no longer serves as a compatibility requirement for ordinary styling. It survives as a teaching aid, a deliberate retro constraint, and a transparent reference for studying how a quantized RGB cube is built and matched. The Web Safe Colors Chart presents every entry in that cube as an interactive grid that you can browse, copy from, or use to snap any input HEX to its nearest member.
What the 216 Web Safe Colors Are
The 216 web safe colors come from a 6×6×6 cube: six values per RGB channel, three channels, 216 entries. That single formula defines the whole palette. The W3C's historical introduction to CSS describes these as the "browser safe" colors, and a W3C Web Accessibility Initiative example independently documents a 216-choice color picker based on the same six channel levels. Each entry is one combination of red, green, and blue, where every channel is restricted to 00, 33, 66, 99, CC, or FF.
Written as a six-digit HEX string, every swatch looks like #3399CC or #FF6600. The grid on the Web Safe Colors Chart shows all 216 entries, sorted deterministically in red-major, green-middle, blue-minor order, so the structure is visible by scanning rows and columns. The chart is generated as the Cartesian product of the six channel levels rather than copied from an opaque hard-coded list, and every entry is verified for uniqueness and valid channel membership.
The palette is "safe" only in the historical sense: it reduces the chance that a browser would dither a page color into a speckled approximation on a 256-color display. It does not guarantee that any swatch is safe for text contrast, accessible pairing, brand reproduction, or modern printing. Treat the label as a marker of when the colors were standardized, not as a quality claim about legibility.
How the 6×6×6 Cube Builds the Palette
| Channel | Decimal levels | Hex equivalents | Step size |
|---|---|---|---|
| Red | 0, 51, 102, 153, 204, 255 | 00, 33, 66, 99, CC, FF | 51 |
| Green | 0, 51, 102, 153, 204, 255 | 00, 33, 66, 99, CC, FF | 51 |
| Blue | 0, 51, 102, 153, 204, 255 | 00, 33, 66, 99, CC, FF | 51 |
| Total combinations | 6 × 6 × 6 | — | 216 |
Each row of the table corresponds to one of the three channels; the final row collapses the construction into the simple count. Because the six channel levels are evenly spaced 51 apart, every possible 8-bit value from 0 to 255 sits at a known distance from its nearest allowed level. That distance is what makes the matching algorithm predictable: round each channel independently to the closest of 0, 51, 102, 153, 204, or 255, then reassemble the three rounded levels into a new HEX.
The chart uses the same construction to verify the table itself. The generated grid is checked for exactly 216 entries, unique HEX values, and channel membership in the six allowed levels, so the displayed palette cannot drift or contain a duplicate. This makes the cube useful as a teaching tool, because every property of the table follows directly from the six-channel rule.
Find the Nearest Web Safe Color for Any HEX
- Open the Web Safe Colors Chart in your browser.
- Browse the 216 swatches and click any color to display and copy its complete six-digit HEX value. The full code appears in a larger result area, ready to paste.
- To map a color you already have, enter a valid 3-digit or 6-digit HEX code in the input field. A three-digit value such as #abc is expanded according to standard CSS shorthand rules to #aabbcc before matching.
- Select Find match to round each channel independently to the nearest multiple of 51 and reassemble the three snapped levels. The resulting swatch appears in the result area alongside its HEX.
- Use the matched swatch as a historical palette reference, then test the actual foreground and background pair with the Color Contrast Checker before using it for body text or interface labels.
Worked example: snapping #3470d0 to the nearest swatch
Take the input #3470d0. Split each channel into decimal and round to the nearest multiple of 51:
- Red: 0x34 = 52. The two nearest allowed levels are 51 (0x33) and 102 (0x66). 52 is closer to 51, so red rounds to 51.
- Green: 0x70 = 112. The two nearest allowed levels are 102 (0x66) and 153 (0x99). 112 is closer to 102, so green rounds to 102.
- Blue: 0xd0 = 208. The two nearest allowed levels are 204 (0xCC) and 255 (0xFF). 208 is closer to 204, so blue rounds to 204.
Reassembling the three snapped levels gives 0x33, 0x66, 0xCC, or #3366CC. That is the result the chart displays when you enter #3470d0.
Because each axis of the cube is independent and evenly spaced, channel-by-channel rounding gives the same answer as nearest-distance matching in the ordinary unweighted RGB cube. It is not a perceptual color-difference calculation, however, and gamma-encoded sRGB is not perceptually uniform. The visually closest swatch can occasionally differ from the Euclidean RGB result, especially in the middle of the green range, but the algorithm is easy to audit because every channel is treated independently. A specialist workflow might instead compare colors in Lab or OKLCH, account for an ICC profile, or optimize a palette across an entire image.
When the 216 Palette Still Makes Sense
Today's computers, phones, and browsers normally support millions or billions of displayable color combinations, so web-safe colors are no longer a compatibility requirement for ordinary website styling. The set survives for a few specific reasons:
- Studying quantized RGB cubes. The six-level constraint is the simplest non-trivial example of color quantization, and the chart shows exactly what each channel contributes.
- Teaching hexadecimal channels. Each swatch is a worked example of two-digit HEX for red, green, and blue, which is convenient when introducing CSS color syntax.
- Deliberately retro palettes. Designs that want the look of late-1990s web interfaces often pull directly from this cube rather than approximating it.
- Low-color artwork. Pixel art, indexed graphics, embroidery charts, and similar media sometimes restrict palettes to a fixed cube to keep file size down or stay aligned with the source format.
- Reproducing older designs. When an artifact was originally built on a 216-color palette, matching those exact entries keeps the recreation faithful.
"Web safe" here is a historical name. It does not imply that any swatch is safe for text accessibility, brand identity, print output, or every current display technology. The chart never assigns subjective color names and does not claim equivalence to Pantone, CMYK inks, material samples, or device-calibrated output. Likewise, do not restrict a modern brand or data visualization to these 216 choices unless the creative brief calls for that constraint.
Test Contrast Before Shipping the Pair
| Workflow step | What to check | Where to do it |
|---|---|---|
| Pick a foreground swatch | Read the full six-digit HEX, not the shortened three-character hint | Web Safe Colors Chart |
| Pick a background swatch | Confirm both entries are in the 216 cube if you want strict alignment | Web Safe Colors Chart |
| Test the actual pair | Contrast ratio for normal text and large text under WCAG AA and AAA | Color Contrast Checker |
| Decide on usage | Body, label, button, or decorative only | Your design system |
A palette entry is not automatically readable as foreground text. Contrast depends on both the foreground and background, on font size and weight, and on the accessibility criterion you are trying to meet. After choosing colors from the cube, test the actual pair with the Color Contrast Checker instead of assuming that a famous historical palette guarantees legibility.
Each swatch on the chart displays a shortened three-character hint to keep the 216-item grid compact, while its accessible label and title carry the complete six-digit value and RGB triplet. Selecting a swatch shows the full value in a larger result area. If the browser blocks clipboard access for any reason, the visible code remains available for manual selection.
For a deeper look at the historical list behind this cube, see the companion guide to the 216-color W3Schools palette. For the math behind cube construction and how W3C documents the six channel levels, the W3C introduction to CSS at https://www.w3.org/MarkUp/Guide/Style.html and the W3C WAI 216-color picker example at https://www.w3.org/WAI/WCAG21/working-examples/colour-picker/choosecolour.php are the original references.