Design Atlas
한국어
◧ Film & photo

Color grading

컬러 그레이딩

Reshaping a shot's color and tone in post to set the scene's mood. The signature look: shadows pushed toward teal, highlights pushed toward orange.

Also known as: Color correctionTeal and orangeLUT
···
html
<div class="wrap">
  <div class="scene base"><div class="sky"></div><div class="hill"></div><div class="sun2"></div></div>
  <div class="scene graded"><div class="sky"></div><div class="hill"></div><div class="sun2"></div></div>
  <div class="divider"></div>
</div>
<span class="tag left">FLAT</span>
<span class="tag right">GRADED</span>
css
.wrap{position:absolute;inset:0;overflow:hidden}
.scene{position:absolute;inset:0}
.scene .sky{position:absolute;inset:0;background:linear-gradient(180deg,#9fb2c2,#d9dbcf 65%)}
.scene .hill{position:absolute;left:0;right:0;bottom:0;height:38%;background:#4c5a4c;
  clip-path:polygon(0 100%,0 40%,30% 70%,55% 30%,80% 65%,100% 20%,100% 100%)}
.scene .sun2{position:absolute;right:16%;top:18%;width:12%;aspect-ratio:1;border-radius:50%;background:#e8e2c8}
.scene.graded{filter:saturate(1.35) contrast(1.12);animation:reveal 4.2s ease-in-out infinite alternate}
.scene.graded::after{content:'';position:absolute;inset:0;
  background:linear-gradient(200deg,rgba(0,160,150,.4),transparent 45%,rgba(255,130,40,.4));
  mix-blend-mode:color}
@keyframes reveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0% 0 0)}}
.divider{position:absolute;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.8);
  animation:sweep 4.2s ease-in-out infinite alternate}
@keyframes sweep{from{left:0%}to{left:100%}}
.tag{position:absolute;top:5%;font:700 10px ui-monospace,monospace;padding:2px 8px;border-radius:20px;
  background:rgba(0,0,0,.45);color:#fff}
.tag.left{left:5%}
.tag.right{right:5%}

Color grading is distinct from color correction, which just gets exposure and white balance accurate. Grading is the creative pass that reshapes color toward an intended mood — usually via a LUT (look-up table) applied wholesale, or curves and wheels that adjust shadows, midtones, and highlights separately.

Teal-and-orange is common for a practical reason: in most footage, skin sits in the highlights and reads orange, while backgrounds and shadows trend toward its complement, teal. Push the two apart and the color contrast increases, which makes the subject pop harder against the background.

The demo splits one scene down the middle, sweeping between the flat original and the graded version. In practice this is done with a 3-way color corrector, where shadows, midtones, and highlights each get nudged independently around a color wheel.

When to use

Use it to lock a consistent mood — warm, cold, period-piece — across a whole scene. Push it too far and skin tones go unnatural, so always check any shot with a person in it.