Secret colours of the Commodore 64
In 1991 I was fourteen years old. It would be fair to say I was obsessed with computers. I proudly owned a brown 'breadbox' Commodore 64 with an exotic upgrade - an Oceanic 5.25" disk drive:
In May that year, I was reading COMMODORE FORMAT and devouring the C64 game reviews. Suddenly I read a caption that stuck with me for years afterward. Underneath a screenshot of a colourful robotic dragon, it read:
Hold on... You can't get this colour on a 64! Well, you can if you swap pale green and cyan 50 times a second!
This was astonishing to me.
Thanks to the wonder of the internets and the passion of some great magazine archivists, we can excavate the exact page at which I goggled, long ago:
This was freaky. When you owned any 8-bit computer, you became intimately familiar with its colour scheme. This simple photograph blew my mind. That blue colour just wasn't possible.
According to the caption, by presenting two colours to the eye and alternating them quickly enough, a whole new colour emerged. What would this new, secret colour look like on your crappy early-90s CRT television? The screenshot was only a hint. Would it glow? Would it flicker?
Twenty-six years later, I found out the answer.
This article is all about colour switching on the Commodore 64. There are interactive examples to play with below. I haven't found anything else on the topic, so it's possible this is the only resource on the subject.
The story has been updated since first posting on 22 March 2017.
- This article did well on Hacker News, reaching #2 on the front page. There are some amazing comment threads you should go and read.
- It also hit reddit in many places, reaching #2 on r/programming. Those comments are excellent also.
- The co-author of C64 Dragon Breed, Ashley Routledge read the story and took the time to comment with his memories!
Now - back to the story. Let's take a moment to understand why secret colours were such a big deal.
The palette was the computer
Palettes were important.
A typical 8-bit computer could only display sixteen colours. Those colours were fixed in hardware when the computer was designed.
This meant the palette defined fixed boundaries for your computer. It constrained how the visuals looked and felt. It fundamentally differentiated the Commodore 64, from the ZX Spectrum, from the Apple II, from the Amstrad CPC. You could instantly tell which computer was responsible given a screenshot.
As you'd expect, hardware palette design was crucially important. With only sixteen colours to work with, digital artists needed carefully-chosen tones to help them represent the real world.
It didn't always go well. Pity the garish palette wired into the Sinclair ZX Spectrum, which produced visuals like a hot shit aneurysm:
As it happened, the Commodore engineers did a great job. The pic below shows the palette at the top left. The rest of the image explores the pleasing gradients possible with the C64. (Note: This is not my image! Original author is unclear but I found it here.)
- It has earthy tones that match real-world objects. Compare with the hue explosion of the Speccy.
- It has many shades of grey. This lets you render monochrome images as well as things like metal. Finally the neutral grey shades can be slotted into ramps with other colours to blend them together - you can see these on the right.
So C64 owners were accustomed to screens like this:
The pixellated images above would look much better - more subtly blended - on your typical fuzzy CRT television.
After years of obsessively looking at it, this palette is firmly embedded in my mind. The colours are immediately recognisable. They resonate with the frequency of nostalgia, and make my brain tingle. I actually use these colours as my avatar on Github:
With this in mind, the idea that you could break this boundary and invent new, secret colours on the C64 - and trick the eye into seeing something that didn't exist - that was high wizardry.
If you swap two colours rapidly enough - say at 50 or 60 frames per second - you can fool the eye into seeing something that isn't there. On a machine with sixteen colours, just one or two extra can add a lot to a scene.
Since today we all live in the future and you are reading a fully programmable document on a supercomputer, let's try it.
Here's a square flipping between two colours - red and blue - every second.
Click or tap on the square to alternate the colours at 60fps (or specifically, the maximum refresh rate of your current browser and display. It would be cool to see this on a 144Hz refresh monitor).
Notice how a third colour appears? That shade of purple is not being displayed. Only red and blue are appearing - your eye is fooled into seeing a colour that isn't there. I promise I'm not cheating. That's colour switching in action.
Hit the square again to slow it down and check.
Dragon Breed demo
So way back in 1991, I was intrigued by that review but never actually owned the game. What did Dragon Breed actually look like?
First of all, it turns out that fancy colour switching isn't used in the game at all until you hit the end of STAGE 3, when a robot dragon boss shows up glowing in that weird cyan.
Sidebar: One interesting reference is to check out the original arcade game. Since we live in the future, you can play the Dragon Breed arcade in your browser right now (hit the power button, wait for boot, press 5 to insert coin then 1 to start). That's pretty mind-blowing. Unfortunately to see the dragon we're interested in, you'll have to play to the end of STAGE 3. Good luck with that.
So surely someone's captured this effect on a C64 longplay video? Well after some digging I found our famous robot dragon boss on Youtube (audio warning):
There are two problems with this video. Because it's captured at 30fps,
- It looks like shit. The sprites flicker distractingly, and
- The colour switching effect is completely lost.
If you were to play the game on an emulator at 50/60fps, the effect is convincing.
Sidebar: A note on frames per second. The European PAL C64 updated at 50fps, whereas the US NTSC systems updated at 60fps (reference). Weird huh? This means the effect would be slightly more convincing on a US machine.
Can we show the Dragon Breed effect on a web page? Well, let's play through to STAGE 3 (using cheats, phew) and screencap the boss in a couple of frames side by side:
Look at the three images all together - a totally new colour has emerged!
Also notice the flickery dragon tail: this is a limitation of sprites on the C64. The hardware didn't support enough sprites to give the player six tail segments and render all the enemies; so only three are displayed at a time and alternated every frame, producing the flickery side-effect.
We did it! We recreated Dragon Breed colour switching in the browser. Are we done?
Nope. If those two colours can be combined, what other combinations are possible? Put another way, what is the set of all possible secret colours on a given machine?
Let's find out. Put on your shades for this one! We're going to generate every unique pair of colours possible on the Commodore 64 in one glorious epilepsy-bomb. Again, tap or click to switch modes:
Pretty cool huh? It looks like the tartan for the clan McPuke.
Bear in mind every flickering square above is a unique pair of colours. I highlighted the combination that's used in Dragon Breed by giving it a border.
Notice that some combinations have a nasty strobe effect and will definitely make you feel ill. But not all of them!
Why do some work really well? It all depends on brightness. Two colours of equal brightness will blend perfectly; whereas say black and white will flicker violently.
With switching in fast mode, find a blended colour that you like. Now tap to slow it down and see which two colours are mixing to give you that hue.
And that is the story of how I read about secret C64 colours in 1991, and then twenty-six years later finally got to see them. If you're still interested and have functioning eyes, read on for bonus content.
Contribute to this article
Do you know any other games - for any computer - that use this approach? If so, let me know in the comments.
I'm collecting examples in the appendix below. I'd love to know if the Speccy ever did this...
- Check out Dragon Breed on Lemon64, a great games database.
Appendix: Full 1991 article
Before the internet, computer magazines were the only way you found out what was happening in the world of technology. It's difficult to describe how exciting it was to get your issue of ZZAP! 64 or COMMODORE FORMAT and read reviews of all the new games, or check out adverts for the peripherals you'd beg your parents/Santa for.
For maximum nostalgia, here are the full pages of that Dragon Breed review from COMMODORE FORMAT:
Appendix: Colour switching references
This is a list of every reference to 8-bit colour switching I've found on the web.
- COMMODORE FORMAT issue 5, Dragon Breed review:
- "Extra colours are achieved using colour switching, where pixels are assigned alternate colours every 50th of a second. This gives the impression of a completely new shade!"
- COMMODORE FORMAT issue 13, Q&A:
- "There's no way to increase the number of colours in the 64's palette, but there are clever software routines to give the impression of more colours. Activision's Dragon Breed uses very rapid colour switching to give an intermediate tone, and PD coders have produced a 'Fli-Pic' facility which enables you to use more than four colours per char block."
- COMMODORE FORMAT issue 32, Mayhem in Monsterland developer diary:
- "As with our background graphics we wanted more than the C64's 16 colours for sprites. However, we can't use the same method of colour mixing that we're using for the level graphics (see CF28) because we haven't got enough sprite colours. So I added a different colour mixing routine for the sprites. This rapidly flashes between two colours (of equal brightness) to create new shades."
- C64.com's interview with the Dragon Breed programmer, Ashley Routledge:
- "I especially recall the dragon with that strange shade of blue/cyan."
Appendix: How to flip images at 60fps
In writing the programs for this article I discovered it's pretty awkward to get two images to flip at 60fps without visual artifacts.
- GIFs (true GIFs, not GIFV) are too slow for 60fps.
- Manipulating a backgroundImage works but flickers like hell.
To make this work you need to create a couple of Image objects, set their src attribute and wait for them to completely load (using an event) before starting your animation loop. Phew! If you need this, view source for this article or check out this gist.
OK that's really it! Thanks for reading. If you've enjoyed this I'd love to hear from you below.