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.
Making the impact point read
A common case is a fast attack whose trail crosses a busy scene: the player must still see where it hit. The rules above combine into a short checklist. It applies Riot’s guidance to this case rather than quoting a rule written for it, so treat it as a starting point for playtests:
- Value. Put the highest value of the whole effect at the contact point, as Riot does at the centre of a spell (“by pushing the value to the center … there is a clearer focus”). Keep the trail a step darker and less saturated, as Riot asks of outros. Contrast with what is behind the hit matters more than absolute brightness.
- Colour. Keep the trail in an analogous palette and give the contact point the one accent: a hue shift towards white, or a complementary colour that only the impact uses. Because complementary colours compete, the trail must stay secondary.
- Shape. Make the impact a simple, sharp silhouette (a burst, star or ring) against the soft, streaked trail, following the soft/sharp mix in vfx-shape-and-timing.
- Timing. Peak the impact on the frame of contact and fade the trail quickly. A 1–3 frame hit flash on the struck object adds a brief white core at exactly the right place (see the hit flash section of vfx-shape-and-timing). This brief flash is a deliberate exception to the “avoid 100% white” rule above, and works because it lasts only a few frames.
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:
- Two separate settings decide whether a glow works. Use Linear colour space (Player settings; Unity’s URP templates use it) for correct lighting and blending. Linear colour space is not what lets colours go above 1.0, though: that comes from HDR being enabled on the URP Asset (Quality section), which allows “rendering in High Dynamic Range (HDR) by default for every camera”, so that bright areas can exceed 1 and reach the Bloom pass (Unity Technologies, Unity Manual: Universal Render Pipeline asset reference for URP).
- Particle Start Colour and Colour over Lifetime are not HDR. In Unity 6 the built-in Particle System draws Start Colour, Colour over Lifetime, Colour by Speed and the Trails colour gradients with ordinary (non-HDR) colour pickers, and each particle stores its colour as an 8-bit
Color32, so these values stay in the 0–1 range (Unity Technologies, Scripting API: ParticleSystem.Particle.startColor; Unity Technologies, UnityCsReference 6000.3,InitialModuleUI.csandColorModuleUI.cs). Use them for hue and alpha over time, and take the HDR intensity from somewhere else: the particle material (see “Glow: emissive material or particles?” below), the Custom Data module, whose colour gradients do have HDR pickers but only reach a custom shader that reads that data stream, or VFX Graph, whose colours can carry HDR values. - 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.
Glow: emissive material or particles?
Short answer. For a simple glow on a character (glowing eyes, runes, a charged weapon), use an emissive material: either the URP Lit shader with Emission ticked, or a Shader Graph with an HDR colour plugged into Emission. Use particles when the glow must reach beyond the mesh (an aura, a halo, sparks or motes drifting off the body) or move independently of it. Many finished effects combine the two: an emissive surface for the core and a few additive particles for the aura. Either way, the visible “halo” around a bright object comes from the Bloom post-processing effect, not from the material or the particles on their own.
| Emissive material (surface glow) | Particles (aura or halo) | |
|---|---|---|
| What glows | The surface of the mesh itself, inside its silhouette | Camera-facing quads around or beyond the mesh |
| Follows animation | Automatically: it is part of the skinned mesh | Needs the emitter parented to a bone, or a Skinned Mesh Renderer shape |
| Where HDR intensity comes from | Emission colour Intensity in the colour picker, or an HDR Colour property in Shader Graph | The particle material (an emission colour or an HDR property in a particle shader), not Start Colour |
| Main cost | Almost nothing extra per pixel | Overdraw from overlapping transparent particles |
| Halo outside the silhouette | Only through Bloom | Yes, the particles themselves extend outwards |
Emissive material in URP, step by step:
- Material. On a URP Lit material, tick Emission and raise the colour picker’s Intensity. Unity’s Lit shader page describes this route: “For effects like lava that glow brighter than white while still being another color, increase the Intensity value in the color picker” (Unity Technologies, Unity Manual: Lit shader material Inspector window reference for URP). In Shader Graph, create a Color property, set its Mode to HDR (which “sets its intensity from -10 to 10 exposure stops”), and connect it to the Emission block of a Lit graph, or add it into Base Color of an Unlit graph (Unity Technologies, Shader Graph Manual: Property Types). A pulsing version is the “Pulsing glow” recipe in shader-graph-overview.
- HDR on. On the active URP Asset, under Quality, make sure HDR is ticked. Without it, colour is clamped at 1.0 before post-processing, so an intense emission looks like plain white or flat colour and Bloom has little to work with.
- Bloom. Add a Volume (a Global Volume is simplest) with a Bloom override, and make sure Post Processing is enabled on the Camera. Bloom’s Intensity defaults to 0, which disables the effect, so raise it. Threshold sets “the gamma space brightness value at which URP applies Bloom” and defaults to 0.9 (Unity Technologies, Unity Manual: Bloom Volume Override reference for URP); keeping it at about 1 means only the HDR emissive parts bloom, not the whole bright scene.
- Lighting the surroundings. Emission makes the surface bright; it does not light nearby objects in real time on its own. The Lit material’s Global Illumination setting can bake the emitted light into lightmaps for static scenes (Unity Technologies, Unity Manual: Lit shader material Inspector window reference for URP). For a moving character, add a small Point Light if the glow should visibly light the floor or walls.
Particle aura. Use the URP Particles Unlit shader with an Additive blending mode for a soft halo. Because Start Colour cannot exceed 1.0 (see above), raise the intensity in the material: tick Emission on the particle material, whose emission colour is an HDR colour, or use a Shader Graph particle shader that multiplies the Vertex Color node by an HDR Colour property, so that Colour over Lifetime still controls hue and fade. The built-in emission colour is added on top of the particle colour and does not follow its hue over lifetime (Unity Technologies, Universal RP source, ParticlesUnlit.shader and ParticlesUnlitForwardPass.hlsl, 6000.3), which is why the Shader Graph route is usually easier to art-direct. Keep auras sparse: large overlapping transparent particles are a common source of overdraw (see unity-urp-material-performance).
Glow and readability. Bloom and particle halos make an object read larger than it is. On anything with a hitbox (a projectile, a weapon swing, an area of effect), keep the brightest, most solid part the same size as the collider and let the glow fall off at low opacity outside it; see “Glow, bloom and trails versus the hitbox” in vfx-shape-and-timing and the hitbox section of vfx-design-principles.
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)?