Design a readable pixel pet with a small color palette

Make the pet recognizable with one color

Fill the pose with one dark color. At the actual display size, you should still be able to tell which way it is facing and where its head ends. If a cat looks like a round blob until you draw whiskers, change an ear angle or give the tail clear space. A silhouette fix survives resizing better than a tiny detail.

Try a four-color sketch: outline, body, shadow and one accent. Assign the accent to one meaningful feature, such as a collar. Keep it off the paws and ears until you can see whether the face is already carrying enough detail.

Separate values before choosing hues

Duplicate the file and desaturate the copy. If the eyes blend into the face, move their brightness away from the face color; changing blue to purple may make little difference at a glance. If the shadow becomes the first thing you see, soften its brightness difference and spend the strongest contrast near the focal point.

Draw features as connected shapes where possible. A two-pixel highlight on the cheek is easier to read than two isolated pixels scattered across the coat. Before deleting either, compare both at native size and at an integer zoom with sharp scaling. MDN's scaling reference explains why those two previews can behave differently in a browser.

Put the sprite on the surfaces it will live on

Check the pose on a white background and on the actual dark UI surface. A dark outline that disappears against charcoal may still read if you lift the body value or give one exposed edge a lighter step. Avoid adding a bright halo around the whole sprite just to rescue a single ear.

In the next frame, change the pose without changing the palette. If the face stops reading when the head turns, fix the placement of its features in that pose. The Pet Studio editor is a place to try the sketch, and the first pixel pet walkthrough covers the initial drawing workflow.