Web-safe colors are a fixed palette of exactly 216 hexadecimal colors, each one built from six allowed levels per red, green, and blue channel: 0, 51, 102, 153, 204, and 255, written in hex as 00, 33, 66, 99, CC, and FF. With three independent channels each having six choices, the math gives 6 × 6 × 6 = 216 unique entries — no more, no fewer. Every color in the cube is therefore fully predictable: if you know the three channel values, you can read the six-digit HEX directly. The name "web-safe" comes from an era when many displays could show only 256 indexed colors at once, and the cube was chosen so that a browser would not need to dither a page color into a speckled approximation.
If you have just heard the phrase for the first time, the short version is this: web-safe colors are a small, fixed list of 216 HEX values that historically looked the same across different computers. Today's monitors routinely show millions or billions of colors, so the practical compatibility reason is mostly gone. The cube still earns its keep, though, as a teaching aid for newcomers, a retro design tool, and a tidy way to snap any color you already like into the simplest possible palette.
What "Web-Safe" Really Means (and Why Beginners Hear About It)
The term gets thrown around in older CSS tutorials, design blogs, and HTML reference pages, which is why it keeps popping up for newcomers. It is not a brand, a style, or a license — it is a historical compatibility list. The W3C's introduction to CSS documents the six evenly spaced channel levels as the official source, and the W3C Web Accessibility Initiative provides an independent 216-color picker example that lists the same set.
Two facts explain why the list is exactly 216 long. First, six channel levels were chosen so the palette would fit cleanly inside the 256-color indexed display systems of the 1990s — roughly 20 colors were reserved for system use, leaving 236 usable slots, and 216 was the largest tidy cube that fit. Second, six levels per channel are easy to remember because each one is a multiple of 51. Beginners who want the underlying logic can verify both numbers with a calculator: 6 × 6 × 6 = 216, and 255 ÷ 5 = 51.
The 216-Cube in Plain English
Think of the cube as three independent sliders. The red slider can stop at 0, 51, 102, 153, 204, or 255. The green slider can stop at the same six values. The blue slider can stop at the same six values. Picking one stop on each slider produces a single color, and every combination of stops produces exactly one entry in the cube.
| Decimal channel | Hexadecimal channel | What it does |
|---|---|---|
| 0 | 00 | Channel fully off (no contribution to brightness) |
| 51 | 33 | Lowest visible level above black |
| 102 | 66 | Low-mid level |
| 153 | 99 | Mid level |
| 204 | CC | Mid-high level |
| 255 | FF | Channel fully on (maximum brightness) |
Because every channel has the same six stops, the cube has a tidy structure. Change one hex digit and you change one channel by exactly 51 decimal steps, which is its hex equivalent of 0x33. For a beginner, the practical takeaway is that every HEX code in this palette looks "round" in both decimal and hex: you will see values like #336699, #FFCC00, or #00FF66 — never #3470d0.
How to Browse, Copy, and Match HEX on the Chart
The Web Safe Colors Chart is built from the same six-level rule, generated as the Cartesian product of the six red, green, and blue stops. Three actions cover almost everything a beginner needs to do with it.
- Browse the 216 swatches. The chart presents every entry as a tile in a grid. Each tile shows a shortened three-character hint to keep the layout compact, while the full six-digit HEX and the RGB triplet are stored in the tile's accessible label and title. The grid is generated in deterministic red-major, green-middle, blue-minor order, so the rows have a logical rhythm if you scroll through them.
- Select a swatch to display and copy its complete HEX. Click any tile and the chart reveals the full six-digit value in a larger result area, ready to copy. If your browser blocks clipboard access, the visible code is still selectable manually — the chart does not hide the value behind the copy button.
- Enter a HEX input and choose Find match. Type any valid three-digit (for example #abc) or six-digit (for example #3470d0) HEX code and select Find match. The tool expands CSS shorthand when needed, then rounds each of the three 8-bit channels independently to its nearest multiple of 51, and reassembles the snapped levels into the closest cube member. The matched tile is shown so you can compare the result against the input side by side.
Once you have a matched swatch in hand, treat it as a historical reference and a copy aid rather than a guarantee. The chart is a transparent window onto the cube, not an opinion about whether the color is right for your project.
Reading a Matched Result — and What It Doesn't Tell You
The matcher uses simple, predictable math: each channel is rounded on its own, then recombined. For the input #3470d0, the channels are 0x34 = 52, 0x70 = 112, and 0xd0 = 208. Channel 52 is one step from 51 and fifty steps from 102, so it snaps to 51 (hex 33). Channel 112 sits ten steps from 102 and forty-one steps from 153, so it snaps to 102 (hex 66). Channel 208 sits four steps from 204 and forty-seven steps from 255, so it snaps to 204 (hex CC). Reassembled, the matched cube entry is #3366cc.
Because the snap is independent per channel and the cube is evenly spaced, that round is equivalent to nearest Euclidean distance inside the unweighted RGB cube. That makes the result easy to audit by hand, but it is also the limit of what the chart promises. The matcher is not a perceptual color-difference calculation; it does not account for how human vision weighs channel changes, and gamma-encoded sRGB values are not perceptually uniform. A specialist workflow that needs a visually closest swatch would compare colors in Lab or OKLCH, account for an ICC profile, or optimize a palette across an entire image. The Web Safe Colors Chart intentionally keeps the legacy construction visible rather than papering over it with a perceptual model.
Where the 216 Palette Still Makes Sense Today
The cube is no longer a compatibility requirement for ordinary website work — modern computers, phones, and browsers normally support millions or billions of displayable color combinations, so picking #3470d0 instead of #3366cc will not change how a page renders. The palette remains useful in a small set of specific situations:
- Studying quantized RGB cubes. If you are learning how hex channels work, six stops per channel are easier to internalize than the full 0–255 range.
- Building a deliberately constrained retro palette. 8-bit and 16-bit era graphics used similar limited sets, so the cube is a natural fit for vintage-inspired art or pixel-style design.
- Creating low-color artwork. Icons, badges, embroidery patterns, and laser-engraved files often need a small, fixed color set to keep production simple.
- Reproducing an older design. If you are updating a legacy site or screenshot mock-up, matching the original 216 colors keeps the look consistent.
Outside those scenarios, do not restrict a modern brand, dashboard, or data visualization to 216 choices unless the brief calls for that constraint. A general-purpose Color Palette Generator will give a more contemporary result, while the chart stays useful for the specific jobs listed above.
A Quick Note on "Safe" for Text
"Web-safe" is a historical compatibility label. It is not a claim that a swatch is safe to use as foreground text, accessible to readers with low vision, printable on uncoated stock, branded for your company, or even identical across every current display. Text accessibility depends on the contrast between a foreground and a background, plus the font size, weight, and the applicable accessibility criterion. The same blue can be perfectly readable at 18px on white and unreadable on a darker swatch from the same palette.
After picking two swatches from the chart, run the actual pair through a dedicated Color Contrast Checker to confirm the contrast ratio against WCAG AA or AAA. Treating the cube as a starting palette rather than a finished accessibility verdict is the safer beginner habit, and it keeps the chart's dated compatibility purpose clear while you use it for what it is good at.