如何产生与Google的材料设计相似的调色板？

Google的材料设计规范包含以下几种调色板：

从指定为“ 500”的基本原色开始，然后按一系列渐增的明暗，深色和深色步进，以创建约10种颜色。最亮的表示为“ 50”，接近白色，最暗的表示为“ 900”，接近黑色，但是两者都保留了一些基色。

我无法完全确定增量的计算方式。我尝试了此在线色板生成器，但似乎无法拨入范围。

我认为这只是在基础“ 500”颜色上下调整亮度的问题，我猜“ 0”的值将是纯白色，“ 1000”的值将是纯黑色，但是Google的范围是调色板似乎比简单的亮度范围具有更高的饱和度。

有谁知道我可以使用哪种算法或处理程序来获取基本颜色并生成与Google调色板一致的调色板？

我为项目生成了这个CSS3 / AngularJS小工具，以生成“材质颜色”调色板。您可以输入500种十六进制颜色，并使用外部工具（例如ColorZilla）从那里获取颜色值。同样，浅色的正是Google所用的，而深色的稍微有些偏离。

mcg.mbitson.com

谷歌调色板是单色的。保持相同的RGB比率可向上或向下移动亮度和饱和度。为此，您必须将RGB值转换为HSL表示形式（色相，饱和度，亮度），更改亮度和饱和度，然后根据需要转换回去。可以在计算时将其保留在RGB空间中，但是数学太混乱了（我无法理解或解释）。HSL是为传统混色创建的（它让我们更容易考虑）。

如果您的目标是制作CSS调色板，则可以使用将该颜色保留在HSL中background-color: hsl(0,100%, 50%);。

您可以使用颜色选择器在Photoshop中手动执行此操作。HSB用于色相饱和度亮度（与HSL同义）。选择您喜欢的色调，并以一致的值更改“饱和度”和“亮度”。在下面的图像S = 54和B = 77中，使用54 + 54 * 0.05和向上移动5％77 + 77 * 0.05。或下移S - S * 0.05

旁注，以说明十六进制和RGB。6位十六进制＃FFEB3B实际上是3个独立的数字，表示RGB。

#FFEB3B -> FF,EB,3B -> red:FF green:EB blue:3B将十六进制值转换为十进制给您red:255 green:235 blue:59 OR rgb(255,235,59)。

如果您确实希望在Wikipedia上将RGB转换为HSL的算法，则最简单的方法是使用颜色库。这个示例使用please.js制作了一个单色调色板，它还具有其他算法来创建互补或令人愉悦的调色板。很像kuler.adobe，也很摇滚。

Please.make_scheme(
    Please.HEX_to_HSV('#ffeb3b'),
    {scheme_type: 'mono', format:'hex'}
);
// returns ->["#ffeb3b", "#ffe821", "#ffe508", "#e5d54c"]

您是否尝试过使用Adobe的色轮？我认为它比您使用的SlayerOffice工具更加灵活。

https://color.adobe.com/

对于您的确切情况，请选择“阴影”并尝试从那里鬼混。它不会像色板那样产生材质设计，但这是一个开始。

您可以只下载Google在网站上提供链接的调色板吗？既然给你所有的颜色？

Google颜色色板拉链

要从给定的颜色生成颜色渐变/调色板，基本上可以使用以下算法。

1. 确定调色板中所需的最小和最大阴影
2. 将这些颜色之间的“颜色空间”划分为相等的分区（请参见下文）
3. 在这些步骤上输出颜色

为了在它们之间划分颜色空间，首先可以将HEX的颜色转换为RGB。在每个通道中选择值。假设您有color1（r1，g1，b1）和color2（r2，g2，b2）。而你要在3个色颜色1和颜色2，那么你可以这样做以下

all_colors = []
steps = no_of_colors + 1
rdelta, gdelta, bdelta = (r2 - r1) / steps, (g2 - g1) / steps, (b2 - b1) / steps
for step in range(steps - 1):
    r1 += rdelta
        g1 += gdelta
        b1 += bdelta
all_colors.append((r1, g1, b1)) 

记住要在（0到1）之间转换RGB值。

在您的情况下，您可以采用基色并在white to basecolor和之间划分色彩空间basecolor to black。您可以根据需要调整步骤。

最后，我将对我创建的python库进行一些无耻的宣传，因为它与有关调色板生成的问题有关。它称为SecretColors。您可以生成自己的调色板，渐变色，也可以使用标准调色板，例如IBM，Material Design，ColorBrewer或Clarity。