Question

我正在设计一些彩色积木，其中文字是一种颜色，背景是相同颜色的浅色/不饱和色调（想想警告文字，其中的单词是红色，背景是淡粉色）。 / p>

文字颜色为＃990000。背景颜色为＃f2dede。在Photoshop HSV中，这相当于hsv（0,100％，60％）＆amp; 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%));

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

非常感谢... Nate

Answer 1

注意：my answer here discusses some issues with color theory and LESS functions您可能会觉得有用。

对于LESS 1.4（具有一些新的内置功能）

<强> LESS

@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饱和度值{{1 }}）。

您设置的计算数字最适合初始饱和度范围为43%（或@lighterBkg功能35%）的颜色，且初始值范围为hsv(0,35%,60%)（或92-100您可能会涵盖任何值范围）。在contrast版本中，0-8之间的任何饱和度都将开始“均衡”为0-65或contrast。如果这是一个问题，你需要决定一个新的“计算”并添加一些其他数学逻辑，但我认为使用contrast版本可能不是问题。

Answer 2

尝试使用此工具：

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

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

你必须首先将你的hsv值转换为rgb，同时考虑到ScottS关于不同颜色空间的tipps。

鉴于HSV（B）中的两种颜色，如何使用LESS CSS将一种颜色转换为另一种颜色？

2 个答案:

对于LESS 1.4（具有一些新的内置功能）