如何使用Material Design App的自定义颜色创build自定义调色板?

我怎么能生成一个像下面这样的自定义材料devise调色板

调色板颜色

有什么工具吗?

似乎有人问这个问题进入Graphic Design: 链接这里 。

被接受的答案会引导你到作者的网站 ,这就是我正在寻找的( 为你生成你的调色板的工具 ,GG给他!)。

此外, 最高票数的答案很好地解释了如何调色板,恕我直言。

他们都满意我的好奇心。

更新22/06/2016

现在在这个链接上有一个新的选项。

更新03/08/2016

我认为这个答案和相关的应用程序也值得一提。

更新07/04/17

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

我仔细分析了“材质devise调色板”并做出了一些结论。

Google推荐的调色板中没有程序逻辑,这绝对是手工制作的。 色板是由devise师手工挑选的,但是它们有一些图案。 我将简要介绍一下这个魔法。

我们有一个自定义的主基色(索引500)。 要生成自定义调色板,请将基本颜色与白色(#FFFFFF)以12%,30%,50%,70%,85%(指数50-400)的比率混合。 接下来,以基本颜色接近87%,70%,54%,25%的比率混合基本颜色和一些“深色深色”。 在“材质调色板”中,devise师手动select“深色”,但只要结果具有可接受的对比度差异,我就可以通过将基色与自身相乘来计算该颜色。

对于重音基色(索引A200),您应该使用与基色(索引500)三色和谐的颜色。 其他重点颜色具有较高的饱和度(0.75 <S <= 1),并在亮度变化中单独选取。

我在免费的Android应用程序“ 材料选项板生成器”中实现了这一逻辑,该应用程序可以在实际的应用程序用户界面上创build并演示一个自定义的材质devise调色板

屏幕截图

有一个网站可以用来生成材料devise调色板。

要使用它首先select两种颜色:

材料选项板

然后检查你的build议调色板:

你的调色板

我发现在这里你可以生成一个所有的重音颜色的颜色(在原来的答案错过了)

颜色的Pallete

您应该检查由Google提供的Palette API 。 它包含在支持库中 。 从我的理解你的问题,这个图书馆正是你正在寻找。

如果你想要一个代码示例,你可以使用这个代码:

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

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

在这里输入图像说明

Mikel Bitson创build了一个完整的从hex值生成完整调色板的工具。 只需点击他的名字链接到该工具。

以下是将调色板应用于用户界面的工具 。

材质的UI颜色工具