fix: hue-less interpolation in lch, resolves #359

gka · Oct 13, 2024 · 27a2bb3 · 27a2bb3
1 parent 439d77d
commit 27a2bb3
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 5 deletions.
diff --git a/src/io/lch/hcl2rgb.js b/src/io/lch/hcl2rgb.js
@@ -1,8 +1,8 @@
-import { unpack } from '../../utils/index.js';
+import { unpack, reverse3 } from '../../utils/index.js';
 import lch2rgb from './lch2rgb.js';
 
 const hcl2rgb = (...args) => {
-    const hcl = unpack(args, 'hcl').reverse();
+    const hcl = reverse3(unpack(args, 'hcl'));
     return lch2rgb(...hcl);
 };
 

diff --git a/src/io/lch/index.js b/src/io/lch/index.js
@@ -1,4 +1,4 @@
-import { unpack, type } from '../../utils/index.js';
+import { unpack, type, reverse3 } from '../../utils/index.js';
 import chroma from '../../chroma.js';
 import Color from '../../Color.js';
 import input from '../input.js';
@@ -10,7 +10,7 @@ Color.prototype.lch = function () {
     return rgb2lch(this._rgb);
 };
 Color.prototype.hcl = function () {
-    return rgb2lch(this._rgb).reverse();
+    return reverse3(rgb2lch(this._rgb));
 };
 
 const lch = (...args) => new Color(...args, 'lch');

diff --git a/src/utils/index.js b/src/utils/index.js
@@ -14,4 +14,14 @@ const PITHIRD = PI / 3;
 const DEG2RAD = PI / 180;
 const RAD2DEG = 180 / PI;
 
-export { PI, TWOPI, PITHIRD, DEG2RAD, RAD2DEG, min, max, rnd2, rnd3 };
+/**
+ * Reverse the first three elements of an array
+ *
+ * @param {any[]} arr
+ * @returns {any[]}
+ */
+function reverse3(arr) {
+    return [...arr.slice(0, 3).toReversed(), ...arr.slice(3)];
+}
+
+export { PI, TWOPI, PITHIRD, DEG2RAD, RAD2DEG, min, max, rnd2, rnd3, reverse3 };
diff --git a/test/mix.test.js b/test/mix.test.js
@@ -88,4 +88,16 @@ describe('Some tests for chroma.color()', () => {
         const result = chroma.interpolate('red', 'blue', 0.5, 'lrgb');
         expect(result.hex()).toBe('#b400b4');
     });
+
+    it('mix gray and black', () => {
+        const result = chroma.mix('#666666', '#000000', 0.5, 'lch');
+        expect(result.hex()).toBe('#343434');
+        expect(result.css()).toBe('rgb(52 52 52)');
+    });
+
+    it('mix transparent gray and black', () => {
+        const result = chroma.mix('#66666600', '#000000', 0.5, 'lch');
+        expect(result.hex()).toBe('#34343480');
+        expect(result.css()).toBe('rgb(52 52 52 / 0.5)');
+    });
 });