web-dev-qa-db-ja.com

マテリアルデザインアプリのカスタムカラーでカスタムパレットを作成する方法は？

カスタムマテリアルデザインを生成するにはどうすればよいですか？palette次のようなものですか？

pallete color

周りにツールなどはありますか？

androidcolorsmaterial-design
47
stalin

誰かがこれをグラフィックデザインに求めたようです： link here 。

受け入れられた答え は 著者サイト につながります。これは私が探していたものです（あなたのためにパレットを生成するツール、GG彼に！）。

また、 最高得票の回答 は、パレットがどのように作成されるかを非常によく説明しています。

どちらも私の好奇心を満たしてくれました。

2016年6月22日更新

this link で利用可能な新しいオプションがあります。

2016年3月8日更新

この答え であり、相対的なアプリも言及に値すると思います。

UPDATE 07/04/17

2年後、Big Gはこのツール https://material.io/ をリリースしました。

42
JJ86

マテリアルデザインカラーパレットを詳細に分析し、いくつかの結論を出しました。

Googleが推奨するカラーパレットにはプログラムロジックはありません。完全に手作りです。スウォッチはデザイナーによって手動で選択されましたが、いくつかのパターンがあります。この魔法について簡単に説明します。

カスタムのプライマリベースカラー（インデックス500）があります。カスタムパレットを生成するには、12％、30％、50％、70％、85％（インデックス50-400）の割合で、基本色と白（#FFFFFF）を基本色の割合で混合します。次に、ベースカラーを、87％、70％、54％、25％に近いベースカラーの割合で「濃い暗色」と混ぜます。マテリアルカラーパレットでは、この「濃い暗い色」は設計者が手動で選択しますが、結果にコントラストの許容差がある限り、ベースカラーをそれ自体に掛けてこの色を計算します。

アクセントのベースカラー（インデックスA200）の場合、ベースカラー（インデックス500）にトライアドカラーハーモニーの色を使用する必要があります。他のアクセントカラーは彩度が高く（0.75 <S <= 1）、明度のバリエーションで個別に選択されます。

このロジックを無料のAndroid application Material Palette Generator ）に実装しました。これにより、実際のアプリケーションUIでカスタムのMaterial Design Color Paletteを作成およびデモンストレーションできます。

Screen shots

35
Constantin

ウェブサイト があり、マテリアルデザインパレットの生成に使用できます。

それを使用するには、まず2つの色を選択します。

Material Palette

次に、推奨パレットを確認してください。

Your Palette

12
MrEngineer13

ここで、すべてのアクセントカラーを含むカラーパレットを生成できることがわかりました（元の回答にはありません）

カラーパレット

4
stalin

そのためのコードサンプルが必要な場合は、次のコードを使用できます。

public int[] GetMaterialColors(String color){
    int[] result = new int[14];

    result[0] = shadeColor(color, 0.9   ); //----> 50
    result[1] = shadeColor(color, 0.7   ); //----> 100
    result[2] = shadeColor(color, 0.5   ); //----> 200
    result[3] = shadeColor(color, 0.333 ); //----> 300
    result[4] = shadeColor(color, 0.166 ); //----> 400
    result[5] = shadeColor(color, 0     ); //----> 500
    result[6] = shadeColor(color, -0.125); //----> 600
    result[7] = shadeColor(color, -0.25 ); //----> 700
    result[8] = shadeColor(color, -0.375); //----> 800
    result[9] = shadeColor(color, -0.5  ); //----> 900

    result[10] = shadeColor(color, 0.7  ); //----> A100
    result[11] = shadeColor(color, 0.5  ); //----> A200
    result[12] = shadeColor(color, 0.166); //----> A400
    result[13] = shadeColor(color, -0.25); //----> A700

    return result;
}

private static int shadeColor(String color, double percent) {
    long f = Long.parseLong(color.substring(1), 16);
    double t = percent < 0 ? 0 : 255;
    double p = percent < 0 ? percent * -1 : percent;
    long R = f >> 16;
    long G = f >> 8 & 0x00FF;
    long B = f & 0x0000FF;
    int red = (int) (Math.round((t - R) * p) + R);
    int green = (int) (Math.round((t - G) * p) + G);
    int blue = (int) (Math.round((t - B) * p) + B);
    return Color.rgb(red, green, blue);
}
2
Mahdi Astanei

Android studioを使用している場合は、指定した色に最も近いマテリアルカラーを見つけることができます。

enter image description here

1
Jayakrishnan PM

実際には、ここでこれを行うための適切なGoogle製ツールがあります： https://material.io/inline-tools/color /

これは、ドキュメントに埋め込まれたiFrameとして使用されています。ここからずっと下にあります。 https://material.io/design/color/the-color-system.html#tools-for-picking-colors

ここやグラフィックデザインに関する他の答えはどれもこれに言及していないようです。

0
Michael Edelstone