OKLCH Colors#

What Are OKLCH Colors?#

The OKLCH color model was created by Björn Ottosson in 2020 and has already been widely adopted by many browsers and applications after being standardized as CSS parameters a few years later. Unlike RGB, HSL, and many other color models, which are either linear or cylindrical, OKLCH takes a different approach.

Since humans perceive colors differently from how they are represented on screens as red, green, and blue — we actually see lightness, redness versus greenness, and blueness versus yellowness with our eye cones — OKLCH is designed to make colors appear more consistent to the human eye.

For example, when you change the hue in HSL, the perceived lightness of the color can vary significantly across the palette, making some colors appear much darker or lighter than others. In contrast, OKLCH maintains a consistent lightness across different hues, resulting in a uniform appearance.

Example Gradients#

OKLCH produces smoother and more visually appealing color transitions than HSL or RGB when transitioning from one color to another gradually. This is because the lightness component in OKLCH is designed to be perceptually uniform, leading to more natural-looking gradients.

For instance, consider the following comparison of gradients transitioning from red to blue using sRGB, HSL, and OKLCH:

Model	Gradient	Notes
sRGB		This is slightly darker in the middle.
HSL		This is much brighter in the middle.
OKLCH		The brightness is more uniform throughout the color transition.

Disclaimer

Not all terminals support 24-bit colors in RGB, HSL, Hex, or OKLCH. If your terminal does support such advanced colors, read on.

Input Parameters#

Each color in OKLCH can be defined as lightness, chroma, and hue:

Parameter	Lightness	Chroma	Hue
Allowed values	`0.0`-`1.0`	`0.0`-`0.4`	`0`-`360` degrees
Description	Brightness of the color.	Intensity of the color.	Degree on the color wheel.

What Is Lightness?#

Lightness is the brightness of the color. It ranges from 0.0 to 1.0, where 0.0 is black and 1.0 is white. Example:

Example
Lightness	0.0	0.1	0.2	0.3	0.4	0.5	0.6	0.7	0.8	0.9	1.0

What Is Hue?#

Hue is the color wheel position from 0 to 360 degrees. Example:

Example
Hue	0	45	90	135	180	225	270	315	360

What Is Chroma?#

While lightness and hue are relatively straightforward, chroma can be more difficult to understand. It represents the intensity or purity of a color. Higher values indicate more vivid, saturated colors, while lower values indicate more muted or grayish, unsaturated colors.

However, the maximum chroma value varies depending on the lightness and hue. Therefore, not all combinations of lightness, chroma, and hue produce valid colors.

Example:

Example
Chroma	0.00	0.05	0.10	0.15	0.20	0.25	0.30	0.35	0.40

Although the maximum chroma value of 0.4 can technically be higher and replicable on some wide-gamut displays, 0.4 is a reasonable limit for most use cases, as defined in the CSS specification for oklch().

Full Line Text Functions#

Try the oklch() and bg_oklch() methods for a full line of colored text..

Example:

Python
from colorist import oklch, bg_oklch

oklch("I want this text in orange OKLCH colors", 0.71, 0.1, 31)
bg_oklch("I want this background in orange OKLCH colors", 0.71, 0.1, 31)

How it appears in the terminal:

% I want this text in orange OKLCH colors
% I want this background in orange OKLCH colors

Custom String Styling#

Or customize the styling of text and background with the ColorOKLCH() and BgColorOKLCH() classes:

Python
from colorist import ColorOKLCH, BgColorOKLCH

neon_pink = ColorOKLCH(0.7, 0.3, 332)
bg_basil_green = BgColorOKLCH(0.54, 0.15, 141)

print(f"I want to use {neon_pink}NEON PINK{neon_pink.OFF}...")
print(f"... and {bg_basil_green}BASIL GREEN{bg_basil_green.OFF} colors")

How it appears in the terminal:

% I want to use NEON PINK...
% ... and BASIL GREEN colors