Skip to main content

Color grading explained: Core controls and workflow

Share Color grading explained: Core controls and workflow

Explore more from

Design basics

Master color to elevate your designs

Experiment, refine, and apply color palettes in Figma.

Get started for free

Most footage, photos, or exported design work looks technically fine but forgettable until someone gives them a point of view. Color grading takes footage or an image that’s already exposed and balanced correctly and gives it a specific mood, whether that’s the warm nostalgia of a travel brand or the cool tension of a horror movie trailer.

In filmmaking, color grading used to live almost entirely with film colorists, who sat in a suite with scopes and color wheels. Now the same principles show up in marketing photography, product demo videos, and social content—and, increasingly, in visuals that started out as an AI generation rather than a camera shot.

Matching a grade across a mix of AI-generated and captured images is a delicate phase of the modern video production process or photo workflow. That’s where Figma Weave comes in.

Read on to learn:

  • What separates color grading from basic color correction
  • The core controls behind every grade
  • A repeatable workflow for color grading photos, video, or AI-generated visuals
  • Where Figma Weave can speed up finding and applying a look

Color grading vs. color correction: What’s the difference?

Color correction is the technical cleanup pass. It fixes problems like inconsistent exposure, inaccurate white balance, or shots pulled from different cameras that don’t quite match. Typically, the goal of this phase is neutrality and accuracy. You want your footage to look like what the camera or design tool actually captured, nothing more.

Color grading is the creative pass that comes after color correction. Once a shot is technically right, grading shapes how it feels. A working knowledge of color theory and color symbolism can help you make these decisions. Go warmer for a nostalgic scene, cooler and desaturated for something tense, or highly saturated for a particularly energetic sequence.

Take a product demo video as an example. Correcting it means fixing the exposure and white balance so the product’s true color shows up accurately. Grading that same video means deciding it should feel warm and premium, then pushing the highlights and midtones to support that.

Color correctionColor grading
SequenceHappens firstHappens after
PurposeTo correct the exposure, white balance, etc.To evoke a specific feeling, or add a specific vibe/tone
GoalAccuracyCreativity
Optional?No—mandatoryYes—stylistic choice

The practical difference comes down to how optional each step is. Color correction is mandatory, since technical mistakes show up if you skip it. Color grading, however, is a stylistic choice. There’s no single correct grade for a given shot, only ones that fit a brand or a mood better than others.

Core controls of color grading

Color grading software looks a little different tool to tool, but it all comes down to adjusting the same handful of controls. Once you know what each one does, you can find it in Figma Weave, DaVinci Resolve, Lightroom, or anywhere else that offers a grading feature. Here’s what each pair handles.

Exposure and contrast set the base

Exposure sets how bright or dark the whole image looks, from a near-black frame to one that’s blown out.

Contrast sets the gap between the darkest and brightest parts of that same image, so a low-contrast shot looks flat and hazy while a high-contrast one looks punchy and graphic.

Both need to be right before you make any stylistic decisions, since grading a shot that’s underexposed just makes the exposure problem look more colorful.

White balance and tint set the temperature

White balance corrects the warm or cool color cast that different lighting leaves behind, like the orange of tungsten bulbs or the blue of open shade. This is usually the first adjustment made in a grading workflow, since it affects how every other control reads afterward.

Tint adjusts the balance between green and magenta, which often needs a small nudge once white balance is set.

Saturation and hue set the intensity

Saturation controls how vivid or muted colors appear, from black and white at zero saturation to nearly neon at the high end.

Shifting the hue changes how a pixel reads, nudging a red toward orange or a blue toward teal.

Pushing either control too far is the fastest way to make a grade look unnatural, so small adjustments go a long way here.

 A three-panel comparison showing the effects of exposure/contrast, white balance/tint, and saturation/hue controls on an image of a jumping goat.

A grading workflow anyone can follow

Color grading doesn’t require expensive software to get right. What matters more is the sequence you follow.

These three easy color grading techniques for beginners work whether you’re grading video in a dedicated color suite or adjusting a photo in a simpler app.

Step 1: Start from a reference, not a blank canvas.

Pick a reference image, a film still, or a brand mood board before you touch a single slider. Working toward something concrete is better than adjusting by feel and guessing when to stop.

Step 2: Grade in passes, not all at once.

Color correct first, fixing exposure and white balance. Then grade separately, adjusting saturation, hue, and mood in a second pass. Keeping corrective and creative adjustments separate makes it easier to tell whether something looks off because of a technical error or an intentional style choice.

Step 3: Check your color space before you export.

A grade that looks right in RGB color on a screen can shift once it’s exported for print or a different display. CMYK’s printable color range is narrower than RGB’s, so some vivid colors that look accurate on screen can fall outside that range and look duller once converted. Confirm the export settings match where the piece is actually headed, then double-check the grade once it’s in that format. Never assume it will translate directly.

How Figma Weave fits into a color grading workflow

Most color grading workflows assume you’re starting with an existing photo or clip of footage, but this isn’t always true. More and more, visual content starts as an AI generation, which means traditional color grading advice built entirely around a camera shot doesn’t always apply.

