The web-safe palette is the set of 216 hexadecimal colors produced when each of the red, green, and blue channels is independently chosen from six evenly spaced levels — 0, 51, 102, 153, 204, and 255 in decimal, written as 00, 33, 66, 99, CC, and FF in hex — and 6 × 6 × 6 gives 216 total colors. On an iPhone, those 216 swatches are typically viewed inside Safari rather than from a native app, so a lightweight, mobile-friendly chart that loads quickly and lets you tap to copy is the practical way to work with the palette on the device. The Web Safe Colors Chart is built for that workflow: it renders the full cube as an interactive grid, supports tap-to-select for the complete six-digit HEX, and accepts any 3- or 6-digit HEX input so you can snap an existing color to its nearest member of the cube without leaving the browser tab.
Why the 216-color cube still shows up on a modern iPhone
On a current iPhone, Safari can display millions or billions of colors without any dithering, so the 216-color cube is no longer a compatibility requirement for ordinary web styling. The palette survives for three practical reasons that still matter on a phone.
First, the cube is a deliberately constrained design tool. Designers and developers sometimes want a retro 8-bit look, a low-color illustration, or a teaching aid where the color space is small enough to inspect by eye. The W3C's historical introduction to CSS lists the same six channel levels and 216 combinations that the chart presents, so the palette is documented as a standard reference rather than folklore.
Second, the same six-level construction makes the cube easy to reason about on a small screen. Each swatch can be described by three channel letters from the alphabet {0, 3, 6, 9, C, F}, which compresses neatly into a compact grid that scrolls cleanly on a phone without forcing a zoom gesture.
Third, snapping an arbitrary HEX to the cube gives a predictable, auditable result. The chart rounds each 8-bit channel independently to the nearest multiple of 51, which is equivalent to nearest distance in the unweighted RGB cube because the levels are evenly spaced. That makes it useful for teaching, debugging, and reproducing older designs without needing a specialist color-difference model.
How to browse and copy a web-safe color on iPhone Safari
On an iPhone, the chart works like any other touch-friendly web tool. The full grid of 216 swatches is rendered in deterministic red-major, green-middle, blue-minor order from the six source levels. Each tile shows a shortened three-character hint to keep the grid compact on a small display, and the accessible label and title behind each tile hold the complete six-digit value plus its RGB triplet for screen readers.
- Open Safari on your iPhone and load the Web Safe Colors Chart page.
- Scroll the grid with a finger until you find a swatch you want to use.
- Tap the swatch once to select it; the larger result area updates to show the full six-digit HEX and the matching RGB triplet.
- Tap the copy control, or tap and hold the visible code and choose Copy from the iOS context menu.
- Switch to Notes, Mail, Messages, or your editor of choice and paste the HEX wherever you need it.
If clipboard access is denied by browser permissions, the visible six-digit code stays on screen so you can highlight and copy it manually. The chart is generated from the six source channel levels rather than copied from an opaque hard-coded list.
How to snap any HEX to the nearest cube entry on iPhone
If you already have a color in HEX and want to know which of the 216 swatches it is closest to,
- Open the Web Safe Colors Chart in Safari.
- Type or paste a 3-digit shorthand (for example, #abc) or a full 6-digit HEX (for example, #3470d0) into the input field.
- Tap Find match.
- Read the snapped swatch and its full six-digit HEX in the result area.
A 3-digit value is expanded according to normal CSS shorthand rules before matching — #abc becomes #aabbcc — and then each 8-bit channel is rounded independently to its nearest multiple of 51. So #3470d0 with channels 52, 112, 208 rounds to 51, 102, 204, which writes back as 33, 66, CC in hex, giving #3366cc.
That rounding is equivalent to nearest distance in the ordinary unweighted RGB cube because the axes are independent and evenly spaced. It is not a perceptual color-difference calculation; gamma-encoded sRGB values are not perceptually uniform, and a specialist workflow might compare colors in Lab or OKLCH instead. For everyday palette matching on a phone, however, the independent-channel approach is predictable and easy to audit on the spot.
The six channel levels that define the 216 palette
The palette is built from a single short list of channel values. Each red, green, and blue component of every one of the 216 swatches must be one of these six numbers. Any HEX outside that list — say #3470d0 — is automatically outside the web-safe set and has to be snapped if you want to land inside it.
| Decimal (0–255) | Hex value | Channel letter |
|---|---|---|
| 0 | 00 | 0 |
| 51 | 33 | 3 |
| 102 | 66 | 6 |
| 153 | 99 | 9 |
| 204 | CC | C |
| 255 | FF | F |
The chart is generated as the Cartesian product of those six levels across three channels, which guarantees exactly 216 unique entries with no duplicates and no missing values. A separate W3C Web Accessibility Initiative example lists a 216-choice color picker built from the same cube, so the construction is not proprietary to this tool.
The six channel letters {0, 3, 6, 9, C, F} also form a useful mental shortcut on a phone. Each swatch displays a shortened three-character hint to keep the 216-item grid compact, and the full six-digit value plus its RGB triplet is held in the swatch's accessible label and title for screen readers.
What "web safe" does and does not mean on iPhone
The label "web safe" is historical, not a quality claim about every individual swatch. The original purpose was to share a 216-color subset across browsers and operating systems that, at the time, often limited a page to 256 indexed colors at once, which made dithering likely for any color outside the shared cube. Modern iPhones, Macs, and PCs render far more than 216 colors cleanly, so the palette is no longer needed for ordinary compatibility.
Several things "web safe" does not cover:
- Text accessibility. Contrast depends on the foreground and background pair, plus font size, weight, and the applicable accessibility criterion. A swatch from the cube is not automatically legible as text on top of another swatch from the cube.
- Printing. The 216 colors are screen-side RGB values. They are not a Pantone equivalent, a CMYK swatch library, or a guide to how the color will reproduce on a specific press or material.
- Branding consistency. Constraining a modern brand system or data visualization to 216 colors is a creative choice, not a technical one.
- Perceptual closeness. The matcher's independent-channel rounding is predictable but not the same as a perceptual color-difference score. Two swatches can be numerically closest while visually feeling farther apart.
In other words, treat the 216 cube as a transparent reference, matcher, and copy aid, not as a guarantee that the chosen pair is accessible, brand-safe, or print-accurate.
Pair the chart with a contrast check before shipping on iPhone
Because web-safe does not imply legibility, the safest workflow on an iPhone is to pick colors with the chart and then check the actual pair. The chart should be used as a historical palette reference, and contrast should be tested separately with a foreground/background tool that runs against the WCAG AA and AAA criteria.
A practical sequence on the phone:
- Open the Web Safe Colors Chart in Safari and tap to select a swatch, or paste a HEX and tap Find match.
- Copy the resulting six-digit HEX to your clipboard.
- Open a contrast checker in the same browser, paste the value as the foreground, and set a contrasting background — or vice versa.
- Read the resulting ratio against the AA (4.5:1 for body text, 3:1 for large text) and AAA (7:1 for body text, 4.5:1 for large text) thresholds before committing to the combination in CSS, a design tool, or a code editor.
For a deeper guide to running that contrast check inside Safari on an iPhone, the walkthrough at How to Use a Color Contrast Checker on iPhone covers the same context. The W3C Web Accessibility Initiative also publishes a 216-color picker example built from this cube, which is a useful second opinion when verifying pairings before shipping.
If you're weighing options, Gradient Generator on iPhone: Build CSS in Safari covers this in detail.