Table of Contents

• What is LCH Colour
• Comparing LCH to RGB
• Why OKLCH replaced LCH
• OKLCH Syntax
• Another way to use OKLCH
• OKLCH browser support

LCH stands for lightness, chroma, and hue. It is a colour space that is designed to address some of the limitations of RGB. It is a polar coordinate version of the CIELAB colour space, which is a colour model that is designed to be more perceptually uniform than RGB. This means that colours that are close together in the colour space are more similar to each other in terms of how they are perceived by the human eye.

The LCH gradient has a smoother transition between the two colours and a wider colour gamut.

LCH also has a more consistent lightness across the gradient, which makes it easier to create smooth transitions between colours.

Why OKLCH replaced LCH

The OKLCH colour space is a variant of the LCH colour space that is designed to be more perceptually uniform than LCH.

Lightness

The Lightness value ranges from 0 to 1 or is used as a percentage. Shades of gray are in between.

Chroma

Chroma determines the colour saturation. A chroma value of 0 results in a neutral colour (regardless of the lightness), higher values intensify the colour’s vividness up to the limits of the colour space.

Hue

Hue is represented as an angle in degrees from 0 to 360 to determine the colour from a colour wheel.

Alpha Transparency

CSS Level 4 also introduces a new syntax for alpha transparency, using a slash after the colour parameters. You can add a fallback for broswers that don’t support the syntax.

body {
  color: orange;
  color: oklch(79% 0.17 70 / 100 ); /* with alpha/*/
}

just add ‘in oklch’ to the gradient direction and let the browser handle the transformation

div {
  background-image: linear-gradient(90deg in oklch, red 0%, orange 100%);
}

OKLCH is widely supported in modern browsers, and it is a great choice for web design and other digital design applications. It is also supported in the latest versions of popular design tools, such as Adobe Photoshop and Illustrator.