Googleの「500」色見本とは正確には何ですか？

36

私はGoogleのマテリアルデザインを読んでいて、スタイルを読んでいるときに、彼らは500色の原色（および50からほぼ白い、900までの範囲の他の数字）について言及し続けていますが、何がこれはどういう意味ですか？

独自の「マテリアルにインスパイアされた」色見本を作成するために手を試したいのですが、色の名前付けが私を混乱させるので、どこから始めればよいのかよくわかりません。私は答えを求めてグーグル検索を試みました（これはなんとなく皮肉な感じがします）が、これまでのところ多くの決定的な答えを見つけていません。推測しなければならなかった場合、それは色の波長と関係があるように思えますか？

A100からA700の色についても言及しています...

color google google-material-design

— クレバーバード
ソース

8

Googleだけが、グラフィックデザイナーが理解できないカラーシステムを考案できました。

— サイモンホワイト

21

私はそのことを疑問に思っていました。

まず、「500」は色の数を示すものではなく、それらが使用する奇妙な番号システムです。500はベース、400はベースよりも明るく、600はより暗いです。これは、フォントウェイトの番号付け方法（info）に非常に似ているため、おそらくそれと関係があります。

500未満の数値の一部は、白（Photoshopの「スクリーン」ブレンディングモード）または黒（「乗算」）にフェードすることで検出されることがわかりました。

900：59％（クローズ）
600：10％（ほぼ正確）
500：ベース
400：15％（正確）
300：30％（正確）
200：50％（正確）
100：70％（クローズ）
50：88％（正確）

ここにはパターンが表示されていません。そしておそらくないかもしれません。または、私が見落としている明らかな何かがあるかもしれません。私は配色がかなり苦手です。

— BevansDesign
ソース

1

うーん、私はそれが実際により具体的な何かを表すことを望んでいました。しかし、私はそれがちょうど色を命名するGoogleの方法だと思います。少なくとも答えてくれてありがとう！

— Cleverbird 14

1

この色の番号付けは事実上の業界標準ですか？

— ヨンジェ

2

@Youngjaeいいえ。どういたしまして。

— DA01

11

これはトピックに関する新しい情報であるため、ここに残しておきます。

https://www.youtube.com/watch?t=73&v=xYkz0Ueg0L4

2015年5月28日公開

あなたの色理論に少しさびていますか？材料設計により、色が簡単になります。www.google.com/designで色と素材のデザインの詳細をご覧ください。

ETA： 原色（500）は、デザインのベースとなる「メインカラー」としてGoogleが選択した色です。プライマリ500から始めて、明から暗にスケールします。これらの色は、UIのさまざまな要素に適用されます。

500は、製品の主要なテーマを表します（ツールバーに最適です）そこから、ステータスバーの場合は700まで、2次情報の場合は300まで縮小できます。A色はアクセントカラーです。これらは、プライマリアクションボタン、標準ボタン、スイッチ、およびスライダーを強調表示するのに最適です。

おもしろいのは、このビデオの情報が、上記のパレットページでGoogleが提供する情報と矛盾するか、少なくとも矛盾した説明をしているように見えることです（http://www.google.com/design/spec/style/color .html＃color-color-palette）。

パレットページでは、「Googleは500色をアプリのプライマリカラーとして使用し、他の色をアクセントカラーとして使用することを推奨しています」と述べています。ビデオでは、「Aカラーはアクセントカラーです...」

確かに微妙な違いがありますが、Googleがスタイルガイドを開発する場合は、「アクセント」という言葉の使用と一致する必要があります。

— jqning
ソース

5

おそらくあなたはすでにこのリソースを見つけているかもしれませんが、Googleは開発者とデザイナーが新しいMaterialの雰囲気と同期できるように、非常に便利なガイドをまとめています。

ガイド全体はこちらにあります-http://www.google.com/design/spec/material-design/introduction.html#

具体的には、このページでお気に入りの色をすべてダウンロードできるようにします-http://www.google.com/design/spec/style/color.html#color-color-palette

— krrl
ソース

3

それがまさに「Primary 500 colors」という用語を見つけた場所ですが、私が理解しようとしているのは、この数字が指すものです。

— Cleverbird 14

4

ここにあなたの質問に対する答えがあります。このビデオをご覧ください

500Sは、原色ある製品で支配的なテーマを記述する完璧とツールバーに最適です。

700はステータスバーに使用されます

そして、300Sは、セカンダリの情報のために使用されています

したがって、基本的にこれらの数値は、デザインの特定のセクション/パーツの事前に定義された色合いと原色の色合いを表します。

— プラティックシャー
ソース

0

私の意見では、命名規則はウェブフォントの重みの命名規則に基づいています。

500：ベース
<500：より薄く/より軽い
> 500：より厚い/より暗い

ベースラインとバリエーションを使用して非常に便利で論理的な名前を付ける方法。

参照リンク：InterフォントのGitHubページへのリンク

ここでの例としては、このようなフォントの重みの命名を利用するMozillaの「Inter」フォントのスクリーンショットがありますが、その場合、通常/基本の重みは400になります。別のトピック。

— mrtn
ソース