Material Color UtilitiesはMaterial 3のカラーシステムに関するアルゴリズムやユーティリティを含むライブラリです。 HCT色空間や 画像から代表色を抽出するquantizeなど様々なコンポーネントを含んでいます。最近リリースされたv0.3.0 *1で非推奨になったSchemeの代替として用意されているDynamic Schemeが面白かったので紹介します。
Dynamic Schemeはコンテンツから抽出した色や指定した色、コントラストレベル、variantなどのいくつかのパラメータからのカラースキーマを生成する仕組みです*2。
ライブラリには9つのvariantが用意されていて、例えばAndroidのMaterial Youのデフォルトと同じにするならSchemeTonalSpotというvariantを使います。詳しくはDynamic Schemeのドキュメントを参照。
それぞれのパラメータがどのような影響を与えるのか理解しやすいように、インタラクティブにパラメータを変更してカラースキーマを確認できるようにしてみました。
https://codepen.io/mechairoi/full/mdodrJj
シードカラーやコントラストレベルなどのパラメータを固定して、variantを切り替えると下のようになります。
グレースケールに近いものもあったりして面白いですね。最後に各variantの説明をソースコードから引用します。
A scheme that places the source color in
Scheme.primaryContainer.Primary Container is the source color, adjusted for color relativity. It maintains constant appearance in light mode and dark mode. This adds ~5 tone in light mode, and subtracts ~5 tone in dark mode. Tertiary Container is the complement to the source color, using
TemperatureCache. It also maintains constant appearance.
A Dynamic Color theme that is intentionally detached from the source color.
A scheme that places the source color in
Scheme.primaryContainer.Primary Container is the source color, adjusted for color relativity. It maintains constant appearance in light mode and dark mode. This adds ~5 tone in light mode, and subtracts ~5 tone in dark mode. Tertiary Container is the complement to the source color, using
TemperatureCache. It also maintains constant appearance.
A playful theme - the source color's hue does not appear in the theme.
A Dynamic Color theme that is grayscale.
A Dynamic Color theme that is near grayscale.
A playful theme - the source color's hue does not appear in the theme.
A Dynamic Color theme with low to medium colorfulness and a Tertiary TonalPalette with a hue related to the source color.
The default Material You theme on Android 12 and 13.
A Dynamic Color theme that maxes out colorfulness at each position in the Primary Tonal Palette.
