「從圖片中取得網頁安全色彩」這句話涵蓋了什麼
The web-safe palette contains exactly 216 colors, formed by six evenly spaced levels (0, 51, 102, 153, 204, 255 in decimal; 00, 33, 66, 99, CC, FF in hex) chosen independently for the red, green, and blue channels of every entry. That single sentence is the foundation of the entire 216-cube. The phrase "web safe colors from an image" describes a two-stage workflow built on top of it: you first extract a HEX value from a picture, then you snap that HEX to its nearest member of the historical 216-color browser-safe cube. The image supplies the source color; the cube supplies the constrained target. Neither stage requires the other in isolation, but combining them is exactly what the keyword asks for.
The 216-color palette dates from an era when many displays could show only 256 indexed colors at once. To reduce the chance of a browser dithering a page color into a speckled approximation, the W3C's early CSS guide standardized six evenly spaced levels per RGB channel. Six independent choices across three channels yield 6 × 6 × 6 = 216 unique colors, which is where the famous "web-safe cube" gets its name. Modern computers, phones, and browsers normally support millions or billions of displayable color combinations, so the cube is no longer a compatibility requirement for ordinary styling. It survives as a deliberate design constraint, a teaching tool for hexadecimal channels, and a way to reproduce older artwork exactly.
步驟 1：從圖片中取出 HEX
Before any snapping can happen, you need a concrete HEX value from the picture. Several reliable methods work in practice:
- Manual eyedropper in a design app. Open the image in Photoshop, GIMP, Figma, or any browser-based eyedropper, click the pixel you care about, and copy the resulting six-digit HEX.
- Browser-based average color tool. For a representative color from the whole image rather than a single pixel, the Image Average Color Finder computes an alpha-weighted mean and returns a single HEX you can hand off to the snapping step.
- Screenshot plus operating-system color picker. On macOS, Windows, and most Linux desktops, the built-in color picker accepts a HEX readout from any pixel currently on screen, including pixels inside a screenshot of an image.
- Pixel-coordinate copy from a thumbnail site. Some image hosts expose raw pixel values in their developer tools; treat any value you read this way as approximate and double-check the format.
The output of every method is a standard three- or six-digit HEX string such as #3470d0. That string is the only thing the next step actually needs. Format, casing, and any leading hash sign all behave the same way once they reach the snapping function.
步驟 2：將 HEX 對齊到 216 色立方體
With a HEX in hand, open the Web Safe Colors Chart and follow this sequence:
- Locate the HEX input field on the chart page.
- Paste or type your sampled HEX. Both 3-digit CSS shorthand (#abc) and full 6-digit codes (#aabbcc) are accepted; shorthand expands automatically according to normal CSS rules before matching.
- Select the Find match action.
- Read the snapped result displayed in the result area. The full six-digit HEX is shown there so you can copy it without ambiguity, and an accessible label exposes the same value plus the RGB triplet.
- Click any swatch in the 216 grid to cross-check that the matched color really lives in the palette and to copy its HEX directly through the click-to-select behavior.
If the browser blocks clipboard access for any reason, the visible HEX remains on screen for manual selection. The chart itself is generated as the Cartesian product of the six channel levels rather than copied from an opaque hard-coded list, which guarantees exactly 216 unique rows, no duplicates, and every channel drawn from {00, 33, 66, 99, CC, FF} only.
為什麼每個通道都以相同方式進位
The snapping rule is independent per channel, which keeps the math auditable on paper. Each 8-bit channel of the input HEX is rounded to the nearest multiple of 51, then the three snapped channels are reassembled into a fresh six-digit HEX. Because 256 ÷ 5 = 51.2, the six values 0, 51, 102, 153, 204, 255 sit exactly at the boundaries that the W3C's historical CSS guide lists. Applying the same rule to three independent axes is equivalent to nearest distance in an unweighted RGB cube.
| 十進位 | 十六進位 | 二進位 |
|---|---|---|
| 0 | 00 | 00000000 |
| 51 | 33 | 00110011 |
| 102 | 66 | 01100110 |
| 153 | 99 | 10011001 |
| 204 | CC | 11001100 |
| 255 | FF | 11111111 |
The W3C's historical introduction to CSS documents these six levels, and a separate W3C Web Accessibility Initiative example independently lists a 216-choice color picker, confirming that the cube is part of the public web record rather than a private convention. Each row of the table is the only value its channel can take inside the safe palette, and every entry in the chart comes from a deterministic red-major, green-middle, blue-minor ordering of the same six levels.
一個完整範例：#3470d0 到 #3366cc
To make the math concrete, take the HEX #3470d0 sampled from a stock photo of a sky.
- Red channel: 0x34 = 52. The nearest multiples of 51 are 51 and 102. 52 is one step away from 51 and fifty steps away from 102, so red snaps to 51 (0x33).
- Green channel: 0x70 = 112. The nearest multiples of 51 are 102 and 153. 112 is ten steps away from 102 and forty-one steps away from 153, so green snaps to 102 (0x66).
- Blue channel: 0xd0 = 208. The nearest multiples of 51 are 204 and 255. 208 is four steps away from 204 and forty-seven steps away from 255, so blue snaps to 204 (0xCC).
Reassembling the three snapped channels gives #3366cc, the same value the chart returns. The whole computation is three independent decisions, and any reader can reproduce it on paper in under a minute without needing to trust the tool's output.
這個方法無法做到的事
The independent-channel approach has clear limits worth knowing before treating the output as final:
- Not perceptually weighted. Gamma-encoded sRGB values are not perceptually uniform. A specialist workflow might compare colors in Lab or OKLCH, account for an ICC profile, or optimize a palette across an entire image. The chart keeps the legacy cube's simple construction visible instead of hiding it behind a perceptually tuned algorithm.
- Not a whole-image quantizer. Snapping one HEX converts a single color. Converting an entire photograph to web-safe colors requires a different tool that walks every pixel and applies optional dithering such as Floyd–Steinberg or ordered Bayer; the chart is not designed for that job.
- Not a naming source. The chart does not assign subjective names like "sky blue" or "Pantone 279" to its entries, and it does not imply equivalence to CMYK inks, material samples, or device-calibrated output. The palette is a set of numerical coordinates, nothing more.
- Not a perceptual guarantee. The nearest RGB swatch can occasionally differ from what your eye would pick, because the Euclidean RGB result is not perceptually weighted and does not account for how human vision weighs channel changes.
For pixel-perfect matching across an entire picture, point the workflow at a dedicated image-quantizer tool instead. For one color sampled from a picture, the Web Safe Colors Chart is the right level of effort.
務必測試最終配對的對比度
"Web safe" was a compatibility label from a specific historical era. It was never a claim that every swatch is safe for text, accessibility, printing, branding, or every current display technology. Before you ship a sampled-and-snapped color as a foreground or background, run the actual pair through the Color Contrast Checker. Contrast depends on the chosen foreground, the chosen background, the font size, the font weight, and the applicable WCAG criterion, none of which the 216 cube can predict on its own. A famous historical palette does not, by itself, guarantee legibility, and a hex with reassuring historical credentials can still fail modern contrast ratios.
For more depth on the contrast step, the Web Safe Colors Accessibility Contrast guide walks through pairing members of the cube and testing each combination with the checker. If the brief genuinely calls for a retro or constrained look, the cube still delivers: 216 predictable colors, transparent rounding math, and a result you can audit by hand. If the brief calls for accessibility-first modern UI, the cube is one ingredient rather than the whole recipe — pair it with a contrast test, a thoughtful type scale, and an understanding that the safe label refers to display compatibility, not to user safety.
For a deeper look, see Hex to RGB for Beginners: A Friendly Walkthrough.