About

The websafe palette contains exactly 216 colors formed by restricting each RGB channel to multiples of 51 (0x33). This constraint dates to 8-bit display adapters that could only render 256 indexed colors, of which 40 were reserved by operating systems. Selecting a color outside this set caused dithering artifacts on those displays. The websmart palette relaxes the step to 17 (0x11), yielding 4096 colors expressible as doubled-nibble hex codes (e.g., #1188CC). Modern browsers render 24-bit color, but websafe values remain relevant in constrained environments: email clients, embedded firmware displays, low-bandwidth SVG optimizations, and accessibility overlays where palette restriction reduces cognitive load. This tool quantizes any input color to both palettes and reports the perceptual shift using CIE76 ΔE so you can judge whether the substitution is visually acceptable. A ΔE below 2.3 is generally imperceptible; above 5, most observers notice the difference.

Formulas

Each RGB channel is quantized independently. For a channel value c and quantization step s, the nearest quantized value q is:

q = round(cs) × s

For websafe, s = 51. For websmart, s = 17. The result is clamped to [0, 255].

Perceptual color distance uses CIE76 ΔE in CIELAB space:

ΔE = √(L₁ − L₂)² + (a₁ − a₂)² + (b₁ − b₂)²

where L, a, b are obtained by converting RGB → XYZ (D65 illuminant) → CIELAB. A ΔE < 1.0 is imperceptible; ΔE > 5.0 indicates a clearly visible shift.

Where c = input channel value (0 - 255), s = quantization step, q = quantized output, L = lightness, a = green-red axis, b = blue-yellow axis.

Reference Data

Channel Value (Dec)	Hex	Websafe	Websmart	Step 51 Nearest	Step 17 Nearest
0	00	✓	✓	0	0
17	11	✗	✓	0	17
34	22	✗	✓	51	34
51	33	✓	✓	51	51
68	44	✗	✓	51	68
85	55	✗	✓	102	85
102	66	✓	✓	102	102
119	77	✗	✓	102	119
136	88	✗	✓	153	136
153	99	✓	✓	153	153
170	AA	✗	✓	153	170
187	BB	✗	✓	204	187
204	CC	✓	✓	204	204
221	DD	✗	✓	204	221
238	EE	✗	✓	255	238
255	FF	✓	✓	255	255
Websafe valid values per channel: 00, 33, 66, 99, CC, FF (6 values → 6³ = 216 colors)
Websmart valid values per channel: 00, 11, 22 … FF (16 values → 16³ = 4096 colors)

Frequently Asked Questions

Early operating systems (Windows, Mac OS) reserved 40 of the 256 available indexed colors for system UI elements. The remaining 216 slots were filled by taking 6 evenly spaced values per channel (0, 51, 102, 153, 204, 255), giving 6³ = 216 combinations that rendered identically across platforms without dithering.

Websafe rounds each channel to the nearest multiple of 51, producing only 216 possible colors. Websmart rounds to the nearest multiple of 17, yielding 4096 colors. Websmart values always produce doubled-nibble hex digits (e.g., #2288BB), which compress well and were supported by early 12-bit displays. The websmart result is always at least as close or closer to the original than the websafe result.

RGB Euclidean distance treats all channels linearly, but human vision is nonlinear - we are more sensitive to green than blue, and more sensitive to lightness changes than chrominance shifts. CIE76 ΔE operates in CIELAB space, which was designed so that a unit distance corresponds to a roughly uniform perceptual difference. A ΔE of 2.3 is considered the "just noticeable difference" threshold.

Yes. Every websafe value is a subset of the websmart palette. Since 51 is a multiple of 17 (51 = 17 × 3), all six websafe channel values (0, 51, 102, 153, 204, 255) are also valid websmart values. The 216-color websafe set is entirely contained within the 4096-color websmart set.

For standard desktop and mobile browsers, no - all modern displays support 24-bit color. However, websafe constraints remain useful in email HTML rendering (some clients dither non-safe colors), embedded LCD panels with limited color depth, SVG optimization where palette reduction shrinks file size, and accessibility tools that map interfaces to reduced palettes for cognitive accessibility.

The standard rounding rule applies: Math.round() rounds 0.5 upward. For example, with websafe step 51, a channel value of 25 (which is 25/51 ≈ 0.49) rounds down to 0, while 26 (26/51 ≈ 0.51) rounds up to 51. The converter uses banker's rounding implicitly via JavaScript's Math.round(), which rounds half-integers toward positive infinity.