# Change color palette dynamically

**URL:** https://forum.makecode.com/t/change-color-palette-dynamically/1401
**Category:** Arcade
**Created:** [March 13, 2020, 8:02pm UTC](https://forum.makecode.com/t/change-color-palette-dynamically/1401 "2020-03-13T20:02:21Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![UnsignedArduino](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/unsignedarduino/32/592_2.png) [@UnsignedArduino](https://forum.makecode.com/u/UnsignedArduino)
#### Post date: [March 13, 2020, 8:02pm UTC](https://forum.makecode.com/t/change-color-palette-dynamically/1401/1 "2020-03-13T20:02:21Z")

</div>

Hello there,

I want to change the color palette of my MakeCode Arcade project dynamically. There seem to be some extensions that can do that for me, but documentation is lacking and I don’t understand how to use it.

Is there any documentation or extensions that can help me change the color palette dynamically easily?

---

<div class="post-metadata">

### Author: ![peli](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/peli/32/12_2.png) [@peli](https://forum.makecode.com/u/peli)
#### Post date: [March 13, 2020, 8:14pm UTC](https://forum.makecode.com/t/change-color-palette-dynamically/1401/2 "2020-03-13T20:14:33Z")

</div>

Yes use the “palette” extensions. Hopefully the blocks are self-explanatory.

---

<div class="post-metadata">

### Author: ![UnsignedArduino](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/unsignedarduino/32/592_2.png) [@UnsignedArduino](https://forum.makecode.com/u/UnsignedArduino)
#### Post date: [March 13, 2020, 8:21pm UTC](https://forum.makecode.com/t/change-color-palette-dynamically/1401/3 "2020-03-13T20:21:12Z")

</div>

![2020-03-13 (1)](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/1X/cb3cbf98c9dcf41a390ab73fc11bd43b6b8f2f8c.png)

This one?

I’ve added it but I don’t see any new blocks

It’s in the explorer though

---

<div class="post-metadata">

### Author: ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)
#### Post date: [March 13, 2020, 8:34pm UTC](https://forum.makecode.com/t/change-color-palette-dynamically/1401/4 "2020-03-13T20:34:19Z")

</div>

That extension is JavaScript only. We have this one for blocks:

 ![Screen Shot 2020-03-13 at 1.33.31 PM](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/1X/0ac2784424ca30e7b918a8e535b5f4a66265a0fe.png)

It’s not very useful right now, I’m afraid, because there is no way to create palettes. @jwunderl

---

<div class="post-metadata">

### Author: ![UnsignedArduino](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/unsignedarduino/32/592_2.png) [@UnsignedArduino](https://forum.makecode.com/u/UnsignedArduino)
#### Post date: [March 13, 2020, 8:35pm UTC](https://forum.makecode.com/t/change-color-palette-dynamically/1401/5 "2020-03-13T20:35:26Z")

</div>

That’s why!

I’ve used the color extension but the only thing that seems to work is the screen to fade to black or white

---

<div class="post-metadata">

### Author: ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)
#### Post date: [March 13, 2020, 8:36pm UTC](https://forum.makecode.com/t/change-color-palette-dynamically/1401/6 "2020-03-13T20:36:47Z")

</div>

Yeah, that’s why we marked it as beta. We still need to figure out what the API for creating palettes should look like.

Do you have any suggestions? What would the ideal block look like for you @UnsignedArduino?

---

<div class="post-metadata">

### Author: ![UnsignedArduino](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/unsignedarduino/32/592_2.png) [@UnsignedArduino](https://forum.makecode.com/u/UnsignedArduino)
#### Post date: [March 13, 2020, 8:50pm UTC](https://forum.makecode.com/t/change-color-palette-dynamically/1401/7 "2020-03-13T20:50:47Z")

</div>

![palette block suggestion](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/1X/d9ce0a0caaab1f0aa846eb95b083767bc7ac84be.png)

This is what I thought of when you first asked me, but there is one major drawback - You wouldn’t see the color changes immediately so you wouldn’t know which color is being changed.

---

<div class="post-metadata">

### Author: ![UnsignedArduino](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/unsignedarduino/32/592_2.png) [@UnsignedArduino](https://forum.makecode.com/u/UnsignedArduino)
#### Post date: [March 13, 2020, 8:55pm UTC](https://forum.makecode.com/t/change-color-palette-dynamically/1401/8 "2020-03-13T20:55:20Z")

</div>

![palette block suggestion 1](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/1X/3b3c3d8474b202e8aec4cb28857bee5ed128bad6.png)

Or maybe something like this

---

<div class="post-metadata">

### Author: ![UnsignedArduino](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/unsignedarduino/32/592_2.png) [@UnsignedArduino](https://forum.makecode.com/u/UnsignedArduino)
#### Post date: [March 13, 2020, 9:03pm UTC](https://forum.makecode.com/t/change-color-palette-dynamically/1401/9 "2020-03-13T21:03:03Z")

</div>

![palette block suggestion 2](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/1X/b5f7d51170ca29d299cb28ec35156a1836f9ae89.png)

This would probably be the easiest to implement

---

<div class="post-metadata">

### Author: ![jwunderl](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/jwunderl/32/5308_2.png) [@jwunderl](https://forum.makecode.com/u/jwunderl)
#### Post date: [March 13, 2020, 9:16pm UTC](https://forum.makecode.com/t/change-color-palette-dynamically/1401/10 "2020-03-13T21:16:03Z")

</div>

The second one you mentioned (numbers 1-15 w/ a color picker field editor along the lines of the chrome one [here](https://casesandberg.github.io/react-color/)) is what I’ve been wanting to do, but just haven’t had time / forgotten about doing it when I have had time. Might be a good thing to start over the weekend, now that I’m stuck at home…

The last one you mentioned should be trivial to add, and I suppose a version with slots for values instead of a field editor will be helpful for changing colors programmatically anyways, so I’ll take a look at doing that real quick 🙂 It’s an extension in a separate repo anyways so it can be updated without a release of the editor

---

<div class="post-metadata">

### Author: ![UnsignedArduino](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/unsignedarduino/32/592_2.png) [@UnsignedArduino](https://forum.makecode.com/u/UnsignedArduino)
#### Post date: [March 13, 2020, 9:22pm UTC](https://forum.makecode.com/t/change-color-palette-dynamically/1401/11 "2020-03-13T21:22:29Z")

</div>

![RGB HSV light blocks](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/1X/2c4ff6fdc24c7eda0250f67345929220279eb189.png)

You could use the second one and be able to use these blocks.

![suggestion](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/1X/419d5b8fc1332231654fe1a6b0efe9cb9fba9f6d.png)

Or these blocks in the light extension.

---

<div class="post-metadata">

### Author: ![jwunderl](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/jwunderl/32/5308_2.png) [@jwunderl](https://forum.makecode.com/u/jwunderl)
#### Post date: [March 13, 2020, 9:32pm UTC](https://forum.makecode.com/t/change-color-palette-dynamically/1401/12 "2020-03-13T21:32:10Z")

</div>

Hm, that might be a little harder looking at it; no problem implementation wise, but it would add a dependency on the neopixel light for just those two blocks, and would probably be harder to find / interact with across two different categories; for now I think I’ll duplicate those in the color extension and we can take a look deduping that in the future (changing that package requires a full update to arcade itself). Thanks for pointing that out though!

---

<div class="post-metadata">

### Author: ![UnsignedArduino](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/unsignedarduino/32/592_2.png) [@UnsignedArduino](https://forum.makecode.com/u/UnsignedArduino)
#### Post date: [March 13, 2020, 9:33pm UTC](https://forum.makecode.com/t/change-color-palette-dynamically/1401/13 "2020-03-13T21:33:47Z")

</div>

Thanks for helping me!

---

<div class="post-metadata">

### Author: ![jwunderl](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/jwunderl/32/5308_2.png) [@jwunderl](https://forum.makecode.com/u/jwunderl)
#### Post date: [March 13, 2020, 10:22pm UTC](https://forum.makecode.com/t/change-color-palette-dynamically/1401/14 "2020-03-13T22:22:56Z")

</div>

No problem! Thanks for helping design the blocks / confirming what the design of the field editor block should ideally be!

Just added the blocks to the color fading extension, you’ll need to update it to get them. Sorry for the delay, was at the store for a bit getting some stuff for dinner 🙂 Please let me know if they give you any trouble, haven’t built anything with it besides a trivial test example but I’ll probably play around with it this weekend. ( ~~also need to figure out why the set color palette and fade from blocks broke, I think I had checked them just before the last release but for some reason the builtin palettes aren’t loading as a drop down anymore… weird~~ this should be fixed as well with v0.1.1, minor internal bug I could work around 🙂 )

 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/1X/e9e05ccaf9e44215e0fd636c054109d0978e962a.png)

---

<div class="post-metadata">

### Author: ![UnsignedArduino](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/unsignedarduino/32/592_2.png) [@UnsignedArduino](https://forum.makecode.com/u/UnsignedArduino)
#### Post date: [March 13, 2020, 10:59pm UTC](https://forum.makecode.com/t/change-color-palette-dynamically/1401/15 "2020-03-13T22:59:45Z")

</div>

Thank you so much!

I haven’t updated them yet, because I am replying on a phone. But I am so excited to try them out. 😄

Thanks.

---

<div class="post-metadata">

### Author: ![UnsignedArduino](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/unsignedarduino/32/592_2.png) [@UnsignedArduino](https://forum.makecode.com/u/UnsignedArduino)
#### Post date: [March 13, 2020, 11:08pm UTC](https://forum.makecode.com/t/change-color-palette-dynamically/1401/16 "2020-03-13T23:08:50Z")

</div>

Just tried it, looks so cool! I love the built in color palettes!

I cannot express my thanks enough 😃

---

<div class="post-metadata">

### Author: ![jwunderl](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/jwunderl/32/5308_2.png) [@jwunderl](https://forum.makecode.com/u/jwunderl)
#### Post date: [March 13, 2020, 11:13pm UTC](https://forum.makecode.com/t/change-color-palette-dynamically/1401/17 "2020-03-13T23:13:51Z")

</div>

Glad to hear it’s useful, and thanks for pointing out it broke a while back 🙂

Also, if you want to add your own color palettes (or make an extension with your own!) they’re defined here: [https://github.com/jwunderl/pxt-color/blob/master/palettes.ts](https://github.com/jwunderl/pxt-color/blob/master/palettes.ts) – the little comment magic above it is what turns it from a constant into a value in the dropdown – besides a few of the specialty ones, most are from [https://lospec.com/palette-list](https://lospec.com/palette-list)

---

<div class="post-metadata">

### Author: ![peli](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/peli/32/12_2.png) [@peli](https://forum.makecode.com/u/peli)
#### Post date: [April 12, 2020, 3:54am UTC](https://forum.makecode.com/t/change-color-palette-dynamically/1401/18 "2020-04-12T03:54:21Z")

</div>

Another variation on the theme: [Palette blocks extension](https://forum.makecode.com/t/palette-blocks-extension/1672)

---

<div class="post-metadata">

### Author: ![GameFreaq](https://avatars.discourse-cdn.com/v4/letter/g/e274bd/32.png) [@GameFreaq](https://forum.makecode.com/u/GameFreaq)
#### Post date: [April 26, 2020, 5:02pm UTC](https://forum.makecode.com/t/change-color-palette-dynamically/1401/19 "2020-04-26T17:02:49Z")

</div>

Can I set a custom colour palette for just certain sprites and then reset the default palette for the rest of the game in JavaScript?

---

<div class="post-metadata">

### Author: ![jwunderl](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/jwunderl/32/5308_2.png) [@jwunderl](https://forum.makecode.com/u/jwunderl)
#### Post date: [April 26, 2020, 5:34pm UTC](https://forum.makecode.com/t/change-color-palette-dynamically/1401/20 "2020-04-26T17:34:08Z")

</div>

Only 16 colors (including clear) can be on the screen at once - if you change colors it will change for all sprites.

One workaround, if you can find a few colors that you can live without, is to use those indices as special placeholder colors for the sprites and only ever change those - I do something like that for the team colors in [https://arcade.makecode.com/nfl](https://arcade.makecode.com/nfl) - leave all but 4 colors as one color palette, and change the last 4 based on the teams that are chosen.

[Next page](https://forum.makecode.com/t/change-color-palette-dynamically/1401.md?page=2)
