#iOS | #Android ファショ通

これ便利ですね.

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 に合わせるとこんなかんじになるのかな.

(おしまい)