2

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

文字颜色为#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%));

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

非常感谢...内特

4

2 回答 2

1

注意：我在这里的回答讨论了颜色理论和 LESS 函数的一些问题，您可能会发现它们也很有用。

对于 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%阈值的函数将导致“翻转”到饱和值 ( )。@lighterBkg35%hsv(0,35%,60%)

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

于 2013-06-20T22:57:24.250 回答
0

试试这个工具：

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

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

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

于 2017-10-24T12:12:58.220 回答