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

HCL / LCH plain js object not constructing the correct colors. #315

Closed
asp55 opened this issue Jun 12, 2023 · 3 comments
Closed

HCL / LCH plain js object not constructing the correct colors. #315

asp55 opened this issue Jun 12, 2023 · 3 comments
Labels

Comments

@asp55
Copy link

asp55 commented Jun 12, 2023

Constructing a color using chroma(h, c, l, 'hcl') format is resulting in a different (correct) value from constructing with plain js object chroma({h:h, c:c, l:l})

See screenshot of using following constructors inside documentation page.

chroma({ l:80, c:25, h:200 });

chroma(200, 25, 80, 'hcl');
chroma({ h:200, c:25, l:80, });
DemonstratedInsideDocumentation
@prjctimg
Copy link

prjctimg commented Jul 20, 2023

I also noticed the same bug. It may be that the constructor is not passing the mode parameter internally thus it returns default black. A work around would be passing the mode parameter as a property of the destructured color object like so:

chroma({ l:80, c:25, h:200,mode:'lch' });

Or the code could be internally modified to extract the mode from stringifying the objects enumerable properties like so (pseudocode):

// We could add a type check to see if the passed in color token is an object and if it doesn't have the mode property explicitly defined then we extract it from the object keys
let color = { l:80, c:25, h:200 }
let mode = color.keys.toString()


@gka gka added the bug label Aug 17, 2024
@gka
Copy link
Owner

gka commented Aug 17, 2024

this bug seems to have been fixed already. I added these tests to our test suite to confirm this:

it('create lch color from object', () => {
    expect(new Color({ l: 80, c: 25, h: 200 }).hex()).toBe('#85d4d5');
    expect(chroma({ l: 80, c: 25, h: 200 }).hex()).toBe('#85d4d5');
    expect(chroma.lch(80, 25, 200).hex()).toBe('#85d4d5');
    expect(chroma(80, 25, 200, 'lch').hex()).toBe('#85d4d5');
});

it('create hcl color from object', () => {
    expect(new Color({ h: 200, c: 25, l: 80 }).hex()).toBe('#85d4d5');
    expect(chroma({ h: 200, c: 25, l: 80 }).hex()).toBe('#85d4d5');
    expect(chroma.hcl(200, 25, 80).hex()).toBe('#85d4d5');
    expect(chroma(200, 25, 80, 'hcl').hex()).toBe('#85d4d5');
});

@gka gka closed this as completed Aug 17, 2024
@prjctimg
Copy link

Thanks again! 💯

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants