24bitColors

THE SCIENCE OF
OKLCH & OKLAB

Putting the human 'eye' directly into a formula.

At the heart of 24bitColors are the latest color spaces born in 2020: 'OKLCH' and 'OKLAB'. This is not just a new color picker. It is a revolutionary event where computers can finally feel color in the same way as humans.

01. PERCEPTION GAP

'Yellow' is much brighter than 'Blue'

The 'HSL color space' traditionally used in Web design had a fatal flaw. That is, 'Numerical brightness does not match perceived brightness.'

Look at the diagram below. HSL formulas claim that dark blue and bright yellow have the same '50% Lightness'. But clearly, yellow looks dazzling to your eyes, right?

'The numbers are correct, but the design looks mismatched.' OKLCH solved this long-standing worry of designers with a biological approach. By incorporating the stimuli received by the retina into the formula, blue and yellow can now be managed with 'correct brightness' as felt by humans.

50%
HSL: 50%
Eye: Dark
Blue
HSL: 50%
Eye: Bright!
Yellow
HSL treats these as EQUAL lightness.
OKLCH fixes this.

▲ Difference in perceived brightness at HSL 'Lightness 50%'.

02. TWO FACES OF COLOR

Read by Map or Compass?

On this site, we use the terms 'OKLCH' and 'OKLAB' depending on the situation, but they are actually different representations of the exact same color space. It is just like the difference between expressing a location on a map by 'latitude and longitude' or 'how many kilometers northeast from here'.

OKLAB (Cartesian)

L=Lightness, a=Green-Red, b=Blue-Yellow

Like mathematical XY coordinates. Ideal for calculating 'color distance'. In this diagnosis, OKLAB is active behind the scenes for judging achromatic colors (gray) and calculating closeness between colors.

OKLCH (Polar)

L=Lightness, C=Chroma, H=Hue

Like a compass and distance. Suitable for human intuitive operations like 'more vivid' or 'more red'. We use this for displaying diagnosis results and analyzing your preferences on the surface.

24bitColors is characterized by balancing calculation 'accuracy' and human 'intuition' by freely moving between these two. especially in handling achromatic colors (black and white), OKLAB is essential for expressing beautiful grays because it can define perfect nothingness as 'a=0, b=0'.

03. UNBOUNDED FUTURE

Escape from the 'sRGB Cage'

Web design until now has been trapped inside the color cage called 'sRGB'. sRGB is a standard created based on CRT monitors over 20 years ago, and cannot express even half of the vivid colors in the real world.

However, OKLCH has no theoretical 'upper limit of saturation'. Although many smartphones and PC monitors can still only output the sRGB range, the latest iPhones and MacBooks (Display P3 compatible) are already starting to display colors outside of it.

By building the algorithm with OKLCH, we have secured 'Future-Proofivity' that can fully utilize the performance of any high-performance display that appears in the future. The color you chose today should shine more vividly and beautifully when viewed on a display 10 years from now.

Current Web (sRGB)
Your True Color →
What is OKLCH? | 24bitColors