从基色开始创建颜色调色板

Question

我需要在网站上实现Theming（在ASP.net MVC中制作）。

这个想法是用户选择一种颜色（基色），我必须从中生成：

• 悬停状态颜色（轻40％）
• 按下状态颜色（轻20％）
• 颜色较深（20％较暗）

我试图进行实施，但我意识到这不能正常工作。

如果用户使用较浅的颜色，则悬停状态几乎不可见。

在互联网上搜索我发现link这似乎是我正在寻找的，但我找不到真实的例子。

是否有任何项目或示例可以实现我想要实现的目标？

Answer 1

您可以使用JavaScript在客户端执行此操作。

建议方法：

1. 使用RGB值选择基色。
2. 将RGB转换为HSL
3. 增加和减少HSL亮度
4. 将HSL转换回RGB
5. 将RGB转换为CSS兼容的十六进制并在主题中使用。

要进行HSL / RGB转换，您可以使用：

http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript

以下是您可以修改以将RGB值转换为十六进制

的示例

How to convert decimal to hex in JavaScript?

这里也是关于颜色的W3Schools页面。可能与您的问题没有直接关系，但可能仍然有用

http://www.w3schools.com/cssref/css_colors.asp

Answer 2

诀窍是不要让用户从整个RGB空间中选择随机颜色。相反，让他们只通过色调选择基色，并设置自己的饱和度和亮度。 Color类本身已经有检索此值的方法，但缺乏从这些值创建颜色的支持。这可以通过this answer实现。

使用这种方法，您只需让用户只选择基色，这样您就可以确保更轻更暗的颜色。在Color Scheme Designer（你可能已经知道）中可以看到令人印象深刻的如何做到这一点。他们也可以在第一步中选择色调。

Answer 3

虽然以下示例正在运行，但您需要了解有关颜色数学的一些知识才能正常工作（如果颜色太亮，太暗，什么是色调和其他颜色）。

我找到了另一种方法，这正是我所需要的。这是link。

它将基色与白色混合，不透明度为50％，使颜色更浅。