diff --git a/.changeset/oklch-mix-alpha.md b/.changeset/oklch-mix-alpha.md new file mode 100644 index 00000000..630442ba --- /dev/null +++ b/.changeset/oklch-mix-alpha.md @@ -0,0 +1,5 @@ +--- +'chroma-js': patch +--- + +fix: preserve alpha when interpolating in oklch diff --git a/src/interpolator/_hsx.js b/src/interpolator/_hsx.js index deb3cbdd..8758b021 100644 --- a/src/interpolator/_hsx.js +++ b/src/interpolator/_hsx.js @@ -1,4 +1,5 @@ import Color from '../Color.js'; +import { reverse3 } from '../utils/index.js'; export default (col1, col2, f, m) => { let xyz0, xyz1; @@ -19,8 +20,8 @@ export default (col1, col2, f, m) => { xyz0 = col1.hcl(); xyz1 = col2.hcl(); } else if (m === 'oklch') { - xyz0 = col1.oklch().reverse(); - xyz1 = col2.oklch().reverse(); + xyz0 = reverse3(col1.oklch()); + xyz1 = reverse3(col2.oklch()); } let hue0, hue1, sat0, sat1, lbv0, lbv1; diff --git a/test/mix.test.js b/test/mix.test.js index e0253b3a..1155ec3d 100644 --- a/test/mix.test.js +++ b/test/mix.test.js @@ -100,4 +100,13 @@ describe('Some tests for chroma.color()', () => { expect(result.hex()).toBe('#34343480'); expect(result.css()).toBe('rgb(52 52 52 / 0.5)'); }); + + it('mix transparent color in oklch', () => { + // alpha on an input must not change the interpolated L, C and H, + // only the alpha channel. So the rgb part has to match the opaque mix. + const opaque = chroma.mix('#ff0000', '#0000ff', 0.5, 'oklch'); + const transparent = chroma.mix('#ff000080', '#0000ff', 0.5, 'oklch'); + expect(transparent.hex('rgb')).toBe(opaque.hex('rgb')); + expect(transparent.hex()).toBe('#ba00c2bf'); + }); });