variablelab/theatre
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix invalid interpolated color values

Browse source
This commit is contained in:
Andrew Prifer 2022-06-07 12:20:48 +02:00
parent 25372d8bb0
commit af079f2203
1 changed files with 10 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
theatre/shared/src/utils/color.ts
View file

@ -1,3 +1,5 @@
import {clamp} from 'lodash-es'
export function parseRgbaFromHex(rgba: string) { export function parseRgbaFromHex(rgba: string) {
rgba = rgba.trim().toLowerCase() rgba = rgba.trim().toLowerCase()
const hex = rgba.match(/^#?([0-9a-f]{8})$/i) 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) { export function linearSrgbToSrgb(rgba: Rgba) {
function compress(x: number) { function compress(x: number) {
// This looks funky because sRGB uses a linear scale below 0.0031308 in // 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 if (x >= 0.0031308) return 1.055 * x ** (1.0 / 2.4) - 0.055
else return 12.92 * x else return 12.92 * x
} }
return { return clampRgba({
r: compress(rgba.r), r: compress(rgba.r),
g: compress(rgba.g), g: compress(rgba.g),
b: compress(rgba.b), b: compress(rgba.b),
a: rgba.a, a: rgba.a,
} })
} }
export function srgbToLinearSrgb(rgba: Rgba) { export function srgbToLinearSrgb(rgba: Rgba) {