A new color space called HCT¶
With Material 3 for Android 12, Google introduces a new color system, called HCT.
HCT is short for:
- Hue, ie the color in degrees (0..360)
- Chroma, ie the colorfulness, and
- Tone, ie the lightness from white (100%)to black (0%).
The HCT color system combines the best from CIE-Lab and CAM16 color spaces
It is built using CAM16 for Hue and Chroma, and Lightness (L*) from CIE-Lab.
How does it work. Why is it so special?¶
The next two pages are about some experiments to see if I can understand how Material 3 works and if it does what it promises.
For this, I used the 22 examples I created to analyze some of the Material 3 aspects.
TL;DR
From the examples, I can conclude that all themes with different colors give excellent displays with consistent readability and contrast.
That makes the 22 themes interchangeable without any change to the Lovelace view and (custom) card configuration, assuming you use the Material 3 theme color definitions of course!
This, and the fact that I can generate a theme with Figma and a bit of Javascript, makes me very happy with M3, as this highly automated way of creating a theme also saves a lot of time!
But then again, it raised enough questions about what Material 3 does in some cases.
Read on, if you're interested 
But before, that, the basis of Material 3...¶
The newly introduced HCT color system combines both CIE-Lab and CAM16 color spaces. The best of both worlds.
The lightness in CIE-Lab is in line with human perception, allowing for very accurate color tones. It is the reason why Material 3 can guarantee contrast differences, and thus the accessibility. The contrast difference between background and foreground is one of the most important factors in the WCAG guidelines.
Where the contrast ratio is non-linear, CIE-L* is. It means that HCT can use differences to guarantee the contrast ratio. A difference of 40 in HCT tone guarantees a contrast ratio >= 3.0, and a difference of 50 guarantees a contrast ratio >= 4.5.
If you look at the light and dark themes, you see these differences in the background and foreground colors. Material 3 uses a minimum difference of 60 to accomplish a great contrast ratio.
So, once again: Below you see the two examples as to why the combination of CIE-Lab and CAM16 is such a great idea:
CAM16 shows the best Hue linearity
CAM16 shows the best color circles and chroma lines
And the CIELab model with the best lightness prediction
(screenshots taken from Colorio README)