Color grading is a post-production process that involves changing the color palette of a video to give the final product a specific aesthetic touch, or “look and feel.” Color grading can have a major impact on the overall impact of video content, and influence the way a viewer receives the video. Additionally, color grading can even fix problems that occurred when the video was captured, such as poor lighting conditions or overexposure.

This tutorial will explore two methods of programmatically color grading videos—FFmpeg, and Editframe. FFmpeg(opens in a new tab) is a free and open-source collection of libraries and programs that developers use to handle various tasks around recording, editing, and streaming video. Color grading your videos is one application (among many) for this wonderful and powerful tool. In the steps below, we’ll walk through using FFmpeg to add brightness, saturation, and contrast to your videos.

Although it is highly versatille, FFmpeg might not always be the best solution for engineering teams looking to integrate these video editing tasks into their software development workflows. That’s why in addition to walking through the color grading process with FFmpeg, this tutorial will also explore an alternative method using Editframe’s simple APIs.

Whether you use FFmpeg or Editframe, this guide should help you quickly add a little more brightness, contrast, or saturation to your videos.

Let’s get started!

Part 1: Using FFmpeg

First, we’ll walk through the process of adjusting saturation, brightness, and contrast with FFmpeg.

Required Tools

• Sample video files: provided by pexels.com(opens in a new tab)
• FFmpeg(opens in a new tab): (You’ll need to install FFmpeg and set up the appropriate environment variables before beginning this tutorial)

Adjust saturation with FFmpeg

Here is the full FFmpeg command to modify the saturation of a video:

ffmpeg -i  video.mp4 -vf eq=saturation=3.0  -c:a copy saturation.mp4

Let’s break this down and see what each part of the command is doing.

• In this line, we import the video file (video.mp4):

ffmpeg -i  video.mp4

• Here, we’ll add saturation as a video filter (-vf). The value must be a float in the range 0.0 to 3.0. The default value is "1":

vf eq=saturation=3.0

• In the command below, we’re copying streams into the saturation.mp4 video file:

c:a copy saturation.mp4

Adjust brightness with FFmpeg

Here is the full FFmpeg command that modifies the brightness of the video:

ffmpeg -i  video.mp4 -vf eq=brightness=0.5   -c:a copy brightness.mp4

Let’s break the brightness command down:

• In this line, we will import a video file (video.mp4).

  ffmpeg -i  video.mp4

• Here, we will add brightness as a video filter (-vf). The value must be a float value in the range -1.0 to 1.0. The default value is "0".

  vf eq=brightness=0.5

• In this line, we will copy the video streams intro brightness.mp4 video file:

  c:a copy brightness.mp4

Adjust contrast with FFmpeg

Here is the FFmpeg command that will modify the contrast of the video:

ffmpeg -i  video.mp4 -vf eq=contrast=1000.0  -c:a copy contrast.mp4

Once again, let’s dissect:

• In this line, we will import a video file (video.mp4).

  ffmpeg -i video.mp4

• Here, we are adding contrast as a video filter (-vf). The value must be a float in the range -1000.0 to 1000.0. The default value is "1".

  vf eq=contrast=1000.0

• In this line, we will copy the streams into the contrast.mp4 video file.

  c:a copy contrast.mp4

Here are the output videos from the FFmpeg command for contrast, saturation, and brightness:

contrast.mp4

saturation.mp4

brightness.mp4

Note: The commands above can be combined to add contrast, brightness, and saturation in a single command.

Part 2: Using Editframe

Now we’ll perform the same color grading operations again, only this time we will use Editframe instead of FFmpeg.

Required tools:

• Node.js installed on your machine
• No need to have FFmpeg installed on your machine
• Editframe API Token (you can create an account from this link(opens in a new tab))

Let’s get started:

1. Setup a new Node.js project using the Editframe CLI:

npx @editframe/create@beta

• Install the required dependencies:

cd trim-video && npm install

2. Add assets to the project:

Add video.mp4 to the src/assets folder.

3. Update the index.html file with the following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script type="module" src="./src/index.js"></script>
    <link rel="stylesheet" href="./src/styles.css" />
  </head>
  <body>
    <ef-timegroup mode="sequence" class="w-[1920px] h-[1080x] overflow-hidden">
      <ef-timegroup mode="contain">
        <ef-video
          class="w-full h-full object-center object-fill"
          style="filter: saturate(1.7);"
          src="/assets/video.mp4"
        ></ef-video>
      </ef-timegroup>
    </ef-timegroup>
</html>

Let’s walk through what the code in this file is doing.

• In these lines, we import the index.js file and the styles.css file which contains the styles for the video and @editframe/elements:

<head>
    <meta charset="UTF-8" />
    <script type="module" src="./src/index.js"></script>
    <link rel="stylesheet" href="./src/styles.css" />
  </head>

• In this line, we create a new video composition using the ef-timegroup element. A vertical video (9:16) with a height of 1920px and a width of 1080px:

<ef-timegroup
      mode="sequence"
      class="w-[1080px] h-[1920px] overflow-hidden"
    >
    { /* Add elements here */ }
</ef-timegroup>

• In these lines, we set a new time group with a mode of contain to add the video and waveform elements:

<ef-timegroup mode="contain">
        { /* Add elements here */ }
</ef-timegroup>

• In these lines, we import the video element:

<ef-video
    class="w-full h-full object-center object-fill"
    style="filter: saturate(1.7);"
    src="/assets/video.mp4"
  ></ef-video>

• ef-video is an Editframe element that allows you to add videos to your video composition.
  • style: filter: saturate(1.7); is used to adjust the saturation of the video. The value must be a float in the range 0.0 to 3.0. The default value is "1".
• Also, you can add contrast filter using style="filter: contrast(1000);" or brightness filter using style="filter: brightness(0.5);".
• More info about the filter property can be found here(opens in a new tab).

4. Preview the project:

npx vite .

5. Update the .env file with your Editframe API token:

EF_TOKEN="YOUR_API_TOKEN"

6. Render the video:

npx @editframe/cli render .

editframe-saturation.mp4

editframe-brightness.mp4

editframe-contrast.mp4

Conclusion

Here we saw how to adjust a video’s brightness, saturation, and contrast using two tools–FFmpeg, and Editframe. These processes are just a fraction of the video editing, composition, and delivery tasks you can accomplish with Editframe, however. Visit the Editframe API docs to learn how you can add transitions, filter, trim videos, and do much more.