【问题标题】:Create Colors Palette starting from a base color从基色开始创建调色板
【发布时间】:2012-10-05 14:06:34
【问题描述】:

我需要在网站上实现主题(用 ASP.net MVC 制作)。

这个想法是用户选择一种颜色(基色),我必须从中生成:

  • 悬停状态颜色(浅 40%)
  • 压制状态颜色(浅 20%)
  • 较深的颜色(深 20%)

我尝试进行实施,但我意识到这无法正常工作。

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

在互联网上搜索我找到了这个link,这似乎是我正在寻找的东西,但我找不到一个真实的例子。

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

【问题讨论】:

    标签: c# asp.net color-scheme


    【解决方案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

    【讨论】:

      【解决方案2】:

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

      使用这种方法,您只需让用户只选择基色,从而确保可以使用更亮和更暗的颜色。在Color Scheme Designer(您可能已经知道)中可以看到如何做到这一点的令人印象深刻的方法。他们也只能在第一步中选择色调。

      【讨论】:

        【解决方案3】:

        虽然下面的示例可以正常工作,但您需要对颜色的数学有一些了解才能使其正常工作(如果颜色太亮、太暗、什么是色相等等)。

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

        它将底色与不透明度为 50% 的白色混合,使颜色更亮。

        【讨论】:

          猜你喜欢
          • 2020-06-14
          • 2013-07-02
          • 1970-01-01
          • 2012-01-08
          • 2011-11-06
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多