Pixel Art Analyzer and Color Palette Assembler

Pixel Art Tool

I created this pixel art color analyzer to help me during a project and thought I would share.

Tool Instructions

Drag and Drop an image onto this page.

Color Analysis

The Tool will loop through each pixel to record each color and will output various data such as colors, color count and pixel count. The output will be in the form of an image of the color palette, html of color info, and an array in JSON format.

Note: Since this is intended for pixel art I set a max limit on the number of pixels it will try to analyze so it doesn't kill your browser. The limit is pretty low since I haven't had time to test different sizes. Try to stay below 200x200.

Tool Output

Why I Created This Tool

I actually created this tool for the JSON aspect. While achieving that I already analyzed each pixel and color thus having that data handy. I figured I could show different info as well and this could be a useful tool for other reasons.

Also spent some time trying to make it look nice and UI/UX friendly as I figured it might be used more frequently for fun. Ya know, when you see someone else's pixel art and are curious about the colors they used or how many and how frequently, etc.

Further details on what I was doing with this, I am testing out making Dynamic Characters in Construct 3 and for this part I am testing out using the color Replace feature to swap out different things such as hair color, skin color, and clothing color. I haven't posted about it yet but here is the most recent dev blog on this project.

Tool Updates and Requests

I'm open to any requests or ideas to improve this tool. I achieved what I needed from it, to assist in my game dev, so I uploaded it simply for you all to use. I also made this as a blog post, instead of a page called 'tools' or something, so I can keep this version here permenantly and create a differnt version elsewhere if needed. As in I didn't want to wait until I thought it was perfect before sharing.

If you have an idea then scroll down to the 'comments section' and click the social media of your choice. That will take you to where I posted about it and you can comment on the post.

Quickest way to get in touch with me is to click the Discord link in my footer to join my server.

How it Works

This tool uses only JavaScript and HTML5 Canvas. It is all client side.

I'm not trying to turn this into a Canvas tutorial (let me know if you would be interested in that) so explanation will be very brief.

When uploading an image I create a canvas with JavaScript. Then I loop through each pixel to check the color. This is the part where I don't want to kill your browser if you upload a huge image, but could be setup differently to support that.

Then I do some basic data originization and output it to the screen. I use two canvases to draw the original image and the color palette, which canvas acts like an image where you can copy or save it. I basically repeat the concept in HTML because it is much simpler to add text to HTML than draw a ton of it on canvas. Plus you could not select text from canvas to copy it, if needed.

Right now the code is not minified so if interested further you can inspect it. Though, I wouldn't say it is refactored either, so beware!

Self-Promo

Just in case this tool blows up being shared or something, here is a quick self-promo in case you want to support me:

Check out my game Dave-Man.

Or follow me on a social media or two from the links below in the footer.

Hope you found this helpful in someway, or at least interesting!