Member-only story
Fast Prototyping Flutter Apps, Material Design 3 Colorspace
Design is intelligence made visible. — Alina Wheeler, author
I will be showing you why the why of why we have new color space in Material Design 3.
Everyone explains this wrong. The color space in Material Design 3 is called HTC, which is Hue Tone Chroma.
Forget the math involved in implementing it. Its core revolves around some core concepts:
1. Electronics can never fully display the millions of colors we can perceive.
2. Humans color perception changes if the color is in light or darkness.
Thus, the Material Design team came up with a way to compute the efficiency of the device to display color and then this HTC color space implementation uses that to compute the correct set of adjustments to display the correct color tone. The package that does this in flutter is called the Material Color Utilities package:
So now let’s see how this works in themes and how to compute a color scheme change based on the user wallpaper or accent…
