https://github.com/dokozero/oklch-css-relative-chroma-demo

Examples for the upgrade proposal of the oklch() CSS notation with relative chroma support.
https://github.com/dokozero/oklch-css-relative-chroma-demo

chroma color css oklch postcss

Last synced: about 1 month ago
JSON representation

Examples for the upgrade proposal of the oklch() CSS notation with relative chroma support.

• Host: GitHub
• URL: https://github.com/dokozero/oklch-css-relative-chroma-demo
• Owner: dokozero
• License: mit
• Created: 2025-03-12T20:21:26.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2025-05-14T10:58:55.000Z (5 months ago)
• Last Synced: 2025-07-09T22:05:20.342Z (3 months ago)
• Topics: chroma, color, css, oklch, postcss
• Language: CSS
• Homepage:
• Size: 302 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# OkLCH CSS relative chroma demo

![Palettes from the demo.](https://ik.imagekit.io/cgavlsdta/tr:cp-true/oklch-css-relative-chroma-documentation/demo.webp?updatedAt=1742417909171)

Demo code for the PostCSS plugin: [postcss-oklch-relative-chroma](https://github.com/dokozero/postcss-oklch-relative-chroma).

[Live demo](https://dokozero.github.io/oklch-css-relative-chroma-demo/)

[Documentation](https://dokozero.design/en/projects/oklch-relative-chroma/)

There is a [discussion in csswg-drafts repo](https://github.com/w3c/csswg-drafts/issues/11946).

## How to modify the demo

- Clone the repo on your machine.

- Run `npm run dev` to see your changes locally.

### To modify the relative chroma palettes

- Change the values in `src/demo/styles/sass/constants.scss` and do the same in `src/demo/data/constants.ts`.

### To modify the relative chroma palettes with manual chroma/hue adjustments

- Change the values in `src/demo/styles/sass/manual-palette-tokens.scss`.

When you are done, you can update the build with `npm run build` and run `npm run preview` to check it.