On the other hand, the differences in CIE-Lch(ab) and CIE-Lch(uv) values are small. So the short answer is NO: Material 3 does NOT exactly use YOUR custom color. But what about the Material Theme Builder's "Custom Color" option? It has to use YOUR color, yes?įor this experiment, I took 4 colors from the cielab.io website and compared them with the Hue that HCT selected for the primary color. Okay, so Material 3 uses some calculations to extract the hue from an image. This at least explains the fact that I was sometimes not seeing any change in the color palettes! Custom color ¶ Material 3 is NOT using the exact hue from the example, but definately using some HCT-fu here So, slightly different hues (212°, 210° and 217°), give the exact same Material 3 hue!Ĭonverting the colors to CIE-Lch(ab) (Lightness, Chroma, Hue) using ColorMine also results in different hues for the three input images with yet another Material 3 hue: Position If I translate the hex RGB colors to HSL colors (Hue, Saturation, Lightness) I get from left to right: Position And as you can see, the resulting source color - the extracted shade of Material 3 - is exactly the same (RGB color #4285f4). I dragged three different bluish images from the internet with a single color. In doing so, I sometimes got confused because the theme didn't always really change. I started my experiments with Google to find some random images for me, drag them into the Material Theme Builder, and see what primary color (and secondary/tertiary colors of course) Material 3 appears with. So let's see what they do! Dynamic color ¶ This builder provides both dynamic color-based primary color selection and custom color selection. Google offers the free Material Theme Builder plugin on its Figma platform. Examples from CIElab colors Examples from CIElab colors.Examples from picture Examples from picture.Home Assistant Material 3 Themes Home Assistant Material 3 Themes.Picking the Hue Picking the Hue Table of contents.Material 3 Analysis Material 3 Analysis.
0 Comments
Leave a Reply. |