Skip to content
ColorArchive
Illustration
2028-12-30

Color in Illustration: How Illustrators Build Palettes That Feel Intentional

Digital illustration has its own color logic — different from photography, different from UI design, and often different from fine art. The constraints of digital illustration (RGB output, vector-friendly flat colors, scaling across sizes) create specific palette challenges. This issue covers how professional illustrators approach palette construction and what product designers can borrow from that practice.

Highlights
Professional illustrators working for editorial or brand clients typically constrain themselves to 5-8 colors total per illustration, including lights, mids, and darks. This constraint forces every color to earn its place and produces more coherent visual results than unconstrained palettes. The technique: choose 3 base colors that represent the main subject, light source, and background. Choose 1-2 accent colors that create focal points. Derive darks and lights from the base colors by shifting hue (warm darks, cool lights or vice versa) rather than just adding black or white — this preserves color temperature relationships while extending the range.
Hue shifting for shadow and light is the single most important technique that separates professional-looking illustration from amateur work. In direct sunlight, shadows shift toward the complement and cool; highlights shift toward the light source color and warm. In interior/artificial light, shadows shift darker and slightly warm (toward the ambient temperature). In flat digital illustration, even a modest hue shift (5-10° in HSL) on shadows and highlights adds dimension without requiring complex rendering. The ColorArchive palette grid, arranged by hue × lightness, makes this technique practical — navigate left/right for hue shifts, up/down for lightness changes.
Flat color illustration uses a different color logic than rendered illustration. In flat design (used heavily in UI illustration, app store graphics, editorial infographics), the palette needs to read at thumbnail scale, maintain distinction without value contrast (no shadows), and work across both dark and light interface backgrounds. The practical constraints: avoid colors with very similar luminance in a flat illustration — without value contrast to separate shapes, low-luminance-contrast colors merge at small sizes. Use color temperature contrast (warm vs. cool) as the primary spatial separator: warm colors advance, cool recede, which creates a sense of depth even in flat rendering.

Building a limited palette from scratch

The split-complement method produces balanced limited palettes for illustration. Start with one dominant hue (the color that will cover the most area, usually the subject or background). Find its complement (opposite on the wheel). Choose two colors adjacent to the complement rather than the complement itself — these 'split complements' are less harsh than a direct complement pair and give more flexibility. The four-color starting palette is dominant + split-complement left + split-complement right + neutral (desaturated version of one of the three, used for skin tones or shadow fill). Extend by adding a very light and very dark version of the dominant — this gives you 6 working values without adding hue complexity. This palette structure works well for spot illustration, icon sets, and character design for brand systems.

Color consistency across illustration systems

Brand illustration systems — the cohesive illustration style used consistently across a product or brand — require explicit color governance beyond individual illustration practice. The challenge: multiple illustrators working on different pieces must produce work that looks like a cohesive set. The solution: define the illustration palette as a formal artifact, separate from the UI token system, but referencing it. An illustration palette typically specifies: the 5-8 hex values that may be used; the permitted hue-shift range for lighting variations (e.g., ±15° HSL); the surface colors against which illustrations will appear (so illustrators can test legibility); and the forbidden combinations (color pairs that merge at small sizes). Documenting this in Figma as a dedicated illustration library, separate from the UI component library, gives illustrators a clear constraint set without requiring them to understand the full design system token architecture.

Newer issue
Color Token Architecture: From Design Decisions to Production Code
2028-12-23
Older issue
Color and Attention: What Designers Need to Know
2029-01-06