Incorrect color values when exported as `oklch`

[oskarkrawczyk]

I believe the exported values for oklch are incorrect.

At first I thought it's a byproduct of converting Chroma values (RGB?) into oklch, that the values cannot be translated correctly hence colors differ (in my example desaturated).

But tried a few online color converters and they produce correct representation of colors between formats.

These are examples of exporting colors via Chroma.js (top = hex, bottom = oklch):

In the last example, the first color is #cf4200, this produces:

• oklch(57.61% 18.69% 38.41) in Chroma.js
• oklch(57.61% 0.19 38.415) 1st online tool
• oklch(57.6%, 46.75%, 38.415%) 2nd online tool

While writing this issue, I've noticed that perhaps the root cause of the problem might be the chroma value (second argument) is exported as a percentage instead of a chroma value, between 0 and 0.38 (?) That said, I see there's almost no consistency between online tools, some provide values with percentage only, others with non-percentage values, but from what I'm reading the the chroma value has to be an integer.

If you need more info from me, please let me know as I'd love for this being sorted out.

[oskarkrawczyk]

Quick follow up, I'm almost convinced the root cause of the issue is that second value, and if the percentage was converted to an integer, the color looks nearly correct:

oklch(57.61% 18.69% 38.41) → oklch(57.61% 0.18 38.41)

EDIT:

Testing this idea between different colors, the percentage value never goes beyond 30% so I think we have the culprit.

[regorxxx]

I'm following this scheme and would want to stick with it (I can add it to the docs): https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch

Now I think the problem, as you say, is I simply converted the % values to float. But 100% should be 0.4 not 1. Will fix it asap.

[regorxxx]

Should be fixed now for oklch. If you can provide me the tools you used, I could test the other CSS functions, since some of them may have the same problem.

You can test it at the docs pasting this into any code box:

chroma('#cf4200').oklch(); // [0.58,0.19,38.41]
chroma('#cf4200').css('OKLCH'); // "oklch(57.61% 46.72% 38.41)"
chroma('oklch(57.61% 46.72% 38.41)'); // #cf4200
chroma('oklch(57.61% 0.19 38.41)');  // #cf4200 (there will be rounding errors)