5d5ab906ba
- Convert back to RGB for max compat - Better variable names - Add fallback if there's no blurhash - Refactor color utils - Use alpha instead of light/dark colors
52 lines
2 KiB
JavaScript
52 lines
2 KiB
JavaScript
// https://gist.github.com/earthbound19/e7fe15fdf8ca3ef814750a61bc75b5ce
|
|
function clamp(value, min, max) {
|
|
return Math.max(Math.min(value, max), min);
|
|
}
|
|
|
|
const gammaToLinear = (c) =>
|
|
c >= 0.04045 ? Math.pow((c + 0.055) / 1.055, 2.4) : c / 12.92;
|
|
const linearToGamma = (c) =>
|
|
c >= 0.0031308 ? 1.055 * Math.pow(c, 1 / 2.4) - 0.055 : 12.92 * c;
|
|
|
|
export function rgb2oklab([r, g, b]) {
|
|
r = gammaToLinear(r / 255);
|
|
g = gammaToLinear(g / 255);
|
|
b = gammaToLinear(b / 255);
|
|
var l = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b;
|
|
var m = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b;
|
|
var s = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b;
|
|
l = Math.cbrt(l);
|
|
m = Math.cbrt(m);
|
|
s = Math.cbrt(s);
|
|
return [
|
|
l * +0.2104542553 + m * +0.793617785 + s * -0.0040720468,
|
|
l * +1.9779984951 + m * -2.428592205 + s * +0.4505937099,
|
|
l * +0.0259040371 + m * +0.7827717662 + s * -0.808675766,
|
|
];
|
|
}
|
|
|
|
export function oklab2rgb([L, a, b]) {
|
|
var l = L + a * +0.3963377774 + b * +0.2158037573;
|
|
var m = L + a * -0.1055613458 + b * -0.0638541728;
|
|
var s = L + a * -0.0894841775 + b * -1.291485548;
|
|
// The ** operator here cubes; same as l_*l_*l_ in the C++ example:
|
|
l = l ** 3;
|
|
m = m ** 3;
|
|
s = s ** 3;
|
|
var r = l * +4.0767416621 + m * -3.3077115913 + s * +0.2309699292;
|
|
var g = l * -1.2684380046 + m * +2.6097574011 + s * -0.3413193965;
|
|
var b = l * -0.0041960863 + m * -0.7034186147 + s * +1.707614701;
|
|
// Convert linear RGB values returned from oklab math to sRGB for our use before returning them:
|
|
r = 255 * linearToGamma(r);
|
|
g = 255 * linearToGamma(g);
|
|
b = 255 * linearToGamma(b);
|
|
// OPTION: clamp r g and b values to the range 0-255; but if you use the values immediately to draw, JavaScript clamps them on use:
|
|
r = clamp(r, 0, 255);
|
|
g = clamp(g, 0, 255);
|
|
b = clamp(b, 0, 255);
|
|
// OPTION: round the values. May not be necessary if you use them immediately for rendering in JavaScript, as JavaScript (also) discards decimals on render:
|
|
r = Math.round(r);
|
|
g = Math.round(g);
|
|
b = Math.round(b);
|
|
return [r, g, b];
|
|
}
|