Theme Palettes

M3 Palettes...¶

One of the main highlights of Material 3 is the tonal palettes that should meet WCGA standards.

As Google says:

As HCT uses the CIE-L* colorspace for lightness, lets see if what that does with a generated tonal palette.

CIE L* lightness check...¶

I took the C1 example and checked the lightness values.

Color conversion using sRGB and CIE-Lab

We see an exact match between the Material 3 lightness and the CIE-Lch(ab) lightness value for primary, secondary, and tertiary color palettes.
You may also notice how the sRGB values ​​are sometimes close and sometimes very different from these CIE values, which is why sRGB is not suitable for this kind of calculation.

Now let's take a look at the primary, secondary and tertiary palettes. Can we make sense of them?

Primary palette¶

Let's do some observations and look at the primary palette first!

Experiment 1: how do primary palettes compare?¶

Below you can see all primary pallets from the "custom" color examples. Please note that all x2%, x5% (except 95%), and x7% values ​​do not belong to the original Material 3 palette, but were added by me to have more tonal steps to work with.

Some noticeable things from right to left:

• Some colors have less chroma/colorfulness in the darker areas than other colors: the red/blue/magenta show more chroma in darker tones than yellow/lime/green/cyan.
• There is a clear "break" visible at the 50%/60% tones: exactly the boundary between the dark and the light tones
• Another "break" is visible in many of the palettes between 80% and 90% (85% was added by me).
• Some of the colors are very colorful in the high lightness parts (say above 90%), and others are not. Especially the yellow, lime green/green, and cyan stand out.
  
  This is especially visible in the 99% lightness blocks. The above colors are visible, others are barely distinguishable.

And that is to be expected, as these colors can have more chroma with high lightness values in the sRGB space when translated from CIE-L* space than the others.

The following example shows this effect: yellow, green, and cyan are more colorful than any other color at higher lightness! Blue, purple, magenta, and red are much more subdued. The reverse is also valid: blue, purple, magenta, and red are more vibrant in darker tones.

Note that dark orange with high chroma does not exist: that is what we call brown! The same is valid for yellow: mixing that color with black also turns brownish.

Experiment 2: what about palette hue?¶

Since I couldn't find a CAM16 conversion table, I use CIE-Lch(ab) and CIE-Lch(uv) to check the tint values ​​with different lightness. The results are therefore less accurate but averaging the results should should make them usable compared to CAM16.

If we look at the next table, we can see that Material 3 is not only varying lightness for the tonal palette but also varying both chroma and hue. As we have learned from the above observation, keeping the hue stable in the high lightness parts is difficult.

Color conversion using CIE-L*

Secondary and Tertiary palette¶

For starters, the "normal" way to choose a secondary or tertiary color is to move the color wheel a few degrees. The secondary color is usually a supporting color for the primary color, and the tertiary color more like an accent color.

Experiment 3: Can we make sense of secondary and tertiary colors?¶

I'm using CIE-LCh(uv) for this experiment. It's not very good at predicting chroma and hue, but maybe we can see something. Chroma is better than the Hue prediction.

Using the mean values ​​and differences, the variations between CAM16 and CIE-LCh(uv) can be smoothed out.

Secondary color palette:

• The hue value varies but stays close to the primary hue value with an average difference of 0.05° (so nearly the same!).
• The chroma value seems to be very constant: ~20 for red and yellow, and around ~16 for the other colors. The chroma for the primary color has all sorts of values, so this can't be a coincidence.

Tertiary color palette:

• The hue value hovers between 39° and 83° with an average of 61°.
• The chroma value hovers between 21 and 38 with an average of: 28.

And finally, lets see how these observerations stack up against the real thing, as the calculations are known for both palettes:

HCT Secondary color palette calculation:

• Hue is the same as for the primary color palette. Matches with the 0.05° difference.
• Chroma is fixed to 16! I got 2x20 and 4x16 (average of 18.2), so still a good match for some of the colors.

And the HCT tertiary palette calculation:

• Hue is shifted 60° from the primary color palette. The CIE-LCh(uv) averaged at 61°. Again pretty close!
• Chroma is fixed to 24! I got 28 from CIE-LCh(uv). CAM16 is much better for chroma.