From af079f2203dbef0dc05c590a048fe4dd5a2e5453 Mon Sep 17 00:00:00 2001
From: Andrew Prifer <2991360+AndrewPrifer@users.noreply.github.com>
Date: Tue, 7 Jun 2022 12:20:48 +0200
Subject: [PATCH] Fix invalid interpolated color values

---
 theatre/shared/src/utils/color.ts | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/theatre/shared/src/utils/color.ts b/theatre/shared/src/utils/color.ts
index 696f12f..93a022c 100644
--- a/theatre/shared/src/utils/color.ts
+++ b/theatre/shared/src/utils/color.ts
@@ -1,3 +1,5 @@
+import {clamp} from 'lodash-es'
+
 export function parseRgbaFromHex(rgba: string) {
   rgba = rgba.trim().toLowerCase()
   const hex = rgba.match(/^#?([0-9a-f]{8})$/i)
@@ -42,6 +44,12 @@ export function decorateRgba(rgba: Rgba) {
   }
 }
 
+export function clampRgba(rgba: Rgba) {
+  return Object.fromEntries(
+    Object.entries(rgba).map(([key, value]) => [key, clamp(value, 0, 1)]),
+  ) as Rgba
+}
+
 export function linearSrgbToSrgb(rgba: Rgba) {
   function compress(x: number) {
     // This looks funky because sRGB uses a linear scale below 0.0031308 in
@@ -50,12 +58,12 @@ export function linearSrgbToSrgb(rgba: Rgba) {
     if (x >= 0.0031308) return 1.055 * x ** (1.0 / 2.4) - 0.055
     else return 12.92 * x
   }
-  return {
+  return clampRgba({
     r: compress(rgba.r),
     g: compress(rgba.g),
     b: compress(rgba.b),
     a: rgba.a,
-  }
+  })
 }
 
 export function srgbToLinearSrgb(rgba: Rgba) {