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

> Adjust exposure, colour, wash, duotone, vignette and grain on image and video layers, grade a whole page at once and animate the grade, in Studio or the API.

- **URL**: https://orshot.com/docs/orshot-studio/photo-grading

---

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`).

| Key | Range | Rest |
|---|---|---|
| `gradeLook` | a look name (below) | none |
| `gradeAmount` | 0 to 100 | 100 |
| `exposure`, `highlights`, `shadows`, `whites`, `blacks` | -100 to 100 | 0 |
| `fade` | 0 to 100 | 0 |
| `vibrance`, `temperature`, `tint` | -100 to 100 | 0 |
| `hue` | -180 to 180 (degrees) | 0 |
| `grayscale`, `sepia` | 0 to 100 | 0 |
| `washColor`, `washBlend`, `washAmount` | colour; soft-light, overlay, multiply, screen, color, hue, normal; 0 to 100 | #f2a65a, soft-light, 0 |
| `duotoneShadow`, `duotoneHighlight`, `duotoneAmount` | colour, colour, 0 to 100 | #1d1b3a, #f6d28b, 0 |
| `vignette`, `vignetteSoftness`, `vignetteColor` | 0 to 100, 0 to 100, colour | 0, 50, #000000 |
| `sharpen`, `grain` | 0 to 100 | 0 |
| `gradeIgnorePage` | true to skip the page grade | false |
| `brightness`, `contrast`, `saturate` | 0 to 2 | 1 |

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.

```json
{
  "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](https://orshot.com/docs/orshot-studio/film-mode); a scene's `page.grade` adds to it.

```json
{
  "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:

| Effect | What it does |
|---|---|
| `grade-in` | starts ungraded, settles on the grade |
| `colour-in` | starts black and white, colour comes in |
| `develop` | starts bright, washed and grey, like a print developing |
| `dark-in` | fades up from black |
| `duotone-in` | starts as a duotone |
| `warm-up`, `cool-down` | moves warmer or cooler and holds |
| `fade-to-mono` | moves to black and white and holds |
| `vignette-close` | the edges close in and hold |
| `flash` | a bright flash and back, for a beat |
| `light-leak` | a warm leak and back |

```json
"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.

```json
"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](https://orshot.com/agents) plan tool returns a page grade that matches the design's palette, and agents grade every photo on the page with it.