Summary
Value (lightness) and colour (hue plus saturation) are the two axes VFX artists use to make an effect both magical and readable. In a multi-character, multi-effect scene, readability depends on partitioning value and saturation ranges between the different layers of the game — UI, character, VFX, and environment — so they do not collapse into a single visual mass. Within those bands, contrast builds focal points, and disciplined use of colour relationships keeps effects expressive without becoming noisy.
Key ideas
Value and saturation ranges by discipline
Every on-screen element belongs to one of four layers, and each layer occupies its own slice of value/saturation space:
| Layer | Value range | Saturation range | Role |
|---|---|---|---|
| UI | extremes (0% or 100%) | extremes | Must always win attention when needed; owns the outer edges |
| Character | mid | mid | Must remain legible at all times |
| VFX | wide, pushed high | wide, pushed high | Magic, spells, feedback — louder than character and environment, quieter than UI extremes |
| Environment | mid-low | low | Must not compete with characters or VFX |
The practical rule: avoid 100% white/black and 100%/0% saturation inside VFX, because those values belong to UI and environment and will collide with them. Keep VFX loud but within its band.
Illumination as magic
Pushing the value to the centre of a magical effect — making the heart of the spell the brightest point — does two things at once:
- It creates a clear visual focal point, so in a teamfight the player’s eye finds the effect.
- It reads as light emission, which is the visual shorthand for “magic”.
A flat, un-illuminated effect falls into the background of the map. A glowing, centre-weighted effect communicates danger, motion, and duration.
Using value range to build area of focus
Focal points are produced by contrast, not brightness in absolute terms. A mid-value effect against a dark background pops; the same effect against a bright background does not. When an effect cannot produce enough contrast on its own, a darker sub-background layer can be added to promote it — but sparingly, because multiple promoted effects in the same teamfight cancel out.
Colour relationships in VFX
- Analogous palettes (colours adjacent on the wheel) are the default. They feel unified, hold together under motion, and keep the primary element unambiguous.
- Complementary pairs (colours opposite on the wheel) create immediate contrast, but if both colours are present at similar value, saturation, and opacity they will compete for focal-point status. The rule is: if you must use complementary colours, demote one to the secondary element (lower saturation, lower opacity, smaller).
- Monochromatic palettes are safe for low-importance effects (idle particles, ambient flavour).
See colour-theory-fundamentals for the general treatment of these harmonies outside VFX specifically.
Theme palettes
Riot codifies palettes for common spell themes so players learn the visual language over time. Examples from the guide:
- Void — deep purple and black accents, sickly green highlights.
- Poison — bright toxic greens and yellows.
- Heal — warm gold or green, high value at the centre.
- Frost — cool cyan, white highlights, low saturation.
- Gunpowder — warm red-orange with grey smoke.
- Arcane — purple and magenta with bright white cores.
- Shadow Isle — desaturated teal and green with black.
- Nature — saturated greens and browns.
- Celestial — starry blues and golds.
- Wind — light cyans and whites.
- Hextech — bright blue with gold accents.
- Water — blue with white foam highlights.
The principle is general: pick a small number of theme palettes and stick to them, so players learn “this purple-and-black ring means void-type damage” without being told.
Ally/enemy indicators
League uses blue for allies and red for enemies for targeting rings, range indicators, and key telegraphs. This is a near-universal convention in competitive games; it must be paired with shape or pattern cues for colour-blind players.
In practice
Unity specifics:
- Author colour in linear colour space so that HDR values above 1.0 drive bloom and glow correctly in URP/HDRP.
- Use HDR colour pickers on particle Start Colour and Colour over Lifetime so emissive cores can exceed 1.0 and bloom naturally.
- Colour over Lifetime and Size over Lifetime curves let you push value/size at the birth of a particle and pull back before death — this is how illumination, anticipation, and dissipation are expressed in data.
- For discipline-level value bands, keep UI on its own canvas / sorting layer and enforce saturation/value caps in the shader for VFX and environment materials.
- Shader Graph (see shader-graph-overview) allows per-material value/saturation clamping. Establish a studio-wide
VFXColourClampsubgraph to enforce the rules uniformly. - Accessibility: pair ally/enemy colour with shape indicators (solid ring vs dashed ring, or directional arrows) so colour-blind players retain the signal.
Evidence
“Higher value range draws more focus. Contrast can create a clear area of effect. Avoid using 100% or 0% values, as it can be confused for the game environment or UI.” (Riot Games, League of Legends VFX Style Guide, see source-lol-vfx-style-guide)
“By pushing the value to the center of the bomb, there is a clearer focus to the effect. This makes it easier for players to notice the spell in team fights.” (Riot, on Master Arcanist Ziggs’s Bouncing Bomb, see source-lol-vfx-style-guide)
“It is ideal to use analogous colors, but when there are two complementary colors in one effect, one of those colors must serve as the secondary color. When two opposite colors are present in one effect, those colors will always compete to be the primary element (even when they belong to different value levels).” (Riot, see source-lol-vfx-style-guide)
Implications
- Value/saturation banding is a shared contract between disciplines. UI artists, environment artists, character artists, and VFX artists must agree on the bands or the system collapses.
- The “centre-bright” rule generalises well beyond magic: explosions, pickups, damage numbers, and highlight effects all benefit from pushing the highest value at the focal point.
- Theme palettes are a cheap way to expand the game’s visual vocabulary without adding mechanics. Once players learn “teal + white = frost = slow”, you can reuse that language in new champions, items, or areas without re-teaching.
Open questions
- How should these bands be adjusted for HDR displays where the 0–1 range is effectively extended?
- What is the right interaction model between VFX colour and dynamic environment lighting — do VFX ignore global illumination, or sit inside it?
- How do theme palettes survive in stylised art directions where the environment itself is already saturated (e.g. Fortnite, Overwatch)?