material-foundation / material-color-utilities

Color libraries for Material You
Apache License 2.0
1.57k stars 134 forks source link

get unexpect color #138

Open xxholly32 opened 5 months ago

xxholly32 commented 5 months ago

input

import { Hct, argbFromHex, hexFromArgb } from '@material/material-color-utilities';

export const hexToHct = (hex: string): number[] => {
    const hclColor: Hct = Hct.fromInt(argbFromHex(hex));
    return [hclColor.hue, hclColor.chroma, hclColor.tone];
};

export const hctToHex = (hct: number[]): string => {
    const hctColor: Hct = Hct.from(hct[0], hct[1], hct[2]);
    return hexFromArgb(hctColor.toInt());
};

const [hRotate, cTarget, tStart] = [209, 2, 73]
console.log("initial:", [hRotate, cTarget, tStart])
console.log("initial to hctToHex :", hctToHex([hRotate, cTarget, tStart]))
console.log("initial to hctToHex to hexToHct:",hexToHct(hctToHex([hRotate, cTarget, tStart])))
console.log("initial to hctToHex to hexToHct to hctToHex:",hctToHex(hexToHct(hctToHex([hRotate, cTarget, tStart]))))

output

initial: (3) [209, 2, 73]
initial to hctToHex : #b4b3b3
initial to hctToHex to hexToHct: (3) [214.8962657784951, 1.6994043852090706, 73.02219038271852]
initial to hctToHex to hexToHct to hctToHex: #b4b3b3

I wonder why 1 and 3 are different and 2 and 4 are the same. Is there some adjustment in the transformation?