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 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 by Slynyrd 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:

Download: file
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:

Download: file
"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!

This guide was first published on Jun 28, 2019. It was last updated on Jun 28, 2019. This page (Custom Palettes In MakeCode Arcade) was last updated on Oct 17, 2019.