我为一个项目制作了这个小的 CSS3/AngularJS 工具来生成 Material Colors 调色板。您可以输入 500 十六进制颜色并使用 ColorZilla 等外部工具从那里获取颜色值。较浅的也正是谷歌使用的，但较暗的稍微偏离了一点。

mcg.mbitson.com

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

如果您的目标是制作 CSS 调色板，您可以使用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

说明 Hex 和 RGB 之间的说明。6 位 HEX #FFEB3B 实际上是 3 个单独的数字，代表 RGB。

#FFEB3B -> FF,EB,3B -> red:FF green:EB blue:3B将 HEX 值转换为十进制会给你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"]

您是否尝试过使用 Adob​​e 的色轮？我认为它比您使用的 SlayerOffice 工具更灵活一些。

https://color.adobe.com/

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

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

谷歌色板拉链