![]() ![]() If I use the HCT result from the C9, Blue example and reverse the calculation to get an RGB color, I get a different kind of blue: where the custom color is rgb(64, 169, 255), the selected primary color becomes rgb(76, 168, 255): In other words, a bit more red, slightly less green, and no difference in blue. 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. Select the text or shape that you want to color, go to text color, border color or fill, depending on what you want, select CUSTOM and paste the HEX 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. |