Skip to content

fix: use MDN specified OKLCH syntax, remove multiplier and Math.round#349

Open
IdrisGit wants to merge 1 commit into
catppuccin:mainfrom
IdrisGit:fix-oklch-syntax
Open

fix: use MDN specified OKLCH syntax, remove multiplier and Math.round#349
IdrisGit wants to merge 1 commit into
catppuccin:mainfrom
IdrisGit:fix-oklch-syntax

Conversation

@IdrisGit

Copy link
Copy Markdown

While the official catppuccin/palette generates the correct OKLCH values, the toOklch helper on the website is generating wrong values.

  • Correct OKLCH syntax is oklch(x y z) and not oklch(x,y,z).
  • OKLCH is very sensitive to values specially the Hue value, rounding it can cause color mismatch
  • C (chroma) is not [0,1], it more like [0,0.4] practically and percentages don't just convert 1:1,so browsers will convert x% to (x/100) * 0.4 instead of just (x/100)

Official MDN docs https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklch

… on values.

- Correct OKLCH syntax is `oklch(x y z)`
- OKLCH is very senstive to values specially the Hue value, rounding it
can cause color mistmatch
- C (chroma) is not [0,1], it more like [0,0.4] practically and
percentages don't just convert 1:1,so browsers will convert x% to
(x/100) * 0.4 instead of just (x/100)

@scarcekoi scarcekoi left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The fixed decimal place implementation is correct (instead of rounding), and it now uses the correct format.
Looks good.

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