I really like the logo used by the city of Zürich: it has a modern look, but keeps all the traditional elements of the city, the two lions and the white and blue flag. How do you know the lower left part of the flag is blue? It has the traditional heraldry hatching for blue, horizontal lines.

You can see these patterns in many places in Europe, each time a flag had to be printed or engraved into a wall. The hatching patterns for the most common colours, black, white (silver), yellow (gold), red, blue and green, defined by Silvestro de Petra Sancta, are pretty standard, but there are many other patterns for less common colours.

I really like the idea of representing colours using standard patterns, so I hacked together a quick JavaScript program that takes an image and converts it into its heraldic black and white equivalent.

The code is very simple, it just looks up each individual pixel and replaces it with the corresponding hatching – it does the job if the input is an image with flat areas with saturated colours. It supports all the colours described in the french wikipedia page on the subject. The only difference is that black is rendered as solid black, as this gives better results, and is consistent with black and white printing (as opposed to engravings).

To use it, simply upload an image, then click on the transform button, if you want to save the result, click on the download button. The code is far from perfect, there is no pre-processing, so you need images with flat colours and sharp lines (no anti-aliasing). The threshold between orange and brown is a bit problematic. The code is available on github.