给定两种颜色，都在 HSV(B) 中，我如何使用 LESS CSS 将一种颜色转换为另一种颜色？答案

【问题标题】：Given two colors, both in HSV(B), how can I convert one to another using LESS CSS?给定两种颜色，都在 HSV(B) 中，我如何使用 LESS CSS 将一种颜色转换为另一种颜色？
【发布时间】：2013-06-20 20:43:02
【问题描述】：

我正在设计一些彩色块，其中文本是一种颜色，背景是相同颜色的较浅/不饱和阴影（想想警告文本，其中的文字是红色的，背景是浅粉色的）。

文字颜色为#990000。背景颜色是#f2dede。在 Photoshop HSV 中，这相当于 hsv(0, 100%, 60%) 和 hsv(0, 8%, 95%)。

有了这个颜色集，我希望能够折腾其他颜色——漂亮的绿色或黄色——并自动计算背景。

使用 LESSCSS，我试过了：

@color: desaturate( lighten( hsv(0, 100%, 60%), 35%), 92% );

但我无法通过在 Photoshop 中执行相同的更改来渲染我生成的颜色。

这个颜色理论超出了我的理解，但我的问题是：给定 Photoshop HSB 值，我如何将一种颜色转换为另一种颜色？

更新：

我觉得它好一点——HSB 和 HSL 中的 L 和 B 根本不兼容，所以淡化“B”增量的颜色永远不会起作用。

这很草率，但这样的工作：

@foreground: #990000;
@background: hsv(hsvhue(@foreground), 
    (hsvsaturation(@foreground)-92%), 
    (hsvvalue(@foreground)+35%));

缺少类似于变亮/变暗的“值”命令，我认为这是我能得到的最好的。（如果我没有收到任何其他回复，我会将此标记为答案）。

非常感谢...内特

【问题讨论】：

html 中没有hsv 色彩空间，它要么是rgb，要么是hsl。那么，当您已经拥有十六进制的rgb #990000->rgb(153,0,0) 时，为什么不直接使用rgb。
HTML 中没有 HSV 颜色空间，但 LESS 中有，Photoshop 中有。我正在使用 HSV，因为 LESS 具有色相、饱和度和亮度命令。不过，我很乐意为 RGB 提出同样的问题。如果我有两种 RGB 颜色，并且我想使用 LESS CSS 的饱和度、亮度和色调命令进行计算，我该如何计算出这些数字？目标是开发“算法”，这样我就可以向它添加任何颜色，并动态生成漂亮的匹配背景颜色。
您也可以对 rgb 颜色使用 less 颜色修饰符。你不需要先转换它。对于算法，您可以在 google 上点击：rapidtables.com/convert/color/rgb-to-hsl.htm ...
嗯。我不是很清楚。如果我有两种颜色，除了反复试验之外，我如何弄清楚如何使用 LESSCSS 命令（旋转等）从一种颜色转换为另一种颜色？我有#990000，它在#f2dede 之上看起来不错。我想弄清楚导致这种情况发生的 LESS 命令集，以便我可以任意更改 #990000 并使背景仍然具有适当的对比度等。

标签： colors less

【解决方案1】：

注意：my answer here discusses some issues with color theory and LESS functions 您可能会发现它也很有用。

对于 LESS 1.4（具有一些新的内置函数）

少

@color: hsv(0, 100%, 60%);
@bkg: hsv(hsvhue(@color), (hsvsaturation(@color) - 92%), (hsvvalue(@color) + 34.75%));

.test {
  color: @color;
  background-color: @bkg;
}

CSS 输出

.test {
  color: #990000;
  background-color: #f2dede;
}

我在上面发布的链接可以解释为什么我的值是 34.75% 而不是 35% 更像你的数字预期的那样。

更新：我刚刚注意到您在问题中基本上发布了类似的答案。我不确定您在使用该计算方法时仍面临什么问题。

更新 2：如果您希望它通常总是“对比”，那么这样的方法可能会更好：

@color: hsv(0, 100%, 60%);
@darkerBkg: hsv(hsvhue(@color), (hsvsaturation(@color) - 92%), (hsvvalue(@color) + 34.75%));
@lighterBkg: hsv(hsvhue(@color), (hsvsaturation(@color) + 92%), (hsvvalue(@color) - 34.75%));
@bkg: contrast(@color, @darkerBkg, @lighterBkg, 43%);

.test {
  color: @color;
  background-color: @bkg;
}

将contrast 函数与默认43% 阈值一起使用将导致@lighterBkg 在这种情况下以35% 饱和值(hsv(0,35%,60%))“翻转”。

您设置的计算数字最适用于初始饱和度范围92-100（或contrast 功能也0-8）和初始值范围0-65（或contrast 您可能会被覆盖在任何值范围内）。在contrast 版本中，9-91 之间的任何饱和度都将开始“均衡”到0% 或100%。如果这是一个问题，您将需要决定一个新的“计算”并添加一些其他数学逻辑，但我认为 contrast 版本可能不是问题。

【讨论】：

如果你有颜色怎么办hsv(0,90%,66%) -> hsv(0,-2%,100.75%) ?
hsv 函数的上限和下限都有限制，所以hsv(0,-2%,100.75%) 最终等于hsv(0, 0, 100%) = #ffffff（你不能得到更多的“更轻/去饱和”作为 OP比white)。解决方案是期望输入的某个值范围内的“较暗”颜色与进行类似的数值调整兼容，以便按照 OP 的要求“自动计算”。显然，如果 计算应该改变（它不能从一种任意颜色变为 16,777,216 种可能颜色中的任何其他颜色），程序就无法读懂用户的想法。
@Christoph：我使用contrast 函数添加了一个更强大的版本，这可能有助于保持事情更加平衡，同时允许有效输入的更大灵活性。归根结底，程序员可能无法完全依靠一个神奇的公式来总是在不手动选择和输入所需的两个固定值的情况下准确地获得最终用户人眼可能会喜欢的东西。
这太好了，谢谢。我知道我们需要“光学调整”以获得最令人愉悦的外观，我只是想接近一些东西。顶级的“深色”颜色都共享相同的 SL，并且大多只是在色相轮上旋转。非常感谢您的帮助！

【解决方案2】：

试试这个工具：

Cuttle - 基于示例的颜色函数建议
https://www.ofcodeandcolor.com/cuttle/

它采用两种不同的输入颜色，并使用 Less 或 Sass 颜色函数计算（或近似）从一种颜色到另一种颜色的不同方式。由@alex-gyoshev创建。

您必须先将 hsv 值转换为 rgb，同时考虑 ScottS 关于不同色彩空间的提示。

【讨论】：