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

Do not use HSL normalized saturation and hue for certain spaces #582

Merged
merged 4 commits into from
Aug 9, 2024

Conversation

facelessuser
Copy link
Collaborator

@facelessuser facelessuser commented Aug 7, 2024

The current implementation of HSL normalizes negative saturation, and while the resultant values, if used as a base for HSV conversion, are compatible and will round trip well, it can often produce negative saturation in HSV for out of gamut colors in HSV just due to how the HSV algorithm is defined.

Additionally, HWB currently uses HSV as a base for conversion and, if HSL negative saturation normalization is propagated through HSL -> HSV -> HWB, round trip can break down as the HWB algorithm does not mathematically account for such normalization.

HSV is now calculated from sRGB directly which sidesteps the HSL hue/saturation normalization. In turn, HWB which uses HSV as the base for conversion will also not be affected by the HSL hue/saturation normalization.

w3c/csswg-drafts#10695

The current implementation of HSL normalizes negative saturation, and
while the resultant values, if used as a base for HSV conversion, are
compatible and will round trip well, it can often produce negative
saturation in HSV for out of gamut colors in HSV just due to how the HSV
algorithm is defined.

Additionally, HWB currently uses HSV as a base for conversion and, if
HSL negative saturation normalization is propagated through HSL -> HSV
-> HWB, round trip can break down as the HWB algorithm does not
mathematically account for such normalization. So HSV forces conversion
directly through sRGB and will calculate an non-normalized HSL base for
conversion. HSV can then be used safely as a base for HWB conversion.
Copy link

netlify bot commented Aug 7, 2024

Deploy Preview for colorjs ready!

Name Link
🔨 Latest commit ebc8f92
🔍 Latest deploy log https://app.netlify.com/sites/colorjs/deploys/66b56cffeea2d60008558b07
😎 Deploy Preview https://deploy-preview-582--colorjs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@facelessuser
Copy link
Collaborator Author

Before:

> var { default: Color } = require("colorjs.io");
undefined
> new Color('lab', [100, 104.3, -50.9]).to('hwb').to('lab').coords
[ 81.53810579383484, 0, 0 ]
> new Color('lab', [100, 104.3, -50.9]).to('hsv').to('lab').coords
[ 100, 104.30000000000017, -50.90000000000008 ]
> new Color('lab', [100, 104.3, -50.9]).to('hsl').to('lab').coords
[ 100, 104.30000000000017, -50.90000000000008 ]

After:

> var { default: Color } = require("colorjs.io");
undefined
> new Color('lab', [100, 104.3, -50.9]).to('hwb').to('lab').coords
[ 100, 104.30000000000017, -50.90000000000008 ]
> new Color('lab', [100, 104.3, -50.9]).to('hsv').to('lab').coords
[ 100, 104.30000000000017, -50.90000000000008 ]
> new Color('lab', [100, 104.3, -50.9]).to('hsl').to('lab').coords
[ 100, 104.30000000000017, -50.90000000000008 ]

@svgeesus
Copy link
Member

svgeesus commented Aug 9, 2024

Nice, I just merged the PR on CSS Color 4 and was headed here to do the same change.

@svgeesus svgeesus merged commit fc076e0 into color-js:main Aug 9, 2024
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants