Web safe colors form a fixed palette of 216 colors built from six allowed levels for each of the red, green, and blue channels — 0, 51, 102, 153, 204, and 255 — written as 00, 33, 66, 99, CC, and FF in hexadecimal. Combining six choices independently across three channels produces 6 × 6 × 6, or exactly 216 unique colors. That quantization is the source of every web-safe palette idea you can build: any scheme that lives inside the 216 cube has predictable channel math, consistent appearance on older displays, and a simple rule you can teach or audit at a glance. Use the Web Safe Colors Chart to browse the complete cube, copy any six-digit HEX code, or snap an arbitrary color to its nearest cube member.
The 216 number is not a marketing choice. It is the product of two facts: most displays of the era could show 256 indexed colors, and reserving 40 of those for system use left a stable 216-color subset. Browsers, designers, and the W3C settled on the cube construction so a color chosen on one machine was likely to render without dithering on another. Modern displays show millions or billions of colors, so the palette is no longer a compatibility requirement — it is a deliberate design constraint, a teaching tool, and a quick source of reproducible retro schemes. Any palette idea built from the cube inherits those properties automatically.
Where Palette Ideas Start in the 216 Cube
The 216 cube is constructed deterministically: every channel can only be one of six values, and any combination is valid. That is why palette ideas from this set are predictable. You are not browsing a curated list of decorative colors — you are picking coordinates from a quantized RGB lattice. The chart is generated as the Cartesian product of the six source levels in red-major, green-middle, blue-minor order, which makes the underlying math visible rather than hidden behind a hard-coded list.
Here are the six allowed channel levels and how they appear in a HEX code:
| Decimal level | Hex digit | Approximate role |
|---|---|---|
| 0 | 00 | Off / pure dark |
| 51 | 33 | Low |
| 102 | 66 | Low-mid |
| 153 | 99 | Mid |
| 204 | CC | Mid-high |
| 255 | FF | Full / pure light |
Every web-safe HEX code is just a way of saying which three of those six values were chosen for red, green, and blue. For example, #003366 is red at 00, green at 33, and blue at 66 — a deep blue you can verify by inspection. Because the channel choices are independent, the cube gives you roughly equal visual stepping along each axis, which makes it a clean starting grid for almost any scheme.
Six Palette Patterns You Can Build From the Cube
Because the cube is a small, well-behaved set, you can build the most common palette patterns directly from it without any external picker. The patterns below describe the relationship between chosen swatches and rough visual direction; the exact six-digit codes are pulled straight from the chart.
- Monochrome ramp. Lock red and green to fixed levels and step only blue (or another single channel) through all six values. This produces six-tone scales for backgrounds, hover states, or data shading.
- Analogous warm or cool band. Pick three swatches whose dominant channels differ by only one level. They sit next to each other on the cube and read as a unified temperature.
- Complementary split. Pick a base swatch, then pick a second one whose channels are roughly inverted on at least two of the three axes. The chart's nearest-match function snaps arbitrary colors to the cube so you can find a complement for almost anything.
- Neutral backbone plus one accent. Use three swatches near the gray axis — red, green, and blue close to equal — for body, surface, and divider roles, then add one saturated accent chosen from the same cube.
- Retro high-contrast pair. Pair #000000 with #FFFF00, #00FFFF, #FF00FF, or one of the saturated mid-level swatches. These combinations evoke early-90s operating-system palettes and remain immediately readable on most displays.
- Quarter-tone print simulation. Pick swatches whose channels sit at 00, 66, CC, or FF only. The resulting four-level subset reads as a deliberate half-toning, useful for low-color artwork and bitmap styling.
These patterns are not new — they are how designers built schemes when 216 was the entire visible palette. Treating them as a constraint is often the fastest path to a coherent look, which is one reason palette ideas drawn from the cube still circulate in modern retro and brutalist design.
How to Build a Web-Safe Palette With the Chart
This is the practical workflow that turns the chart into a finished palette.
- Open the Web Safe Colors Chart and scan the 216 swatches in red-major, green-middle, blue-minor order until a candidate color catches your eye.
- Click the swatch to select it. The chart displays the full six-digit HEX code in a larger result area and copies it to your clipboard; if the browser blocks clipboard access, the code is still visible for manual selection.
- Repeat for each palette role you need — primary, secondary, surface, accent, and divider are a typical five-role set.
- If your brief starts with a brand color outside the cube, paste its three- or six-digit HEX into the Find match field and select the button. The chart expands CSS shorthand such as #abc to #aabbcc, rounds each 8-bit channel independently to the nearest of 0, 51, 102, 153, 204, or 255, and reassembles the result.
- For example, #3470d0 has channels 0x34 (52), 0x70 (112), and 0xD0 (208). Rounding each independently: 52 snaps to 51 (0x33), 112 snaps to 102 (0x66), and 208 snaps to 204 (0xCC). The reassembled result is #3366CC, which you can verify against the cube.
- Collect your chosen HEX codes in a comment block at the top of your stylesheet and treat them as a fixed palette, not a suggestion.
Ready-Made Pair Ideas From the Cube
Some pairings work because of how the cube is constructed, not because of any decorative quality. Here are a few starting points you can verify against the chart and adapt for your own project. The exact contrast ratios depend on your chosen foreground, background, font size, and weight, so always test the actual pair separately — for example with the Color Contrast Checker — rather than assuming a historical palette guarantees legibility.
- Cool corporate. A #003366 base with #FFFFFF type, plus #CCCCCC dividers and #FFCC00 as a single accent.
- Soft document theme. #FFFFCC background, #333300 body text, and #006600 link color — every value sits inside the cube.
- High-energy retro UI. #000000 background, #00FF00 primary action, #FF00FF secondary action, #FFFF00 highlight.
- Neutral editorial. #FFFFFF surface, #999999 secondary text, #333333 body, and a single saturated #CC0000 accent for pull quotes.
Each of these lists deliberately stays inside the 216-cube HEX format, which is what makes them reproducible on older browsers, bitmap mockups, or teaching materials without any color-management surprises.
When a 216 Palette Idea Still Fits the Brief
Modern web pages are not restricted to 216 colors, and you should not constrain a contemporary brand to the cube unless the brief calls for it. The cube still earns its place in a small set of well-defined scenarios.
| Scenario | Why the 216 cube helps |
|---|---|
| Retro or vintage UI reproduction | Authentic to the era and reproducible on legacy systems |
| Teaching hexadecimal channels | Only six values per channel make the math visible |
| Low-color artwork and pixel assets | Predictable banding and easy dithering control |
| Quantized RGB studies and data viz prototypes | Equal channel stepping produces clean step charts |
| Branding constraint exercises | Forces decisive choices from a deliberately small set |
Outside those scenarios, the cube functions as a reference rather than a rule. The W3C's introduction to CSS documents the six-level construction as historical browser-safe context, and the W3C Web Accessibility Initiative example independently lists the 216-color picker — useful as primary sources, not as a mandate for modern styling.
Pitfalls to Avoid When Choosing From 216 Swatches
Three common errors show up repeatedly when designers reach for web-safe palettes.
- Treating "web-safe" as accessible. The name describes historical browser behavior, not contrast. Two web-safe swatches can still fail WCAG contrast requirements at small body sizes. Always test the actual pair against the rule you are targeting.
- Restricting a brand palette to 216 unnecessarily. Limiting a modern identity to the cube removes meaningful color choices that your audience expects on current displays. Use the chart as a reference for snapping or matching, not as a creative ceiling.
- Assuming nearest-cube equals perceptually nearest. The chart rounds each channel independently, which is equivalent to Euclidean distance in the unweighted RGB cube. Unweighted RGB is not perceptually uniform, so the visually closest swatch can sometimes differ from the channel-snapped result. If you need the visually closest swatch for an image or photograph, compare colors in Lab or OKLCH instead.
Used with those guardrails in mind, the Web Safe Colors Chart becomes a fast, transparent source of palette ideas: deterministic in construction, easy to audit by hand, and still the cleanest way to teach how hexadecimal channels actually map onto a quantized color cube.
Related reading: Gradient Generator on Windows: Build CSS in Edge.
Related reading: Color Palette Generator From Image: Start With a HEX.