Introduction
Anti-aliasing in pixel art is often explained as “placing intermediate colors to make edges look smooth.”
However, when you actually try to apply it, questions immediately arise:
Which colors should be placed? How much desaturation is needed? How should brightness be adjusted?
Most explanations remain abstract, leaving creators without practical criteria for real-world decisions.
This article provides a structural, perception-based approach to anti-aliasing, supported by diagrams and concrete examples.
The goal is simple: to help you make confident, consistent decisions when smoothing pixel edges.
1. What Creates Jagged Edges (Jaggies)
Pixel art is built from discrete units—pixels that exist independently rather than forming a continuous line.
Because of this discrete structure, diagonal and curved lines inevitably produce jagged edges (jaggies).
Diagram 1: How Jaggies Appear
■ □
□ ■
Up close, the edge looks rough. From a distance, the brain interprets it as a diagonal line.
2. Intermediate Colors Represent “Coverage”
Intermediate colors are not simple averages.
They represent how much the line “covers” a pixel—its coverage value.
Pixels closer to the line should appear darker or more saturated.
Pixels farther away should appear lighter or more desaturated.
Diagram 2: Coverage-Based Shading
a: ■ (line center)
b: □ (far from line)
c: ▣ (near the line)
d: ■ (line center)
■□
▣■
3. The Brain Does Not See Colors Literally
Anti-aliasing is difficult because human perception is not linear.
- Coverage and perceived brightness do not match
- Surrounding colors influence how a color appears
- Edges tend to be interpreted as shadows
- Cultural expectations make lines “feel” darker than they physically are
This means mathematically correct colors can still look visually incorrect.
4. Principles of Manual Anti-Aliasing
● Avoid simple averages
Averaging often produces dull gray and breaks the illusion.
● Choose a direction for hue
Instead of mixing all surrounding colors, decide which hue direction to follow (red → orange → yellow → …).
● Reduce saturation
Mixed colors naturally lose purity; desaturation makes transitions believable.
● Lower brightness slightly
Edges often appear darker, so bright intermediate colors look unnatural.
● Adjust strength based on coverage
Closer pixels = stronger color
Farther pixels = lighter color
5. Example: Red and Yellow Diagonal Line (2×2)
Let’s say:
a = red
d = yellow
b = white
c = white
We choose the hue direction red → yellow.
Diagram 3: Hue Direction
[red] [light brown]
[strong orange] [yellow]
- c (near the line): strong orange
- b (farther): pale brown
Desaturation and slight darkening create natural “edge shadow.”
6. Why Brown Appears (The Nature of Mixed Colors)
Red and yellow do not produce pure orange in pixel art.
Mixed colors introduce natural muddiness, which is why brownish tones often look more realistic.
Diagram 4: Hue Path
red → orange → yellow
7. Multi-Color Situations (3×3)
With many surrounding colors, mathematical averages produce gray.
But visually, gray often looks wrong.
Diagram 5: Multi-Color Example
red yellow green
violet e blue
purple magenta lime
Pixel e should not be gray.
Choose a hue direction and follow it.
8. Practical Workflow
- Choose hue direction
- Reduce saturation
- Lower brightness slightly
- Adjust strength based on coverage
9. Final Adjustments (“Hand Tuning”)
Even structurally correct colors may look off due to perception.
Small adjustments fix this:
- Slightly darker
- Slightly more saturated
- Slight hue shift
- Slight brightness change
Diagram 6: Structure → Perception → Adjustment
Structure
↓
Perception
↓
Hand tuning
10. Conclusion
Anti-aliasing in pixel art is a balance of structure, perception, and subtle adjustment.
Intermediate colors are not averages—they express hue direction, natural muddiness, and coverage.
The final goal is not mathematical correctness but visual believability.
Pixel art anti-aliasing is ultimately a study of human perception, not pure color theory.
Understanding how the brain interprets edges allows you to place colors with confidence and intention.
