Pixel Art Wizardry | Combine

Pixel Art Wizardry

If I could send a digital camera and a modern laptop to myself in 1985 I could have become a legendary pixel artist on the Commodore 64.

The Commodore64 home computer was a major success back in the 1980’s. It still has a cult status and coders are still pushing its hardware to its limits.
The graphics in the C64 were limited. The multicolor bitmap mode has a resolution of 160×200 pixels where each pixel has an aspect ration of 2:1. A total of 16 predefined colors were available and for each character position a subset of four colors were allowed due to the design of the hardware. There are tricks available to emulate more colors utilizing interlaced video. Mapping the video signals to obtain an accurate RGB-representation of how the original colors appeared on a TV in the 1980’s have been studied by several people measuring video signals. As a result the 16 colors could be represented as shown here.

An interesting problem is how to translate an ordinary image to a similar resolution as the C64 (with the same pixel aspect ratio) and how to translate the colors to the fixed C64-palette. The naïve solution is to measure the euclidian distance between RGB-colors. The problem is that this distance does not represent the human perception of differences between colors properly. Luckily there are decades of research available published by the International Commission on Illumination (CIE). The RGB-model is not a good representation of how human vision registers colors. The CIE came up with an alternative model called XYZ (tristimulus values). The CIE also invented the “CIELAB color space”, also known as CIE L*a*b (or “Lab”), where L* is the lightness while a* is green-red and b* is blue-yellow color components. The CIELAB color space has been proved to be useful when calculating differences between colors according to various models.

First, the RGB-value has to be converted to an XYZ-representation. This is done using a linear transformation and depending on the device we are working with different matrices can be chosen. The L*a*b* values are then calculated from the XYZ-values.

In 1976 the CIE released CIE76 which simply is the euclidian distance between two color representations in the L*a*b* color space. CIE76 was followed by CIE94 in 1994 and is defined in the L*C*h* color space, where C* is chroma and h* is hue. CIE94 included parameters to be able to distinguish between color differences in graphic arts and on textiles. In 2000 a new definition was released called CIEDE2000 containing five additional corrections improving performance in the blue region.

Greyscale pictures are often easier to convert. The first picture is of a woman in water taken by Jeremy Bishop. You can click the image to see it in full size. There are five versions of each picture. From the left we have the original picture, converted image using euclidian distance in the RGB-space, distances using CIE76, CIE94 and finally CIEDE2000. In this case, CIE94 and CIEDE2000 give similar results while RGB and CIE76 wants to include other colors.

In the next image we have a picture of a woman, taken by Dani Vivanco, where there are many similar color tones over the whole image. RGB, CIE94 and CIEDE2000 looks quite similar, but CIE76 has problems and includes various blue tones.

Now we will look at a fairly complicated image taken by Damar Jati Pranandaru. There are big differences between the different methods and we could argue that CIEDE2000 is the best performer (which it should be). CIE76 still has problems with blue tones.

A picture taken by Alex Hawthorne shows how difficult the blue tones can be to capture properly. Look at the jacket of the woman and also the blueish tone of the snow in the background. CIE76 is still a bad performer with blue lips, a brown jacket and does not want to include any blue tones in the snow. CIEDE2000 is best at capturing the facial tones. RGB wants to include more blue color than the other models. CIEDE2000 has a small amount of blue.

Just to explore more of the blue performance we have a picture taken by Toa Heftiba. RGB is very keen on choosing blue colors for the background. CIE76 is including blue colors in the face and green colors for the highlight on the top of the head. We could argue whether CIE94 or CIEDE2000 is the best representation of the original image. CIEDE2000 adds more colors to the jacket.

From Gabriel Siverio we have a very difficult image to represent. RGB adds too much green to the skin. CIE76 has problems with blue colors where it should be brown/red. CIEDE2000 adds a small patch of green to the skin to represent a highlighted area.

Dark colors are interesting to try as well as in this photo by JC Gellidon. RGB wants to choose red/brown colors. CIE76 wants to go blue/purple while CIE94 and CIEDE2000 is choosing the two red colors available in the palette.

CIEDE2000 is good at picking up good colors in difficult images like this one taken by Marius Christensen. CIE76 replaces many blue colors with red/brown and CIEDE2000 adds a skin tone to the shadow of the face.

Caleb Lucas has a similar difficult image where CIEDE2000 outperforms the other color models. CIE76 performs the worst again by adding too much blue to the face.

The intention of the corrections of CIEDE2000 was to handle the blue tones better, and it is clear that it worked based on this final picture by Maria Badasian. RGB and CIEDE2000 are quite similar, but CIE76 and CIE94 differs more.

Measuring color differences in the RGB-space works in some cases but fails miserably in other cases. CIEDE2000 is performing very well and should be the primary choice when comparing colors based on human perception.

The source code used to generate images can be found at github.

Contact us