Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

get unexpect color #138

Open
xxholly32 opened this issue Jan 12, 2024 · 1 comment
Open

get unexpect color #138

xxholly32 opened this issue Jan 12, 2024 · 1 comment
Labels
explain (Label used internally) quick (Label used internally)

Comments

@xxholly32
Copy link

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?

@pennzht pennzht added quick (Label used internally) explain (Label used internally) labels Feb 1, 2024
@Kyant0
Copy link

Kyant0 commented Dec 15, 2024

Because there may be a gamut clipping (chroma reduction) in the conversion from hct to sRGB, to let the color fall in the sRGB gamut. HCT can express any impossible colors, so we should do chroma reduction to let it correctly display.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
explain (Label used internally) quick (Label used internally)
Projects
None yet
Development

No branches or pull requests

3 participants