How do I colour grade photos and videos in a template?

Grading makes a stock photo or clip look like it belongs to your design: the same colours, the same mood, and one shoot across a page. It works on image layers with a photo and on video layers. SVG art is never graded.

In Studio#

Select a photo or video. In the Media (image) or Video section, Edit image has an Adjust button:

• Adjust tab: sliders grouped as Light (exposure, brightness, contrast, highlights, shadows, whites, blacks, fade), Colour (saturation, vibrance, temperature, tint, hue, grayscale, sepia), Colour wash, Duotone and Finish (vignette, sharpen, grain), plus an overall strength. A dot marks a changed slider; its reset button removes the change.
• Filters tab: the looks, previewed on your photo, and a strength slider.

To grade every photo on a page at once, open the page's canvas settings and use Photos > Photo grade. A layer's own adjustments are applied on top of the page grade.

To animate a grade, open Animate and turn on Colour grade under Behaviors.

Style keys#

All keys are flat style keys on the layer, so they work in pages_data and in render modifications ("hero.temperature": 30).

Colours are hex (#rrggbb) or rgb(). Out-of-range numbers are clamped.

Looks: clean, punchy, warm-film, cool-clean, golden-hour, faded-matte, moody, noir, vintage, pastel, brand-wash (uses washColor), brand-duotone (uses duotoneShadow and duotoneHighlight). A look is a starting point: any key you set on the layer overrides its value.

{
  "id": "hero",
  "type": "image",
  "content": "https://example.com/photo.jpg",
  "style": { "gradeLook": "warm-film", "washColor": "#e2552d", "washAmount": 14, "vignette": 35 }
}

Page and film grade#

page.grade takes the same keys and applies to every photo and video on the page. PNG, GIF and SVG layers (logos, cut-outs, stickers) keep their own colours unless you grade them on the layer; set gradeIgnorePage: true to keep any other layer out. film.grade applies to every scene of a film; a scene's page.grade adds to it.

{
  "canvas": { "width": 1080, "height": 1350 },
  "grade": { "gradeLook": "golden-hour", "washColor": "#e2552d", "washAmount": 14 },
  "elements": []
}

Animating the grade#

On video renders, motion.grade plays a one-word grade animation on a photo or video layer:

"motion": { "grade": { "effect": "colour-in", "offset": 0.2, "duration": 1.4, "strength": 1 } }

at is page time in seconds; offset is seconds after the layer appears (default 0). duration, ease and strength (0 to 1) are optional.

For full control, keyframes take a grade channel: a partial grade that the layer moves to. Keys a keyframe leaves out return to the layer's own grade.

"motion": {
  "keyframes": [
    { "at": 0, "grade": { "exposure": -60, "grayscale": 100 } },
    { "at": 1.5, "grade": { "exposure": 0, "temperature": 30 } }
  ]
}

Still renders (PNG, JPG, PDF) show the layer's own grade, without the animation.

With AI agents#

The Orshot MCP plan tool returns a page grade that matches the design's palette, and agents grade every photo on the page with it.