# Custom Color Palettes for MakeCode Arcade Games
## Overview
https://www.youtube.com/watch?v=8LMiFPuj37w
Make your games look amazing with your own custom color palette!
You can use external tools to create sprites for MakeCode Arcade, such as Aseprite, Piskel, and Photoshop, but until now you have probably been working with the default 16 color palette. But no longer! Now, you can create a custom palette to suit your game's design!
How about a stylish monochrome green "Matrix" look? Or moody Steampunk, earthtones? Gritty, yet neon-filled Cyberpunk? Cheery jewel tones? Blues and whites for a winter scene? Any of these are possible!
In this guide, you'll learn a bit of the history behind game color palettes, as well as how to use resources and tools to create and import your own 16 color palette into MakeCode Arcade to include with your game.
## Parts
You can do everything in the guide inside the Chrome browser using MakeCode Arcade and its built-in game console simulator, or you may want to pick up a handheld game development system, such as PyGamer or PyBadge/PyBadge LC to play on the go!
### Adafruit PyGamer Starter Kit
[Adafruit PyGamer Starter Kit](https://www.adafruit.com/product/4277)
**Please note: you may get a royal blue _or_ purple case with your starter kit (they're both lovely colors)**
What fits in your pocket, is fully Open Source, and can run CircuitPython, MakeCode Arcade or Arduino games you write yourself? That's right,...
Out of Stock
[Buy Now](https://www.adafruit.com/product/4277)
[Related Guides to the Product](https://learn.adafruit.com/products/4277/guides)
### Adafruit PyGamer for MakeCode Arcade, CircuitPython or Arduino
[Adafruit PyGamer for MakeCode Arcade, CircuitPython or Arduino](https://www.adafruit.com/product/4242)
What fits in your pocket, is fully Open Source, and can run CircuitPython, MakeCode Arcade or Arduino games you write yourself? That's right, it's the **Adafruit PyGamer!** We wanted to make an entry-level gaming handheld for DIY gaming, and maybe a little...
Out of Stock
[Buy Now](https://www.adafruit.com/product/4242)
[Related Guides to the Product](https://learn.adafruit.com/products/4242/guides)
### Adafruit PyGamer Acrylic Enclosure Kit
[Adafruit PyGamer Acrylic Enclosure Kit](https://www.adafruit.com/product/4238)
You've got your PyGamer, and you're ready to start jammin' on your favorite arcade games. You gaze adoringly at the charming silkscreen designed by Ada-friend PaintYourDragon. The nostalgia is palpable!
Cradling the PCB in your hands, you realize there's something...
In Stock
[Buy Now](https://www.adafruit.com/product/4238)
[Related Guides to the Product](https://learn.adafruit.com/products/4238/guides)
### Lithium Ion Polymer Battery with Short Cable - 3.7V 350mAh
[Lithium Ion Polymer Battery with Short Cable - 3.7V 350mAh](https://www.adafruit.com/product/4237)
Lithium-ion polymer (also known as 'lipo' or 'lipoly') batteries are thin, light, and powerful. The output ranges from 4.2V when completely charged to 3.7V. This battery has a capacity of 350mAh for a total of about 1.3 Wh. If you need a larger (or smaller!) battery,
In Stock
[Buy Now](https://www.adafruit.com/product/4237)
[Related Guides to the Product](https://learn.adafruit.com/products/4237/guides)
### Mini Oval Speaker with Short Wires - 8 Ohm 1 Watt
[Mini Oval Speaker with Short Wires - 8 Ohm 1 Watt](https://www.adafruit.com/product/4227)
Hear the good news! This wee speaker is a great addition to any audio project where you need 8 ohm impedance and 1W or less of power. We particularly like this speaker as it is small and comes with nice skinny wires with a connector on the end. It has a handy...
Out of Stock
[Buy Now](https://www.adafruit.com/product/4227)
[Related Guides to the Product](https://learn.adafruit.com/products/4227/guides)
### Adafruit PyBadge for MakeCode Arcade, CircuitPython, or Arduino
[Adafruit PyBadge for MakeCode Arcade, CircuitPython, or Arduino](https://www.adafruit.com/product/4200)
What's the size of a credit card and can run CircuitPython, MakeCode Arcade or Arduino? That's right, its the **Adafruit PyBadge!** We wanted to see how much we could cram into a 3 3⁄8 × 2 1⁄8 inch rounded rectangle, to make an all-in-one dev board with...
Out of Stock
[Buy Now](https://www.adafruit.com/product/4200)
[Related Guides to the Product](https://learn.adafruit.com/products/4200/guides)
### Adafruit PyBadge LC - MakeCode Arcade, CircuitPython, or Arduino
[Adafruit PyBadge LC - MakeCode Arcade, CircuitPython, or Arduino](https://www.adafruit.com/product/3939)
What's the size of a credit card and can run CircuitPython, MakeCode Arcade or Arduino even when you're on a budget? That's right, it's the **Adafruit PyBadge LC!** We wanted to see how much we could cram into a 3 3⁄8 × 2 1⁄8 inch...
Out of Stock
[Buy Now](https://www.adafruit.com/product/3939)
[Related Guides to the Product](https://learn.adafruit.com/products/3939/guides)
# Custom Color Palettes for MakeCode Arcade Games
## Color Palettes
Games made for modern consoles, handhelds, and computers have effectively unlimited color palettes -- 24-bit RGB graphics that offer millions of colors. But limited color palettes have a tremendous charm of their own, and are often necessary to deal with the memory limitations of plucky little handheld systems built with microcontrollers.
MakeCode Arcade games are made with 16-color palettes, and really we've only got 15 colors, since the first slot in the palette index is taken up by the transparent "color"! But fear not, some of your favorite iconic games of yore were made with only 2, 4, 8, or 16 colors, so we can rest assured that these constraints can still produce beautiful artwork!
## History
In early systems, limitations on memory and display hardware forced creative use of small palettes. In fact, the arcade version of _ **Mario Bros.** _ introduced Luigi as a palette swapped version of his brother Mario! This meant not having to store an extra sprite in memory, just simply change the color indices.
In many cases, a fixed palette of colors is loaded along with a game level. You can see this in _ **Super Mario Bros.** _ for NES, where a different palette is used for outdoor, underground, dungeon, and underwater levels.
## Fixed Palettes
Early consoles and 8-bit home computers often had a fixed palette (unlike MakeCode Arcade, which can use a palette of any 16 colors). This often lead to a recognizable "house style" for each system.
Here are the color palettes for the Apple II, ZX Spectrum, and IBM Color Graphics Adapter, as per the [Wikipedia article](https://en.wikipedia.org/wiki/List_of_8-bit_computer_hardware_graphics) on 8-bit computer hardware graphics.
This means that all games developed for those systems had to fit their graphics into their associated palettes (save for perceptual tricks such as dithering to create additional looks).
## 16-color Examples
Let's have a look at a couple of examples here of limited palettes that were chosen to work best with their subjects. The [**Industrial Pack** by OllieBerzs](https://ollieberzs.itch.io/industrial-pack) and [**Dino Characters** by Arks](https://arks.itch.io/dino-characters) are both asset packs from [**itch.io**](https://itch.io/game-assets)
Here's what a 16-color palette for the industrial pack looks like (reduced from the original 40 colors):
You can tell that we need a different type of palette for these cute Dinos! Note how they each have shading that necessitates two values per hue, so two greens, two reds, two yellows, and two blues.
Remember our pal Trash Panda? Here's her splash screen in the original MakeCode Arcade palette:
Now here's how she looks with a "Matrix" style monochrome green palette:
## Palette Swapping/Color Cycling Wizardry
We mentioned above the use of palette swapping to save memory for storing sprites in the example of Mario and Luigi. Another highly awesome use of this technique is to save frames of animation. Instead of swapping out a large number of sprite bitmaps, the animation of palette index colors can create beautiful, sophisticated effects, such as the [work by Mark J. Ferrari](http://www.effectgames.com/demos/canvascycle/?sound=0) (If you'd like to see more in depth on his techniques, please check out [this Game Developer's Conference '16 presentation](https://www.youtube.com/watch?v=aMcJ1Jvtef0).)
Here's another great example of palette swapping used for a damage hit effect from [Shovel Knight](https://yachtclubgames.com/shovel-knight/). Thanks to Mr. Certainly in the [Adafruit Discord server](https://discordapp.com/invite/5FBsBHU) for the suggestions!
## Resources
There are many good resources for game color palettes out there. Here are some favorites:
- [Lospec Palette List](https://lospec.com/palette-list)
- [Itch.io](https://itch.io/search?q=palettes)
- [Paletton](http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF)
- [Adobe Color](https://color.adobe.com/create)
# Custom Color Palettes for MakeCode Arcade Games
## Custom Palettes In MakeCode Arcade
All of this talk of color palettes is great, but how do we actually implement them in MakeCode Arcade? Currently, all games use a default palette and there isn't a direct way in the Blocks interface to change this.
If you create a sprite and open the sprite editor, you'll see the familiar set of colors that can be chosen.
The [Developer Documentation on Art and Images](https://arcade.makecode.com/developer/images) for MakeCode Arcade goes into greater detail on color usage. It says:
> Images in arcade are stored using 4 bits per color. The color `0` is reserved for transparency so, at any one time, you have the remaining 15 colors available to work with. The image color values are really indices that map to 16 entries of the current palette of RGB colors. The default palette for the MakeCode UI is here:
>
> ```
> #000000 // transparency
> #ffffff
> #ff2121
> #ff93c4
> #ff8135
> #fff609
> #249ca3
> #78dc52
> #003fad
> #87f2ff
> #8e2ec4
> #a4839f
> #5c406c
> #e5cdc4
> #91463d
> #000000
> ```
## Hex Values
What the heck are those things, they don't look like colors? Well,to the computer they do! Those are hexadecimal numbers that represent individual colors. #ffffff is white, #ff2121 is a deep red, and so on. But how do we get these values? Luckily, most any image creation software will tell you your colors in many formats, such as RGB (red, green, blue), CMYK (cyan, magenta, yellow, black), and even hexadecimal.
The color palette resources on the previous page will also give you hex values, and often can import a chosen palette as a hex list.
Here's the [Steam Lords palette](https://lospec.com/palette-list/steam-lords) by [Slynyrd](https://lospec.com/rayslynyrd) on Lospec:
This is a gorgeous piece of example art Slynyrd included with the palette:
If you download the HEX File link, you'll get this:
```
213b25
3a604a
4f7754
a19f7c
77744f
775c4f
603b3a
3b2137
170e19
2f213b
433a60
4f5277
65738c
7c94a1
a0b9ba
c0d1cc
```
We can edit the HEX file in a text editor to add some formatting that we'll use in MakeCode Arcade. We need to create a new first entry that's a throw-away, since MakeCode Arcade will use it as the transparency slot. I just added a 000000 as line one.
Next, we need to loose one entry to keep the list to 16 total, I decided to get rid of the last entry from the list, which was a light gray-blue.
Then, I added the formatting that makes this a list we can use in the code.
Your file should look like this:
```
"palette" : [
"#000000",
"#213b25",
"#3a604a",
"#4f7754",
"#a19f7c",
"#77744f",
"#775c4f",
"#603b3a",
"#3b2137",
"#170e19",
"#2f213b",
"#433a60",
"#4f5277",
"#65738c",
"#7c94a1",
"#a0b9ba"
]
```
Save that list somewhere handy, we'll need to copy and paste it in a moment.
## Edit MCA Palette
If you're in **Blocks** mode currently, click the **JavaScript** button at the top of the interface.
This switches over to the code editor mode. To see what files are in use, and edit them, click the **Explorer** button under the simulator.
Next, click on the **pxt.json** file entry in the list under **Explorer**. This is where setting for the game are stored and edited.
Next, click the **Edit Settings As text** button.
Here we'll see some details about the game file. This is where we can add our new palette!
Add a comma and a newline after the last line of text, but before the closed curly brace, as shown, and then paste your formatted palette hex code list.
We need to refresh the game now, by clicking on the **main.ts** file in the **Explorer list.** Here, you can click on the artist palette icon to open the sprite editor and you'll see your new, custom palette appear on the left of the editor! Also, notice how those colors appear in your zombie hamburger. Yikes!
Perhaps this house from the image gallery looks a bit nicer with our new Steam Lords palette!
Now, you can head back to the Blocks editor if you like and continue making your game with your custom color palette!
## Featured Products
### Adafruit PyGamer for MakeCode Arcade, CircuitPython or Arduino
[Adafruit PyGamer for MakeCode Arcade, CircuitPython or Arduino](https://www.adafruit.com/product/4242)
What fits in your pocket, is fully Open Source, and can run CircuitPython, MakeCode Arcade or Arduino games you write yourself? That's right, it's the **Adafruit PyGamer!** We wanted to make an entry-level gaming handheld for DIY gaming, and maybe a little...
Out of Stock
[Buy Now](https://www.adafruit.com/product/4242)
[Related Guides to the Product](https://learn.adafruit.com/products/4242/guides)
### Adafruit PyGamer Acrylic Enclosure Kit
[Adafruit PyGamer Acrylic Enclosure Kit](https://www.adafruit.com/product/4238)
You've got your PyGamer, and you're ready to start jammin' on your favorite arcade games. You gaze adoringly at the charming silkscreen designed by Ada-friend PaintYourDragon. The nostalgia is palpable!
Cradling the PCB in your hands, you realize there's something...
In Stock
[Buy Now](https://www.adafruit.com/product/4238)
[Related Guides to the Product](https://learn.adafruit.com/products/4238/guides)
### Lithium Ion Polymer Battery with Short Cable - 3.7V 350mAh
[Lithium Ion Polymer Battery with Short Cable - 3.7V 350mAh](https://www.adafruit.com/product/4237)
Lithium-ion polymer (also known as 'lipo' or 'lipoly') batteries are thin, light, and powerful. The output ranges from 4.2V when completely charged to 3.7V. This battery has a capacity of 350mAh for a total of about 1.3 Wh. If you need a larger (or smaller!) battery,
In Stock
[Buy Now](https://www.adafruit.com/product/4237)
[Related Guides to the Product](https://learn.adafruit.com/products/4237/guides)
### Mini Oval Speaker with Short Wires - 8 Ohm 1 Watt
[Mini Oval Speaker with Short Wires - 8 Ohm 1 Watt](https://www.adafruit.com/product/4227)
Hear the good news! This wee speaker is a great addition to any audio project where you need 8 ohm impedance and 1W or less of power. We particularly like this speaker as it is small and comes with nice skinny wires with a connector on the end. It has a handy...
Out of Stock
[Buy Now](https://www.adafruit.com/product/4227)
[Related Guides to the Product](https://learn.adafruit.com/products/4227/guides)
### Adafruit PyGamer Starter Kit
[Adafruit PyGamer Starter Kit](https://www.adafruit.com/product/4277)
**Please note: you may get a royal blue _or_ purple case with your starter kit (they're both lovely colors)**
What fits in your pocket, is fully Open Source, and can run CircuitPython, MakeCode Arcade or Arduino games you write yourself? That's right,...
Out of Stock
[Buy Now](https://www.adafruit.com/product/4277)
[Related Guides to the Product](https://learn.adafruit.com/products/4277/guides)
### Adafruit PyBadge for MakeCode Arcade, CircuitPython, or Arduino
[Adafruit PyBadge for MakeCode Arcade, CircuitPython, or Arduino](https://www.adafruit.com/product/4200)
What's the size of a credit card and can run CircuitPython, MakeCode Arcade or Arduino? That's right, its the **Adafruit PyBadge!** We wanted to see how much we could cram into a 3 3⁄8 × 2 1⁄8 inch rounded rectangle, to make an all-in-one dev board with...
Out of Stock
[Buy Now](https://www.adafruit.com/product/4200)
[Related Guides to the Product](https://learn.adafruit.com/products/4200/guides)
### Adafruit PyBadge LC - MakeCode Arcade, CircuitPython, or Arduino
[Adafruit PyBadge LC - MakeCode Arcade, CircuitPython, or Arduino](https://www.adafruit.com/product/3939)
What's the size of a credit card and can run CircuitPython, MakeCode Arcade or Arduino even when you're on a budget? That's right, it's the **Adafruit PyBadge LC!** We wanted to see how much we could cram into a 3 3⁄8 × 2 1⁄8 inch...
Out of Stock
[Buy Now](https://www.adafruit.com/product/3939)
[Related Guides to the Product](https://learn.adafruit.com/products/3939/guides)
## Related Guides
- [Adafruit PyBadge and PyBadge LC](https://learn.adafruit.com/adafruit-pybadge.md)
- [Introducing Adafruit PyGamer](https://learn.adafruit.com/adafruit-pygamer.md)
- [MakeCode Arcade: Sparky Invaders](https://learn.adafruit.com/makecode-arcade-sparky-invaders.md)
- [NES Emulator for Arcada](https://learn.adafruit.com/nes-emulator-for-arcada.md)
- [Playing Gamebuino META Games on Arcada](https://learn.adafruit.com/playing-gamebuino-meta-games-on-arcada.md)
- [How to train new TensorFlow Lite micro speech models](https://learn.adafruit.com/how-to-train-new-tensorflow-lite-micro-speech-models.md)
- [Trash Panda: The Game](https://learn.adafruit.com/trash-panda-the-game.md)
- [Next Level MakeCode Arcade Games](https://learn.adafruit.com/next-level-makecode-arcade-games.md)
- [AdaBox 012](https://learn.adafruit.com/adabox012.md)
- [PYOA for PyGamer/PyBadge - Adding Cursor Support to CircuitPython](https://learn.adafruit.com/cursor-for-circuitpython.md)
- [Program in Logo on an Apple II](https://learn.adafruit.com/program-logo-on-an-apple-ii.md)
- [Making a Name Tag in MakeCode Arcade](https://learn.adafruit.com/making-a-name-tag-in-makecode-arcade.md)
- [JOY of Arcada — USB Game Pad for Adafruit PyGamer and PyBadge](https://learn.adafruit.com/joy-of-arcada-usb-game-pad-for-adafruit-pygamer-pybadge.md)
- [PyGamer Thermal Camera with AMG8833](https://learn.adafruit.com/pygamer-thermal-camera-amg8833.md)
- [Submitting Games to MakeCode Arcade Front Page](https://learn.adafruit.com/submitting-games-to-makecode-arcade-front-page.md)
- [Re-MakeCode the Classics: Py Hunter](https://learn.adafruit.com/re-makecode-the-classics-spy-hunter.md)