The web safe color palette contains exactly 216 colors built by combining six allowed values in each of the three RGB channels, producing 6 × 6 × 6 unique HEX codes. Each member is therefore defined by two hex digits per channel taken from the set {00, 33, 66, 99, CC, FF}, which translates to decimal levels {0, 51, 102, 153, 204, 255}. Because the three choices are independent, the palette forms a small cube sitting inside the much larger RGB cube, and every entry in the grid is a legal web safe example. The list dates back to an era when displays could show only 256 indexed colors at once and a shared, predictable palette reduced the chance that browsers would dither page colors into speckled approximations. Modern monitors render millions or billions of distinct colors, so the cube is no longer a compatibility requirement for ordinary website styling. It survives as a reference for studying quantized RGB cubes, building retro palettes, creating low-color artwork, and teaching how hex channels work. A tool like the Web Safe Colors Chart lets you browse every one of those 216 entries, copy the full six-digit code, or snap any input HEX to the nearest member of the cube.
The Six Channel Levels Behind Every Example
Every example in the 216-color web safe palette is built from the same six levels, repeated three times — once each for red, green, and blue. The level set is the only source of variation in the cube, and the table below lists both the decimal and hexadecimal form of each step. Each value below is independently selectable for its channel, which is why 6 × 6 × 6 combinations exist in total.
| Decimal | HEX digits | Role in the cube |
|---|---|---|
| 0 | 00 | Channel minimum (off) |
| 51 | 33 | First step above zero |
| 102 | 66 | Mid-low step |
| 153 | 99 | Mid-high step |
| 204 | CC | High-strength step |
| 255 | FF | Channel maximum (full on) |
The gaps between consecutive levels are uniform in linear RGB terms. That uniformity is what makes the snap-to-nearest function predictable: each channel of an input HEX is rounded independently to whichever of the six allowed values it sits closest to, and the three snapped channels are then reassembled into a new six-digit code. The chart is generated from the Cartesian product of these channel levels rather than copied from an opaque hard-coded list, which means it can be audited row by row in red-major, green-middle, blue-minor order.
Independent channel snapping is equivalent to nearest-distance matching inside the unweighted RGB cube because the axes are independent and evenly spaced. It is not a perceptual match, however. Gamma-encoded sRGB values are not perceptually uniform, so the mathematically closest swatch is not always the visually closest swatch to a human eye. Lab, OKLCH, or ΔE-based workflows account for that difference, but the legacy cube deliberately keeps the simple channel-snapping rule visible.
Concrete Web Safe Color Examples and Their HEX Codes
Browsing the 216-color cube means confronting a grid where every entry ends in two characters from the set {00, 33, 66, 99, CC, FF}. The examples below are a small cross-section of the cube, chosen to cover the corners, the gray axis, and a few mid-cube tones that designers often reach for first when they need a quick example to anchor a layout.
| Swatch | HEX code | Channel breakdown | Typical use as an example |
|---|---|---|---|
| Black | #000000 | R 00, G 00, B 00 | Background, body text on light surfaces |
| White | #FFFFFF | R FF, G FF, B FF | Background, body text on dark surfaces |
| Pure red | #FF0000 | R FF, G 00, B 00 | Warnings, primary brand red |
| Pure green | #00FF00 | R 00, G FF, B 00 | Success states, channel-maximum demo |
| Pure blue | #0000FF | R 00, G 00, B FF | Links, channel-maximum demo |
| Golden yellow | #FFCC00 | R FF, G CC, B 00 | Highlights, secondary brand accent |
| Slate blue | #336699 | R 33, G 66, B 99 | Headers, classic safe web tone |
| Brick red | #CC3333 | R CC, G 33, B 33 | Error states, accent text |
| Leaf green | #66CC66 | R 66, G CC, B 66 | Success badges, growth charts |
| Neutral gray | #999999 | R 99, G 99, B 99 | Body text on white, dividers |
| Dark charcoal | #333333 | R 33, G 33, B 33 | Headlines, dark UI surfaces |
| Light gray | #CCCCCC | R CC, G CC, B CC | Borders, disabled states |
Every row of the table obeys the same rule: each pair of hex digits must be drawn from {00, 33, 66, 99, CC, FF}. Because the three channels are independent, you can lift any combination of three values from that set and you have a legitimate web safe example. There is no hidden requirement about order or harmony — only the six-step channel restriction. The 216 entries can be generated in deterministic red-major, green-middle, blue-minor order from those six source levels, and a W3C Web Accessibility Initiative 216-choice color picker example independently lists the same construction.
Worked Example — Snapping a HEX to the Cube
To see how a modern HEX lands inside the 216 cube, take #3470d0 as an example. The matcher expands any CSS shorthand first, then rounds each 8-bit channel independently to the nearest multiple of 51. The decimal value of each channel of #3470d0 is 52, 112, and 208.
- Red channel: 52 is one unit away from 51 and 52 units away from 0, so the snap lands on 51, written as 33.
- Green channel: 112 is 10 units away from 102 and 41 units away from 153, so the snap lands on 102, written as 66.
- Blue channel: 208 is 4 units away from 204 and 47 units away from 255, so the snap lands on 204, written as CC.
Reassembling the snapped levels in red-green-blue order gives #3366cc. That is the nearest cube member to #3470d0 by independent channel rounding. According to the W3C's historical introduction to CSS, which documents the same six evenly spaced channel levels, this rule is the canonical way to map any RGB triplet onto the legacy palette. The same approach handles three-digit shorthand: an input like #abc expands to #aabbcc first, and only then are the channels snapped.
How to Browse and Copy Examples
- Browse the 216 swatches and select any color to display and copy its complete six-digit HEX value.
- To match another color, enter a valid 3-digit or 6-digit HEX code and select Find match.
- Use the selected result as a historical palette reference, then test real foreground and background pairs for contrast separately.
The interactive grid displays a shortened three-character hint to keep the 216-item view compact, while the accessible label and title for each swatch carry the complete six-digit value plus the RGB triplet. Clicking a swatch opens the full code in a larger result area so it can be read clearly and copied manually if the browser blocks clipboard access. When you enter a value like #abc, the chart expands the shorthand to #aabbcc using normal CSS behavior, and only then performs the channel-level snap. Three-digit inputs are expanded before matching, six-digit inputs are matched directly, and named colors like "tomato" or "rebeccapurple" are not accepted because they would need an external name-to-HEX table the chart deliberately avoids.
This flow keeps the cube's mechanical construction visible. There are no subjective color names, no claim of equivalence to Pantone or CMYK inks, and no device-calibrated output. Each swatch is generated from the six source levels rather than pulled from a closed lookup, which means the generated table is checked for exactly 216 entries, unique HEX values, and channel membership in the six allowed levels.
Where These Examples Still Fit in a Modern Workflow
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 216 examples remain useful in a few specific contexts:
- Studying how an 8-bit channel quantizes into six steps. The cube is a clean, finite example for teaching hex channel arithmetic and the difference between linear and gamma-encoded color.
- Building a deliberately constrained retro palette. Indie games, pixel art, and nostalgic web projects often want the visual signature of an old 256-color display.
- Creating low-color artwork or icon sets. A fixed palette of 216 entries forces strong color choices and simplifies asset reuse across platforms.
- Reproducing an older design exactly. Archival work sometimes needs the same swatches the original designer used, including the dated compatibility context.
- Demonstrating deterministic output. Because the cube is generated from the six source levels in red-major, green-middle, blue-minor order, you can audit it line by line rather than trust an opaque hard-coded list.
The label "web safe" here is a historical name. It is not a claim that every swatch is safe for text, accessibility, printing, branding, or every current display technology. Contrast depends on both the foreground and background, on font size, weight, and the applicable accessibility criterion, so after choosing any pair of examples, test the actual pair with the Color Contrast Checker rather than assuming that a famous historical palette guarantees legibility. For a deeper look at pairing and testing these swatches specifically, the web safe accessibility contrast guide walks through the same foreground-and-background combinations in more detail. Likewise, a modern brand identity or data visualization should not be restricted to these 216 choices unless the creative brief explicitly calls for that constraint. Use the chart as a transparent reference, matcher, and copy aid while keeping its dated compatibility purpose explicit.