Material Design のパレット色を決めるときの簡単な方針づけ

これ便利ですね.

Material Design Color Palette Generator - Material Palette

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

Color - Style - Google design guidelines

ここを見ると, 濃淡に関してこんな例が上がっているのでそのまま鵜呑み.

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

Material UI | Material Design | Material UI Colors

これ, もう全部 color.xml に登録しておいたら, どうなのか.

AndroidStudioなら実際の色もGUI上で確認できるし.

color_xml

こんなアプリがあって, コードもGitHub上で公開していますので color.xml いただいてます.

Material_Design_Color_Palettes_-_Android_Apps_on_Google_Play

Material Design Color Palettes - Android Apps on Google Play

Android_Material_Design_Colours

Android Material Design Colours

MaterialTheme のカラーname に合わせるとこんなかんじになるのかな.

color_xml_Project_

(おしまい)


関連ワード:  AndroidAndroidStudioGoogleツールニュース初心者開発