如何使用Material Design App为自定义颜色创建自定义调色板？

Question

如何生成自定义材质设计调色板，如下所示？

是否有工具或其他东西？

Answer 1

似乎有人问平面设计：link here。

accepted answer将引导您the author site这就是我想要的（为您生成调色板的工具，GG给他！）。

此外，answer with the highest vote很好地解释了调色板是如何制作的，恕我直言。

他们都满足了我的好奇心。

更新22/06/2016

this link现在有一个新选项。

更新03/08/2016

我认为this answer和相对app也值得一提。

更新07/04/17

两年后，Big G发布了这个工具：https://material.io/。

Answer 2

我仔细分析了材料设计调色板并得出了一些结论。

Google推荐的调色板中没有程序逻辑，它绝对是手工制作的。设计师手动挑选样本，但它们有一些模式。我将简要介绍一下这种魔力。

我们有自定义主基色（索引500）。要生成自定义调色板，请将基色与白色（#FFFFFF）混合基色速率：12％，30％，50％，70％，85％（索引50-400）。接下来将基色与一些“深色”混合，基色的比率接近：87％，70％，54％，25％。在材质调色板中，这种“深色”由设计师手动选择，但只要结果具有可接受的对比度差异，我就会通过将基色乘以自身来计算这种颜色。

对于重音基色（索引A200），您应该使用三重色调颜色和基色（索引500）。其他强调色具有高饱和度（0.75

我在免费的Android应用程序Material Palette Generator中实现了这个逻辑，它可以在真实的应用程序UI上创建和演示自定义的Material Design调色板。

Answer 3

您可以使用a website来生成材质设计调色板。

首先使用它选择两种颜色：

然后查看你建议的调色板：

Answer 4

我发现在这里你可以生成一个具有所有强调色的彩色托盘（在原始答案中遗漏）

Color Pallete

Answer 5

如果您使用的是android studio，那么您可以找到最接近您指定颜色的材质颜色。

Answer 6

如果您需要代码示例，可以使用以下代码：

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);
}

Answer 7

您应该查看Google提供的Palette API。它包含在support library中。 从我对你的问题的理解，这个库完全符合你的要求。

Answer 8

实际上有一个正确的 Google制造的工具可以在此处进行操作：https://material.io/inline-tools/color/

它用作埋在其文档中的iFrame，位于此处：https://material.io/design/color/the-color-system.html#tools-for-picking-colors

这里或关于平面设计的其他答案似乎都没有提到。