目次一覧
状態:-
閲覧数:2,232
投稿日:2017-01-26
更新日:2022-03-19
Color - Style ／ 原色(Primary color) とは？／「Material Design 2014 年」の原色(Primary color)となる濃度500の色は、20 色
二次色(Secondary Color)とは？ ／ アプリ内での色の使用
二次色(Secondary Color)とは？ ／ アプリ内での色の使用
Color - Style ／ 原色(Primary color) とは？／「Material Design 2014 年」の原色(Primary color)となる濃度500の色は、20 色
Color - Style
Googleは、(濃度)500(の)色をアプリ原色(Primary color)として使用し、その他の色をアクセントカラーとして使用することを推奨しています。
Color - Style原色(Primary color) とは？
原色(Primary colorは、アプリの画面やコンポーネントで最も頻繁に表示される色です。
2次色がない場合は、要素のアクセントとして使用することもできます。
要素間にコントラストをつけるには、原色を薄くしたり濃くしたりします。明るい色と暗い色のコントラストは、ステータスバーとツールバーのように、表面と表面の間に区切りを示すのに役立ちます。
この配色は、原色の異なる色調を含んでおり、より明るいまたはより暗いコントラストが必要な場合に使用します。
「Material Design 2014 年」の原色(Primary color)となる濃度500の色は、20 色
| 英語 | 日本語 | カラーコード |
|---|---|---|
| Red | 赤 | #F44336 |
| Pink | ピンク | #E91E63 |
| Purple | 紫 | #9C27B0 |
| Deep Purple | 深紫 | #673AB7 |
| Indigo | 紺 | #3F51B5 |
| Blue | 青 | #2196F3 |
| Light Blue | ライトブルー | #03A9F4 |
| Cyan | シアン | #00BCD4 |
| Teal | 緑青 | #009688 |
| Green | 緑 | #4CAF50 |
| Light Green | ライトグリーン | #8BC34A |
| Lime | ライム | #CDDC39 |
| Yellow | 黄 | #FFEB3B |
| Amber | 琥珀 | #FFC107 |
| Orange | オレンジ | #FF9800 |
| Deep Orange | ディープオレンジ | #FF5722 |
| Brown | 茶 | #795548 |
| Grey | グレー | #9E9E9E |
| Blue Grey | ブルーグレー | #607D8B |
| Black | 黒 | #000000 |
・マテリアルカラーをランダムに3色取得 ／ 重複も許容
二次色(Secondary Color)とは？ ／ アプリ内での色の使用
二次色(Secondary Color)とは？
二次色(Secondary Color)は、UIの重要な部分にアクセントを付けるために使用される色です。
原色の補色や類似色を使用することができますが、単に原色の明暗を表すだけであってはなりません。
周囲の要素とのコントラストを考慮し、アクセントとして控えめに使用します。
2色目のカラーは、以下のような場合に最適です。
・ボタン、フローティングアクションボタン、ボタンテキスト
・テキストフィールド、カーソル、テキスト選択
・プログレスバー
・選択コントロール、ボタン、スライダー
・リンク
・ヘッドライン
セカンダリーカラーの使用は任意です。
原色のバリエーションでアクセントをつけるのであれば、不要です。
セカンダリーカラーの配色は、カラフルである必要はありません。
周囲の要素とのコントラストがあり、UI全体で控えめに使用されればよいのです。
アプリ内での色の使用
大きなUIエリアやエレメントは、プライマリーカラーで彩るのが基本です。
小さな領域は、二次色でアクセントをつけるとよいでしょう。
2次色がない場合は、1次色で代用することができます。