Web safe colors are a fixed set of exactly 216 shades and variations built from six evenly spaced levels in each of the red, green, and blue channels. The six decimal levels are 0, 51, 102, 153, 204, and 255, written in hexadecimal as 00, 33, 66, 99, CC, and FF. Because the three channels are independent, the total number of unique shades equals 6 × 6 × 6 = 216. Every swatch in the palette is one specific combination of those channel levels, so the variations inside the set are simply the cross-product of the six choices for red, six for green, and six for blue. This structure means the palette behaves like a quantized RGB cube: you can move along one axis by jumping between the six red levels, along two axes by jumping between 36 red–green pairs, and across all three axes by moving between 216 unique HEX codes. To inspect or copy any of those 216 shades and variations, open the Web Safe Colors Chart, which presents every entry as an interactive swatch with its full six-digit HEX value.
The Six Channel Levels That Build Every Shade
The web-safe palette is not a curated list of designer-friendly colors. It is the result of a single, mechanical rule: each of the three RGB channels can only be one of six values. In decimal, those six levels are 0, 51, 102, 153, 204, and 255. In the two-digit hexadecimal notation CSS uses, they become 00, 33, 66, 99, CC, and FF. The step size between adjacent levels is 51 in decimal (or 0x33 in hex), which divides the full 0–255 range into five equal steps.
That even spacing controls how many distinct shades exist within any single channel. Pick red alone: there are exactly six possible reds in the cube, ranging from pure black (0) to full red (255). Add green, and you get 6 × 6 = 36 red–green combinations, six of which have matching red and green values. Add blue, and the total becomes 6 × 6 × 6 = 216, which is the entire palette. The six levels are the only knobs; everything else in the chart is a combination of those knobs.
The W3C's historical introduction to CSS documents these six channel levels as the foundation of the browser-safe palette, and the W3C Web Accessibility Initiative's older color-picker example independently lists the same 216-entry grid. The W3C sources confirm the rule, while the Web Safe Colors Chart turns that rule into a browsable reference you can copy from.
| Decimal level | Hex level | Binary | Role in the cube |
|---|---|---|---|
| 0 | 00 | 00000000 | Channel fully off (no light) |
| 51 | 33 | 00110011 | Lowest visible shade above zero |
| 102 | 66 | 01100110 | Lower-mid shade |
| 153 | 99 | 10011001 | Upper-mid shade |
| 204 | CC | 11001100 | Bright shade below maximum |
| 255 | FF | 11111111 | Channel fully on (full light) |
Each row of this table is a valid value for any single channel. The six rows in combination are the source of every variation in the 216-color set.
How the 216 Variations Are Constructed
Every swatch in the palette corresponds to a specific triple of channel values (R, G, B) drawn from the six allowed levels. That makes the cube predictable. Eight of the 216 shades sit at the corners of the cube, including black (#000000), white (#FFFFFF), the three pure primaries (#FF0000, #00FF00, #0000FF), and the three pure secondaries (#FFFF00, #00FFFF, #FF00FF). Six shades run along the pure grayscale diagonal where red, green, and blue share the same level. The remaining variations fill the edges and the interior, where each channel picks its own level independently.
| Cube region | Channel pattern | What you see there |
|---|---|---|
| Corners | Each channel at 00 or FF | Black, white, three primaries, three secondaries |
| Grayscale axis | Red = Green = Blue | Six even steps from #000000 to #FFFFFF |
| Primary-mixed edges | One channel varies, two match | Transitions from black through a primary toward white |
| Cube interior | All three channels take different allowed levels | Mixed tints where each channel is independent |
The chart arranges every one of these variations in a deterministic red-major, green-middle, blue-minor order generated from the six source levels rather than copied from a hard-coded list. The generated table is checked for exactly 216 entries, unique HEX values, and channel membership in the six allowed levels, which keeps the table reproducible and auditable.
Browse, Copy, and Match a Shade
The fastest way to work with the 216 cube is to use the Web Safe Colors Chart as a live reference. The chart presents every swatch as a clickable cell in the interactive grid, displays a shortened three-character hint inside each cell, and exposes the full six-digit HEX code through the cell's accessible label, title, and a larger result area when the swatch is selected.
- Browse the grid to find a shade. Scan the 216 swatches until you find a variation that fits your design. The deterministic row order means related shades (for example, every swatch that uses #33 as its red channel) cluster together.
- Select a swatch to see its full HEX. Click the cell. The chart shows the complete six-digit HEX code in a result area so you can paste it into CSS, an image editor, or a style guide.
- Use the shortened hint to read compactly. Each swatch shows a three-character label to keep the grid readable; rely on the full six-digit value for production code so the exact channel levels are unambiguous.
- Match an existing HEX to the cube. When you have a color from outside the palette, type either a three-digit shorthand (such as #abc) or a six-digit HEX (such as #3470d0) into the match input and run the lookup.
- Use the result as a reference, not a final palette. Treat the matched swatch as a starting point for a deliberately retro look, then test any foreground/background pair separately for accessibility.
Snap a HEX to the Nearest Cube Variation
The matching step is not a perceptual comparison. It is a per-channel rounding to the nearest of the six allowed levels, which is mathematically equivalent to nearest distance in the unweighted RGB cube because the axes are independent and evenly spaced. The matcher expands a three-digit shorthand such as #abc to #aabbcc under normal CSS shorthand rules before snapping, then rounds each channel independently.
Worked example for #3470d0:
- Parse the channels. #3470d0 splits into red = 0x34 = 52, green = 0x70 = 112, blue = 0xD0 = 208.
- Round each channel independently to the nearest of {0, 51, 102, 153, 204, 255}. Red 52 rounds to 51 (distance 1, next level 102 is 50 away). Green 112 rounds to 102 (distance 10, next level 153 is 41 away). Blue 208 rounds to 204 (distance 4, next level 255 is 47 away).
- Reassemble the snapped channels into HEX. 51 → 33, 102 → 66, 204 → CC. Combined: #3366CC.
Independent channel snapping makes the result predictable and easy to audit, but it is not a perceptual color-difference calculation and does not account for how human vision weighs channel changes. Gamma-encoded sRGB is not perceptually uniform, so the visually closest swatch can sometimes differ from the Euclidean RGB result. A specialist workflow might instead compare colors in Lab or OKLCH, account for an ICC profile, or optimize a palette across an entire image.
What the Swatch Labels Mean
The 216-cell grid would be unreadable if every cell showed the full six-digit HEX inline. Each swatch therefore displays a shortened three-character hint to keep the grid compact, while its accessible label and title contain the complete six-digit value and RGB triplet. Screen readers and keyboard users still hear the complete value. Selecting a swatch shows the full value in a larger result area, which is where the chart surfaces the complete code for manual selection.
Clipboard access can be denied by browser permissions. When that happens, the visible code in the result area remains available for manual selection and copy, so the workflow does not stop at a permission prompt.
When the 216 Shades Still Matter
Modern 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 chart stays useful in a few specific scenarios: studying the geometry of a quantized RGB cube, picking a deliberately constrained retro palette, creating low-color artwork or pixel-style illustrations, teaching how hexadecimal channels combine, and reproducing an older design whose source files reference specific 216-cube values.
"Web safe" here is a historical name. It is not a claim that every swatch is safe for text contrast, accessibility, printing, branding, or every current display technology. Treat the palette as a transparent reference, a snap-to-cube matcher, and a copy aid, while keeping its dated compatibility purpose explicit.
Limits and Pitfalls of the 216 Cube
A few constraints are easy to miss when working with the cube:
- The snap is per-channel, not perceptual. Independent channel rounding is predictable, but the visually closest swatch can occasionally differ from the Euclidean RGB result. Compare colors in a perceptually uniform space when the goal is "what looks closest" rather than "what is closest in raw RGB".
- Cube membership does not guarantee legibility. 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 applicable accessibility criterion. After choosing shades, test the actual pair with a dedicated contrast tool.
- The palette is not branded, named, or material-bound. The chart does not label swatches with subjective names or imply equivalence to Pantone, CMYK inks, material samples, or device-calibrated output.
- Do not restrict a modern brand or data visualization to 216 choices unless the brief calls for it. The constraint is a creative option, not a quality floor.
For a beginner-friendly walkthrough of the same six-channel rule, see Web Safe Colors for Beginners: A Plain-English Guide. The chart itself accepts any three- or six-digit input and returns the nearest cube variation immediately, so the worked example above can be reproduced directly inside the tool.
For a deeper look, see Is a Color Contrast Checker Safe to Use Online?.