https://github.com/evilmartians/oklch-picker

Color Picker for LCH
https://github.com/evilmartians/oklch-picker

Last synced: 15 days ago
JSON representation

Color Picker for LCH

• Host: GitHub
• URL: https://github.com/evilmartians/oklch-picker
• Owner: evilmartians
• License: other
• Created: 2022-02-19T13:42:06.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-06-02T15:26:00.000Z (22 days ago)
• Last Synced: 2024-06-03T00:30:49.790Z (22 days ago)
• Language: TypeScript
• Homepage: https://oklch.com
• Size: 2.04 MB
• Stars: 688
• Watchers: 8
• Forks: 50
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-stars - evilmartians/oklch-picker - Color Picker for LCH (TypeScript)

README

        
# OKLCH & LCH Color Picker

Color picker and converter for OKLCH and LCH color space.

- [`oklch.com`](https://oklch.com)

- [`lch.oklch.com`](https://lch.oklch.com)

OKLCH is a new way to encode colors (like hex, RGBA, or HSL):

- OKLCH has native browser support.

- It can encode more colors for modern screens (P3, Rec. 2020, and beyond).

- [Unlike HSL], OKLCH always has predictable contrast

  after color transformation.

- In contrast [with LCH and Lab], no [hue shift] on chroma changes.

- Provides great accessibility on palette generation.

Additional links about Oklab and OKLCH:

- [OKLCH in CSS: why we moved from RGB and HSL](https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl)

- [The article by Oklab creator](https://bottosson.github.io/posts/oklab/)

[Unlike HSL]: https://wildbit.com/blog/accessible-palette-stop-using-hsl-for-color-systems

[with LCH and Lab]: https://bottosson.github.io/posts/oklab/#blending-colors

[hue shift]: https://lch.oklch.com/#35,55,297,100

## Development

To run a local copy for development:

1. Install Node.js and `pnpm`.

2. Install dependencies:

   ```sh

   pnpm install

   ```

3. Run local server:

   ```sh

   pnpm start

   ```

We recommend installing Prettier and EditorConfig plugins to your text editor.