# 216 COLORS IN MAKECODE?! ...sort of

**URL:** <https://forum.makecode.com/t/216-colors-in-makecode-sort-of/25616>\
**Category:** Game Design\
**Tags:** graphics-and-math\
**Created:** [January 4, 2024, 9:54pm UTC](https://forum.makecode.com/t/216-colors-in-makecode-sort-of/25616 "2024-01-04T21:54:29Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sarge](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/sarge/32/19590_2.png) [@Sarge](https://forum.makecode.com/u/Sarge)\
**Post date:** [January 4, 2024, 9:54pm UTC](https://forum.makecode.com/t/216-colors-in-makecode-sort-of/25616/1 "2024-01-04T21:54:29Z")

</div>

The other day, somebody suggested mapping the palette to red, green and blue colors and making colors from those three colors. I wasn’t sure it would work, but I tried anyway (spoiler alert - it didn’t work.)

I wrote this script for creating a pixel, with three subpixels - red, green, and blue. Each subpixel has 6 shades, from 0 (off) to 5 (brightest). This produces 6 ^ 3 combinations or 216 combinations total.

In the following example, you can see a pixel on screen having its subpixels randomised. My idea was to try and draw with these pixels, but it seems as if the pixels can’t be small enough. If I scale up the screen enough to fit 160x120 of these “big pixels” I made (3x3 each) to a resolution of 480x360, the subpixels are still highly visible, defeating the purpose of this experiment.

Pixels work by tricking our eyes into seeing multiple colors blened as one. No matter how high I made the resolution, all three subpixels would still be visible, and it would look like a mess. I even scaled the screen up to resolutions of 1440x1080, but at that point this method would become unusuable due to the lag (and the subpixels were still visible!)

So, in short - while it is an amusing idea, it is unfortunately not doable in makecode.

> **[RGB test](https://arcade.makecode.com/S19547-76384-33818-88640)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

---

<div class="post-metadata">

**Author:** ![ChimbroDaPro](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/chimbrodapro/32/15852_2.png) [@ChimbroDaPro](https://forum.makecode.com/u/ChimbroDaPro)\
**Post date:** [January 4, 2024, 11:27pm UTC](https://forum.makecode.com/t/216-colors-in-makecode-sort-of/25616/2 "2024-01-04T23:27:10Z")

</div>

Aww… so close…

---

<div class="post-metadata">

**Author:** ![randomuser](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/randomuser/32/32505_2.png) [@randomuser](https://forum.makecode.com/u/randomuser)\
**Post date:** [January 5, 2024, 12:09am UTC](https://forum.makecode.com/t/216-colors-in-makecode-sort-of/25616/3 "2024-01-05T00:09:48Z")

</div>

Hmm… are you sure it’s game over? What about if the pattern really did repeat across the whole screen?

---

<div class="post-metadata">

**Author:** ![Sarge](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/sarge/32/19590_2.png) [@Sarge](https://forum.makecode.com/u/Sarge)\
**Post date:** [January 5, 2024, 5:23pm UTC](https://forum.makecode.com/t/216-colors-in-makecode-sort-of/25616/4 "2024-01-05T17:23:22Z")

</div>

Tried it with max values (5, 5, 5). Since they are mapped to RGB(255, 255, 255) or in other words #FFFFFF, the entire screen should have been white. Unfortunately, the pattern was very clearly visible at any resolution.

Here’s what that looks like @ 480x360

> **[RGB Fullscreen](https://arcade.makecode.com/11370-22555-16817-95969)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

---

<div class="post-metadata">

**Author:** ![InvalidProject](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/invalidproject/32/32554_2.png) [@InvalidProject](https://forum.makecode.com/u/InvalidProject)\
**Post date:** [January 5, 2024, 5:25pm UTC](https://forum.makecode.com/t/216-colors-in-makecode-sort-of/25616/5 "2024-01-05T17:25:05Z")

</div>

As much as this seems it wouldn’t work, it actually does! You need to paste it all over the screen, which creates the illusion of fluidity. This would make it so it tricks the eyes into blending the entire screen into one color! If you try this, it may work.

---

<div class="post-metadata">

**Author:** ![Sarge](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/sarge/32/19590_2.png) [@Sarge](https://forum.makecode.com/u/Sarge)\
**Post date:** [January 5, 2024, 5:33pm UTC](https://forum.makecode.com/t/216-colors-in-makecode-sort-of/25616/6 "2024-01-05T17:33:55Z")

</div>

> [@Sarge](#):
>
> Unfortunately, the pattern was very clearly visible at any resolution.
> 
> Here’s what that looks like @ 480x360
> 
> [https://arcade.makecode.com/11370-22555-16817-95969](https://arcade.makecode.com/11370-22555-16817-95969)

Bad timing, lol

---

<div class="post-metadata">

**Author:** ![InvalidProject](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/invalidproject/32/32554_2.png) [@InvalidProject](https://forum.makecode.com/u/InvalidProject)\
**Post date:** [January 5, 2024, 5:59pm UTC](https://forum.makecode.com/t/216-colors-in-makecode-sort-of/25616/7 "2024-01-05T17:59:32Z")

</div>

Can change the colors?

---

<div class="post-metadata">

**Author:** ![Luke](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/luke/32/32519_2.png) [@Luke](https://forum.makecode.com/u/Luke)\
**Post date:** [January 5, 2024, 6:01pm UTC](https://forum.makecode.com/t/216-colors-in-makecode-sort-of/25616/8 "2024-01-05T18:01:57Z")

</div>

I’ve done some dithering stuff before and the colours turned out really well

 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/8/89675635bf3e5b4c9ef478c220d3e89d589e0de8.png)  
This is just red and purple from the default makecode palette but it looks really accurate even at this small resolution  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/5/500ac45c7837793f62cfec05bfc587904ccd4e75.png)  
Is there some kind of limited spectrum that could be achieved?  
Basically instead of RGB what about using other colours

---

<div class="post-metadata">

**Author:** ![Sarge](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/sarge/32/19590_2.png) [@Sarge](https://forum.makecode.com/u/Sarge)\
**Post date:** [January 5, 2024, 7:12pm UTC](https://forum.makecode.com/t/216-colors-in-makecode-sort-of/25616/9 "2024-01-05T19:12:51Z")

</div>

That would be dithering, not RGB. It’s actually a common method used on old consoles to give the illusion of more colors!

---

<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:** [January 5, 2024, 7:13pm UTC](https://forum.makecode.com/t/216-colors-in-makecode-sort-of/25616/10 "2024-01-05T19:13:03Z")

</div>

Try doing a checkerboard pattern instead of all pixels having 3 bars? (So kinda like dithering @Luke mentioned)

---

<div class="post-metadata">

**Author:** ![randomuser](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/randomuser/32/32505_2.png) [@randomuser](https://forum.makecode.com/u/randomuser)\
**Post date:** [January 8, 2024, 5:40pm UTC](https://forum.makecode.com/t/216-colors-in-makecode-sort-of/25616/11 "2024-01-08T17:40:56Z")

</div>

OOF not quite… Thanks for trying!

---

<div class="post-metadata">

**Author:** ![randomuser](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/randomuser/32/32505_2.png) [@randomuser](https://forum.makecode.com/u/randomuser)\
**Post date:** [January 8, 2024, 5:41pm UTC](https://forum.makecode.com/t/216-colors-in-makecode-sort-of/25616/12 "2024-01-08T17:41:00Z")

</div>

Ahh so a 2 color mix does work!

---

<div class="post-metadata">

**Author:** ![pigpigeons\_r\_c00l](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/pigpigeons_r_c00l/32/12313_2.png) [@pigpigeons\_r\_c00l](https://forum.makecode.com/u/pigpigeons_r_c00l)\
**Post date:** [January 8, 2024, 6:07pm UTC](https://forum.makecode.com/t/216-colors-in-makecode-sort-of/25616/14 "2024-01-08T18:07:58Z")

</div>

wow  
…

---

<div class="post-metadata">

**Author:** ![Sarge](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/sarge/32/19590_2.png) [@Sarge](https://forum.makecode.com/u/Sarge)\
**Post date:** [January 8, 2024, 6:36pm UTC](https://forum.makecode.com/t/216-colors-in-makecode-sort-of/25616/15 "2024-01-08T18:36:27Z")

</div>

Okay, that made it better! Still not perfect, and increasing the resolution doesn’t make it much better (also ruins performance)

This is the subpixel pattern I used

 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/8/885f73a5fc68e6374c4943de1981c7cdfca01f5c.png)

Maybe changing the pattern could make it look better?

> **[RGB Dither](https://arcade.makecode.com/45472-63728-57810-53861)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

(This is full white 5, 5, 5)

---

<div class="post-metadata">

**Author:** ![robotosaurus](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/robotosaurus/32/19294_2.png) [@robotosaurus](https://forum.makecode.com/u/robotosaurus)\
**Post date:** [January 8, 2024, 7:11pm UTC](https://forum.makecode.com/t/216-colors-in-makecode-sort-of/25616/16 "2024-01-08T19:11:59Z")

</div>

Fond out why it doesn’t work. You know about color printers? they use 0xff00ff-1 0x00ffff-2 0xffff00-3 0x000000.  
if you print a color with 1 at 100%  
2 at 75 % and 3 at 50% you can remove 3 and 25% of 2 and  
50% of 1 from the color and add 50% of 4 you get the same color.  
You can do the same with red green blue white.

---

<div class="post-metadata">

**Author:** ![randomuser](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/randomuser/32/32505_2.png) [@randomuser](https://forum.makecode.com/u/randomuser)\
**Post date:** [January 8, 2024, 9:16pm UTC](https://forum.makecode.com/t/216-colors-in-makecode-sort-of/25616/17 "2024-01-08T21:16:35Z")

</div>

Oooo much better! Took me a bit to spot the pixels!

---

<div class="post-metadata">

**Author:** ![Brohann](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/brohann/32/17380_2.png) [@Brohann](https://forum.makecode.com/u/Brohann)\
**Post date:** [January 8, 2024, 9:28pm UTC](https://forum.makecode.com/t/216-colors-in-makecode-sort-of/25616/18 "2024-01-08T21:28:17Z")

</div>

like this?

> **[CMY Dither](https://arcade.makecode.com/S55267-27976-52629-35769)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

---

<div class="post-metadata">

**Author:** ![robotosaurus](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/robotosaurus/32/19294_2.png) [@robotosaurus](https://forum.makecode.com/u/robotosaurus)\
**Post date:** [January 8, 2024, 9:54pm UTC](https://forum.makecode.com/t/216-colors-in-makecode-sort-of/25616/19 "2024-01-08T21:54:30Z")

</div>

Don’t use cmyb that only works with paint use rgbw that will work with displays.

---

<div class="post-metadata">

**Author:** ![Luke](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/luke/32/32519_2.png) [@Luke](https://forum.makecode.com/u/Luke)\
**Post date:** [January 8, 2024, 10:41pm UTC](https://forum.makecode.com/t/216-colors-in-makecode-sort-of/25616/20 "2024-01-08T22:41:42Z")

</div>

> [@robotosaurus](#):
>
> that only works with paint

As someone who paints I am very confused about the use of cyan, magenta, yellow and blue paint to mix colours

---

<div class="post-metadata">

**Author:** ![ChimbroDaPro](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/chimbrodapro/32/15852_2.png) [@ChimbroDaPro](https://forum.makecode.com/u/ChimbroDaPro)\
**Post date:** [January 8, 2024, 10:44pm UTC](https://forum.makecode.com/t/216-colors-in-makecode-sort-of/25616/21 "2024-01-08T22:44:33Z")

</div>

Oh yeah that breaks my eyes-

[Next page](https://forum.makecode.com/t/216-colors-in-makecode-sort-of/25616.md?page=2)
