Welcome to PixelArt's Color Editor App. If you already know how to use it, rock on!!! If you don't here's the gist of it. Please note this works best on Desktop PC's

This app let's you edit images using colors, first you need to click the image at a point you feel represent the baseline color. For example if you want to turn a blue car red, click somewhere blue on the car... if you click the darker kind of blue if your switching to red you'll need to consider if you don't want to lighten the car's complexion then you'll also pick a darker red. My preference as a rule of thumb is to pick a lighter version of what I want to work with.

After you've clicked on the image a list of buttons should appear similar the one below.

Next step is you'll need to sample the colors you want to change using either "Select Colors" or "Add Colors".

Select Colors works using boxes while Add Colors works using shading. To use either you first click the button it should turn darker and look like a button that's been pressed then for Select Color click on the image where the color you want is and a small box should appear. It's resizable from the bottom right corner and draggable. So drag and scale it so it overlay's where you want to sample the color, once your done click Select Colors again and you'll see a loading icon to the left of Select Colors. Give that a few seconds to load and a bunch of colors will appear above it. Depending on how large an area you selected you'll get either less or more colors. These colors represent individually selectable color codes by clicking each cell. If you want to select only a few of them, click the ones you want then click "Update" which should be one of three buttons below this cells of colors. Otherwise if you're ok with your selection click "Select All" and it will select all the colors shown. If you want to undo this and try again click "Cancel".

For "Add Colors" you'll click the button and you will notice below the image two buttons appear: "Cancel" and "Eraser Off". To use Add Color you just shade the area you want to select the colors from using the cursor on top of the image. There's a slider on the right of "GrayScale" that determines the thickness of the brush you're using. If you also paint beyond where you wanted click "Eraser Off" and it will change to "Eraser On" and now you can Erase your selection where you need and toggle this as needed. When you're satisfied with your selection click "Add Colors" again, make sure it's the same button you clicked before to avoid bugs and you should get the same color cells. Follow the same procedure to select the colors. You can also click "Cancel" if you want to try something else like "Select Colors".

The colors you select are additive, meaning the list of new colors you select get appended to any you may have selected before. Note however you can have multiple rows of such selections, you can try this out by clicking the image multiple times and you'll get back as many rows of the buttons you use for this selection. When you're done with a row just click the cancel button to the right and it will dissapear.

Now that you have your colors selected which should come as a box of colors on the right of "Select Colors" you can try out how this works by clicking "Render". You'll see a moving animation on the right of the image and after a few seconds you'll get a grayed out image except for the parts that match your color selection. The graying out is intentional so that you know if what you selected. When you're doing a color swap you can click "GrayScale" and it will turn to "No GrayScale" so the swap will be done without turning the rest of the image grey.

To see this in effect, I recommend at first without undoing grayscale click the button on the left of "Select Colors", it should look like a black button and you'll get a color wheel of sorts depending on your browser. This is a color input field and if you know hex-code's for colors you can paste in the color or simply click anywhere on the color wheel of what you want the selected colors to be changed to. Once you're done click also "Switch Color" and "Keep Perspective" then click "Render". Once it's done processing you should get the same results but with the colors swapped.

There's also some additional ways to better fine grain your selection using "Zoom" which lets you use the same area box as "Select Colors" to select the portion of the image you want to work with. Click "Zoom" again and it will crop out that section of the image so you can work with it. When you're done click "Zoom" which should read now "Undo Zoom" to revert to the fullscale image.

You can also work with your own image using "Upload Image" which will bring a button asking you to "Choose File", browse the file and select it and it will automatically upload it and replace the default image with your own.

I've found the best way to work is in stages, like saving your work regularly as you move on, so with that in mind you would click "Update Image" to swap the rendered image on the right with the working image on the left. This way you'll be working on that image now. Make sure to undo GrayScale unless that's the effect your going for.

Finally there's "Select Area" and "Shade Area" which work like "Select Color" and "Shade Colors". These select the area you want the app to work on. If for example you had 3 blue cars stacked on top of each other but you want to work on the first one for now you'd use "Select Area" to limit this instead of searching the whole image for where the colors match to only this portion of area. When the selection is complete the button will turn green. If you want to undo the Selection click the button twice without doing any selection and it will clear the selection. It's also additive and updates the area ontop of the last selection. That's why you might consider if you want to select a new area independent of the previous selection with the same color selection undoing the last selection with a double click. You'll know this when it turns from green to blue.

And that's it! You should be good to go, though I recommend watching this in video since it's more intuitive. If you have any question you can tweet me or send me an email to muiruri.samuel@gmail.com