This is an investigation into Machin postage stamps and rendering them in a browser.

Colouration

Consider the following image:

This is the blueprint for our Machin stamps. But it is hue 0° (red) throughout, so how do we recreate the different colours of the multitude of stamp denominations? We could have an image for every denomination, but that seems a little bandwidth-heavy.

One low-bandwidth solution is to take advantage of the CSS filter styling. This allows us to adjust the hue, saturation, brightness, etc. of an existing image. Try moving the sliders below:

Hue (degrees):
Saturation (%):
Brightness (%):
Contrast (%):
Approximate RGB: #000000

The "Approximate RGB" value is computed using code from a Stack Overflow answer by multiplybyzer0. The answer also does a very good job of describing the maths behind the "trick". One disadvantage of the CSS filter trick implemented here is that it cannot create multi-hue images.

Pre-Decimalisation

We can use the sliders above to try to recreate the colours of pre-decimal Machin stamps (1967-1971):

Notes:

The RGB values don't seem to match up with the ones listed on Wikipedia but they're only approximations.

Post-Decimalisation

For decimal stamps (1971-present) we can approximate the colours of all denominations up to "12p" in half-penny increments:

Notes:

Again, a full list is on Wikipedia.

Templates

If the stamps are going to be mounted, we can create templates to help us position them. The following are inline SVGs with absolute sizing (the stamps themselves are 21mm by 24mm). They are styled using CSS so that printing them out with 100% scaling should put each on their own page. See the blog posts for more details.

The twelve pre-decimal denominations can be arranged as a grid, as a ring or as a clock face (with "½d" substituting for the missing "11d" at eleven o'clock):

The twenty-four decimal denominations can be similarly arranged but with the option of a double ring:

Note that the larger templates won't fit on a sheet of A4.

Clock

The following mock-up of a pre-decimal Machin stamp clock is loosely based on a beautiful CSS-only clock by Nils Rasmusson.

Postage Stamp Problem

What stamp denominations do we require to be able to make up any amount between 1p and £1 with no more than two stamps? This is (part of) the Postage Stamp Problem and is surprisingly hard to solve in the general case. Fortunately, we are only interested in the two-stamp version and people have already done the hard work. In particular, Jukka Kohonen has found the following solution for h=2 and k=16:

{ 1, 3, 4, 5, 8, 14, 20, 26, 32, 38, 44, 47, 48, 49, 51, 52 }
The values are somewhat surprising but, with a little patience, we can see that all values between 1p and 104p can be made with no more than two stamps. We can now drastically reduce the number of "penny" denominations we need to produce to sixteen stamps, as long as we assume greater amounts are handled by a parallel "pound" denomination set, or the like.

We can also be more systematic with our colours to produce a nice rainbox effect for our imaginary set:

Accessibility

If we're going down the route of designing a new set of Machin-style postage stamps, we should consider how usable they are by people with low vision needs. This means considering aspects such as:

Colour Blindness

Choosing a limited palette of highly-distinguishable colours would be useful for trichromats, dichromats and monochromats alike. Following my investigations into colour-blind-friendly palettes, we can use the 'Chilliant Dual Dark 16' palette for our sixteen denominations:

Text Legibility

The Braille Institute has commissioned a free font named Atkinson Hyperlegible that aims for greater legibility and readability for low vision readers:

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
The quick brown fox jumps over the lazy dog.

We can use that font to label each denomination's value:

Visual Contrast

The original Machin design is based upon an engraved image. This is leads to quite poor contrast. A design with blocks of high contrast colour without gradients should be more legible:

Note that the queen's head is assumed to be printed with metallic foil.

Braille Embossing

Braille embossing the stamps would obviously improve accessibility. The Braille for denominations expressed as pence is pleasantly (almost) rotationally symmetrical:

7p → ⠼
However, it is unambiguous as Braille digits only occupy the top four dots and are guaranteed to occupy a dot in the top row. Therefore, a Braille reader can tell when the stamp is upside-down.

Numerals

As part of this investigation, I spent some time researching systems for representing numerals visually. There are a number of schemes encoded into Unicode, but most have cultural "baggage" or are not easily distinguished.

Patterns

Tally marks are a unary counting system and therefore easy to grasp. Replacing the marks with dots and organising them into patterns makes them arguably more readable. This technique has been used quite a few times:

Dice

The patterns of dots on dice possibly derived from those on playing cards.

Beyond six, the patterns are easily confused. Let us look at configurations of dots to represent the denary digits.

One

Representing "one" with a single dot, is fairly straightforward:

Two

Two dots can be oriented horizontally (2a), vertically (2b) or diagonally (2c):

Three

Ignoring rotation, three dots can form either a triangle (3a) or a line (3b):

Pattern (3b) can be confused with (2c), so we choose (3a).

Four

Four dots can be organised as a square (either filled (4a) or hollow (4b)), a diamond (4c), a cross (4d) or a Y-shape (4e).

The three arms of (4e) conjures up the notion of three, so we discount it.

Five

Ignoring rotation, five dots can be organised as a pentagon (5a), a square (5b), a cross (5c) or a bowtie (5d).

The problem with regular polygons is that, beyond about four or five vertices, they tend to become very similar, so we discount (5a). Patterns (5b) and (5c) conjure up "four", so we discount them.

Six

Six dots can be organised as a hexagon (6a), a star (6b), a square (6c) or a pyramid (6d).

Patterns (6a), (6c) and (6d) are similar to aforementioned patterns.

Seven

Seven dots can be organised as a heptagon (7a), a star (7b) or an H-shape (7c).

Pattern (7b) is similar to (6b) and (7c) is similar to (5d).

Eight

Eight dots can be organised as a filled square (8a), a hollow square (8b) or an octagon (8c).

We discount the regular polygon (8c) and prefer (8b) over (8a) because it has eight straight edges if we include the "inner" edges of the hollow region.

Nine

Amongst other configurations, nine dots can be organised as squares (9a and 9b) or a lozenge (9c).

We discount the squares as being too similar to previous patterns.

Zero

Finally, we need to represent "zero" with the absence of dots:

We need a placeholder so we discount (0a). Pattern (0b) is too similar to (1a).

Digits

By a process of elimination, we end up with ten patterns representing the denary digits:

Colours

Adding colours will help to distinguish digit shapes.

HSL Colour Wheel

Our first attempt will be to use the HSL colour wheel:

Unfortunately, colour wheels are not particularly colour-blind-friendly.

Tol Muted Qualitative Scheme

Paul Tol's 'Muted Qualitative Scheme' has better separation, but the high contrast range makes "sand" and "cyan" in particular difficult to make out on a light background:

On a dark background, "indigo" is difficult to make out:

Chilliant Pale/Deep 19

The 'Chilliant Pale/Deep 19' palette is designed to be colour-blind-friendly, but compromises by pairing entries from two lower-contrast palettes.

On dark backgrounds, the pairings can be switched:

We can now encode each stamp's denomination using the colour-coded dot patterns:

Personally, I think this is suffering from "colour overload", so we could revert to monochrome patterns:

See Also