これ便利ですね.
Material Design Color Palette Generator - Material Palette
触っていると大体こんな感じ.
1. 最初のクリックは, Primary color.
2. Primary color から Dark/Light を作成.
3. 2つめのクリックは, Accent color.
4. Textの Primary/Secondary は固定.
分かりやすく書くと
DARK PRIMARY
↑
PRIMARY *1
↓
LIGHT PRIMARY
ACCENT *3
PRIMARY TEXT #212121
SECONDARY TEXT #727272
DIVIDER COLOR #B6B6B6
ベースとなる19色はそれぞれ濃淡があり
HEXな記号は, Google のサイトにまとまっている.
Color - Style - Google design guidelines
ここを見ると, 濃淡に関してこんな例が上がっているのでそのまま鵜呑み.
- PRIMARY は 500.
- それから派生する DARK は 700.
- 同じく LIGHT は 100.
- ACCENT(SECONDARY) は A200.
- その DARK/LIGHT はそれぞれ A400/A100
こうなる.
DARK PRIMARY(700)
↑
PRIMARY(500) *
↓
LIGHT PRIMARY(100)
DARK SECONDARY(A400)
↑
SECONDARY(ACCENT)(A200) *
↓
LIGHT SECONDARY(A100)
PRIMARY TEXT #212121
SECONDARY TEXT #727272
DIVIDER COLOR #B6B6B6
PRIMARY と SECONDARY(ACCENT) の2色を決めると, 画面を構成する9色が決まる.
500 とか A200 とかをHEX記号にするには, 上記Googleのリファレンスをみたり,
または, こんなサイトもある.
Material UI | Material Design | Material UI Colors
これ, もう全部 color.xml に登録しておいたら, どうなのか.
AndroidStudioなら実際の色もGUI上で確認できるし.
こんなアプリがあって, コードもGitHub上で公開していますので color.xml いただいてます.
Material Design Color Palettes - Android Apps on Google Play
Android Material Design Colours
MaterialTheme のカラーname に合わせるとこんなかんじになるのかな.
(おしまい)