Figma Weave has tools built for exactly this kind of AI color grading. You can give a mix of AI-generated and captured visuals a consistent look, using the same reference or mood board from the workflow above.

Transfer a style from a reference image

The Figma Weave Transfer style tool takes the visual style of a source image, like a reference photo or mood board, and applies it to a new image.

To carry that style across an entire workflow instead of just one image, pair Transfer style with the Image describer node. That turns the look into a written description you can reuse and adjust rather than trying to recreate it each time. The description can then become part of your team’s ongoing AI creative process instead of a one-off decision.

Apply a palette across a whole set of visuals

The Figma Weave Apply color palette tool lifts the color palette from one image and applies it to others. This is a quick way to keep a whole batch of AI-generated visuals looking like they came from the same color grade.

If your team is using AI in design across a real production pipeline rather than one-off generations, that consistency is what turns individual visuals into an actual set.

A node-based workflow in Figma Weave connecting a color reference and an original image through a prompt node to generate a recolored output.

Apply color palettes across multiple images in Figma Weave

The Apply color palette tool pulls the color story from one image and applies it to another, so a new visual matches your grade in a click.

Get started

Color grading tips

A few small steps can make the difference between a grade that looks intentional and one that looks like a basic filter. These aren’t hard rules, but they’re worth keeping in mind as you build your grading workflow.

  • Adjust hue instead of over-saturating color. If a color feels off, a small hue shift toward the shade you want often reads as more natural than cranking saturation to compensate.
  • Correct first instead of grading directly over uncorrected footage. Grading on top of an inconsistent white balance carries that inconsistency into the final look instead of fixing it.
  • Adjust presets for your lighting conditions. Don’t apply a preset built for daylight to something shot indoors under tungsten light.
  • Build your grade around your brand or subject. Don’t chase a specific aesthetic trend that can quickly date your content.

Color grading FAQ

What colors are associated with different moods or genres?

Colorists lean on a few common conventions as a starting vocabulary, not hard rules. Cool blues and teals convey tension or distance, which is why they show up so often in horror and thrillers. Warm oranges and ambers read as nostalgic or adventurous, desaturated greens suggest sci-fi or dystopian settings, and high-contrast reds signal urgency or danger.

You can use these color associations to define the look you want in the Figma Weave Image describer or Transfer style tools. A prompt like “cool and desaturated” gives you a starting point you can refine before you touch a single slider.

What is the 60-30-10 rule for color grading?

The 60-30-10 rule is a color-distribution guideline borrowed from interior design:

  • 60% of an image’s color comes from a dominant tone
  • 30% from a secondary tone
  • 10% from an accent

When applied to grading or a color palette, this rule helps keep things from feeling chaotic. You don’t want every color to compete for attention at once.

What’s the difference between primary and secondary color grading?

Primary grading adjusts the whole frame uniformly, shaping the overall look of a shot. Secondary grading isolates a specific color, object, or region, like a sky, a product, or a skin tone, and adjusts that area without touching the rest of the image. Most grading workflows start with a primary pass and use secondary adjustments only where something specific needs extra attention.

What are log wheels, and how do they affect shadows and highlights?

Log wheels, also called color wheels, are the lift, gamma, and gain controls that let you push color into shadows, midtones, and highlights independently. That independence is what lets a colorist tint shadows cool while keeping highlights warm, instead of shifting the whole image’s color at once. Log wheels are one of the more precise tools available to you, once basic exposure and white balance are already set.

Shape your visual style with Figma Weave

Color grading is what turns a technically correct shot into one with an actual point of view. If you’re ready to apply that same intention to a batch of photos, video, or AI-generated visuals, Figma Weave can help you match a color grade faster than switching between separate tools.

Here’s how the rest of Figma fits around a color grading workflow, from first sketch to final handoff:

  • Figma Design helps you build the mockups and layouts your graded visuals will live inside.
  • FigJam sketches out your mood board and color references before you commit to a grade.
  • Figma Slides is one way to present before-and-after grading examples to stakeholders.
  • The Figma MCP server can pull your color decisions directly from Figma with an AI coding assistant.

Ready to give your next visual project an intentional look?

Figma Weave brings AI generation and editing models into one workspace so you can shape a consistent look across every creation.

Get started

Keep reading

  • 100 color combinations to influence your next design

    Pairing the right colors together creates harmony in UI designs. Learn 100 color combinations for your next project and how Figma can help.

    Learn more
  • Types of color palettes: Definition, examples, + tips

    The right color pairings can evoke emotions, increase brand awareness, and encourage user action. Discover how to create a compelling color palette with Figma.

    Learn more
  • What is graphic design?

    Graphic design focuses on creating visuals to convey a message or story. Read on to learn about graphic design and how Figma can help.

    Learn more
  • AI in design: Transforming the way we create

    Curious how AI in design is changing the way teams work? See how tools like Figma make it easier to bring ideas to life with real-world examples.

    Learn more
  • 7 of the best AI tools for graphic design

    From image generators to node-based workflow platforms, here are 7 of the best AI tools for graphic design, and how each fits a real production process.

    Learn more
  • Design system scaling

    Avoid common design system scaling mistakes. Learn how to transition from a static library to a product infrastructure that aligns design and code at scale.

    Learn more
Powered by Fruition