Material Color Tool が便利そう

4606 ワード
ColorTool Material Android Design Android テキストリンク

概要

Material Design の Color Tool というのを見つけました。
https://material.io/resources/color/

※ 筆者が Android エンジニアのため、 Android をベースに書いています。

最新の Material Design の Color Pattern を、好きな色を選ぶだけで自動でいい感じにしてくれるみたいです。

ちなみに2019年8月時点の Android の Material Design Support は 1.1.0-alpha09 で、 1.0.0 とかだとうまく適用できないかもしれません。 (1.0.0 と 1.1.0 は結構大きく変わっているようです)
https://github.com/material-components/material-components-android/releases

使い方

まず Primary Color を選択する

これだけでもなんとなくいい感じになってる。

次に Secondary Color を選択する

必要に応じて、 Text on Primary / Secondary を変更することもできますが、白のままでちょうど良いのでそのままで。

可読性もわかりやすく示してくれます

どこでどの色が使われるのかも一目瞭然

各 Platform 向けに Export もできる

できた成果物がこちら。

colors.xml
<!--?xml version="1.0" encoding="UTF-8"?-->
<resources>
  <color name="primaryColor">#3f51b5</color>
  <color name="primaryLightColor">#757de8</color>
  <color name="primaryDarkColor">#002984</color>
  <color name="secondaryColor">#007769</color>
  <color name="secondaryLightColor">#48a697</color>
  <color name="secondaryDarkColor">#004a3f</color>
  <color name="primaryTextColor">#ffffff</color>
  <color name="secondaryTextColor">#ffffff</color>
</resources>

感想

非常に簡単に使えました。
デザイナさんにも使ってもらえるとエンジニアが幸せになれそうな気がする。