The original control

We authored a PNG containing #112233, #AABBCC, #157F7C and #F47B52. Our checker inspected each two-digit channel pair, produced shorthand only for equal pairs, then enumerated every grayscale byte from 0 through 255 using that same test. The test operates on exact integers rather than visual similarity.

#112233 → #123 exactly
Results from our authored fixture and the exact comparison described below.

What the saved files measured

The first two swatches shortened to #123 and #ABC. The teal and coral controls did not qualify. The grayscale enumeration found sixteen qualifying levels: 0, 17, 34, 51, 68, 85, 102, 119, 136, 153, 170, 187, 204, 221, 238 and 255. Each qualifies because its hexadecimal byte repeats the same digit.

Original test fileDetected format / modeDimensionsBytesDistinct decoded RGBA values
shorthand-controls.pngPNG / RGB240 × 1204314

These are source-file measurements made with Python 3.12.14, Pillow 12.3.0 and libwebp 1.6.0. The manifest records complete file hashes, decoded RGBA hashes and the relevant coordinates. File sizes are measured bytes for these inputs, not forecasts for other images.

How to interpret this comparison

Expanding shorthand duplicates each digit. That makes #123 expand to #112233, while truncating #157F7C to #157 would expand to #115577 instead. This is an exact representation constraint, not a suggestion to round a brand color to a nearby shorthand. The complete grayscale enumeration is a second check on the pair rule beyond the four authored swatches.

Original experiment file previews on white, with detected formats and dimensions
These are previews of authored test files, composited on white for the diagram where necessary. They are not screenshots of a browser test.

Repeat this exact test

  1. Run the shorthand case and compare exact_shorthand against the source HEX values.
  2. Expand every non-null shorthand by duplicating its three digits and verify the original six digits return.
  3. Keep the full code for a swatch whose exact_shorthand is null; do not replace that result with a guessed abbreviation.

Download and unpack the ZIP. With Python and Pillow installed, run the command below. Compare the generated measurements.json with the included report. The script regenerates fixtures and computes the measurements; it does not obtain values from this article.

python reproduce.py --case exact-three-digit-hex --out rerun

Scope and limits

We tested six-digit opaque RGB and its exact three-digit CSS representation. Alpha shorthand and perceptual nearest-color selection are separate questions. A shorter notation does not promise a visibly equivalent result when digits were discarded.

Our own sample is a diagnostic control. Applying its conclusion to another file requires checking that file and the operations performed on it. We have not measured a global error rate or established that an automatic palette is an exhaustive list of image colors.

Can I shorten #157F7C by taking one digit from each pair?

That would produce #157, which expands to #115577. It is a different RGB value, so the original code should be kept for an exact match.

Watch the source-file comparison

Original diagrams and synthetic English narration. Caption sentence timings are approximate.