top of page

Safari browser sometimes has issues displaying images...

I.e: *you have to click on the images to see them...

For a better browsing experience on Brainy-Bits

Please use Chrome, Edge or Firefox browser.

  • Writer's pictureBrainy-Bits

How to convert images to Arduino arrays values for use on displays


After publishing the last tutorial on how to build the Arduino animation frame using WS2812B led strips, I got the question on how did I create the arrays of HTML color codes to create the retro arcade characters?

Well, not by hands, that for sure!

If you think about it, there’s 256 HTML color code per characters, and for the tutorial I create 2 frames or arrays per characters for the simple animation, and there was three characters… 

So that’s 256 x 6 = 1536 individual values!!

So in this quick tutorial I’ll show you how I manage to create those by using some software.

Although I’m using Photoshop as one of the software here, you could probably use another graphic program if you wanted.

note* I’m using this for the Matrix animation frame project, but it could be useful for other projects that use a graphic lcd as well.



WS2812 LED Strip

5V 10Amps Power Supply

Arduino MEGA R3

These are Amazon affiliate links...

They don't cost you anything and it helps me keep the lights on

if you buy something on Amazon. Thank you!



Like I just mentioned Photoshop is the graphic program I’m using but if you don’t have that you can also use the very good FREE graphic program GIMP which you can download here:

The other program needed is called ‘lcd-image-converter’ you can find it here:

This program was created by and was designed by riuson to create arrays of values for programming purposes.



First thing you will need is an image.

The animation frame has a matrix size of 16×16 which makes it’s ideal for retro arcade characters.

A great website to get some of those characters is

For this tutorial I will be using the one from Galaga here: Galaga Sprite Sheet

We then open the image in Photoshop and crop it to the right size, in this case 16×16 pixels.

After we convert the image to indexed color, to limit the number of colors, and we choose Web Colors, since the Arduino code wants HTML color codes.

We then save the file in the .BMP format.

Now that we have our image in the right format, we then open it in the next program, LCD Image Converter.

At this point I advise you to watch the tutorial video to get more information on how to convert the image to array values, since it’s a lot easier to explain in a video.





GIMP graphic editor:

Sprite image resources:

9,000 views0 comments

Recent Posts

See All


All my content is and will always be Free.

If you feel that my Videos / Tutorials are helping, and you would like to contribute...

 You can toss some coins in the Tip Jar via PayPal.

Select amount then click the “Donate” button.

bottom of page