When beginners ask for advice about how to improve their use of color in pixel art, a common suggestion is to check their image in grayscale. This way, they can more clearly see their usage of light, shadow and contrast without the interference of hue. However, this process is trickier than first seems, and there's a lot of bad advice out there. So I thought I'd post a guide of what to do and what not to do.

For an example image, I'll be using a still life by the painter Rachel Ruysch[commons.wikimedia.org]. It may not be pixel art, but it's in the public domain, it has a strong range of lights and darks, and ultimately the same rules of art in general apply to pixel art for this case.


My image is in RGB color mode, not indexed or gray. To check the sprite's color mode, go to Sprite > Color Mode. Because the 'S' in "Sprite" is underlined and the 'M' in "Mode" are underlined, that means that you can hold down the Alt key, press S, then press M to get to this menu with the keyboard. Alt+R will select RGB color mode.


Under Edit > Preferences, in the Color section, I've prioritized the sRGB[en.wikipedia.org] color profile, where the 's' is short for "standard".



My sprite has an sRGB profile as well. To check the sprite's profile, go to Sprite > Properties. If the profile is not sRGB, it can be changed by selecting from the drop down menu. The Convert button preserves how the image looks while changing the colors' values. The Assign button assigns the profile without changing any values, which may change the image's appearance.



Thanks for reading. I hope you find this helpful!

I'll start with the method I recommend for beginners.

Go to Layer > New Layer. The keyboard shortcut is listed to the right of the command, Shift+N in this case. To change the keyboard shortcut, you can go to Edit > Keyboard Shortcuts.



After the new layer is created, go to Layer > Properties. In this case, F2 is the shortcut pictured.



Alternatively, you can right click on the layer's name in the timeline and select Properties from the context menu that appears.



In the Layer Properties menu for the newly made layer, choose the Color blend mode from the drop down menu labeled "Mode". Optionally, you can rename the layer to clarify its purpose.



In the lower left hand corner, click on the color button for the foreground color to open the color picker. Move the sliders for all channels to 255 so that the color is white (#FFFFFF). If it's easier, you may wish to switch to the Gray tab and move the value slider to 255. Or, if white is already in your palette, you could choose it from there.



Select the paint bucket tool from the toolbar menu on the right. On mouse hover, a tooltip will popup informing you of the tool's shortcut. Pictured below, the shortcut is G.



With a cel in the new layer active, left click anywhere on the sprite canvas to fill with white. The composite image should turn gray. (The blue boundaries seen below are due to layer edges being visible. Their visibility can be toggled by going to View > Show > Layer Edges.)


The effect can be turned off by clicking on the eye icon to the left of the layer's name in the timeline. I also recommend clicking on the lock icon to make it so the layer cannot be edited.



Yet more, I recommend changing the layer to continuous. That way, if new frames are added to the sprite using the + button in the bottom right corner or using the menu Frame > New Frame, the layer's cel will be extended into new frames. If new frames already exist, or if you prefer adding empty frames instead, then cels can be linked by making a range in the timeline, right clicking on the range and choosing Link Cels. The layer must be unlocked, i.e. editable, for this to work, however.



If you're technically inclined and would like to learn more about how the blend mode works, I recommend this W3C spec on Compositing and Blending[www.w3.org].

Some suggest that you convert an image to grayscale using the Hue/Saturation adjustment. This is bad advice. To test out why, go to Edit > Adjustments. The default shortcut is Shift+U.



Per the suggestion, HSL or HSL+ should be active and the saturation slider should be set to -100. Compare this with the layer blend mode method. It is not acceptable, given that, for example, the highlights on the white flower petals have a lower value than they should.


HSV is just as bad, if not worse, as the image appears blown out.


The HSL and HSV models as a whole are flawed. These models were created as a compromise back in an era when computers lacked the capability they do today. HSV computes value as the maximum red, green and blue channel. HSL computes lightness as the minimum and maximum channel averaged together. Neither of these account for the complexities of human perception. For more on how poorly these two models work, see the comparisons on this Wikipedia entry[en.wikipedia.org] under the Disadvantages section.

Another still kind-of bad suggestion is to convert from RGB to grayscale.

Even if we go to Sprite > Color Mode > More Options and make sure we use Luminance instead of HSV or HSL, the results are still slightly off.


Why? While a decent formula is used, relative luminance[en.wikipedia.org], the difference between linear sRGB and sRGB is not properly accounted for. The image's midtones are darker than they should be, for example the petals on the red flowers. We can even compare with other software to check. Below, see Krita's conversion:

Lastly, it's possible to create customized solutions using Lua scripts[www.aseprite.org]. I've tried making my own color adjustment tool[github.com] which combines some of the appeal and interface of other approaches I mentioned. The tool below uses SR LAB 2[www.magnetkern.de], a variant of CIE LAB[en.wikipedia.org], though any perceptual color space would do.


Aseprite version 1.3, currently in beta[aseprite.org], even allows scripts to create canvases, so it may be possible to make custom previews. However, the challenge is to balance accuracy against speed and responsiveness, as scripts work on the CPU, not the GPU. The more accurate grayscale conversions tend to be more expensive, and hence slower.

The obvious disadvantages are that if you don't know how to script, or don't have the time mess with it, you're out of luck. If you try someone else's script you have to read their instructions, ensure version compatibility, and trust that their script won't crash Aseprite due to unforeseen circumstances.

Lastly, most publicly available formulas for how to convert a color to perceptual space assume standard RGB as a starting point, not an arbitrary color profile. That is why this tutorial emphasized the importance of being in sRGB at the very start.