OKLCH & LCH Color Picker

Color picker and converter for OKLCH and LCH color space.

• oklch.com
• 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
• The article by Oklab creator

Development

To run a local copy for development:

1. Install correct versions of Node.js and pnpm. There are two ways:

   1. With asdf version manager:
      1. Install asdf and asdf plugins for Node.js and pnpm
      2. Run asdf install
   2. Manually (check needed versions in .tool-versions)

2. Install dependencies:

   pnpm install

3. Run local server:

   pnpm start

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