问题标签 [hsl]

我正在制作一个 Color 类作为 C++ 中非常基本的图形 API 的一部分。所以我决定看一下微软的 .NET 框架，并注意到他们的 Color 类具有 HSB 的功能。

然后我开始了一项研究，以确定我是否应该在课堂上提供 HSB、HSL 或 HSV 或所有这些。

所以，我有 3 个关于 HSB、HSL、HSV 的问题：

1. HSB 和 HSL 一样吗？

2. 如果没有，为什么没有 HSBL 甚至 HSBLV？

3. 我找到了许多不同的计算这些值的方法，有人可以告诉我最快的方法吗？

我正在将 CSS 添加到基于 Bootstrap 的 Web 应用程序中，以匹配来自设计师的 PDF。有一个按钮图像，其背景颜色 Seashore 报告为rgb(0,186,158)aka hsl(171,100,36%)。所以我设置按钮的背景颜色以匹配图像：

只是……没有。

从亮度中减去 3% 可以修复它：

我很想知道为什么。我在应用的所有其他 CSS 样式中看不到任何明显的原因。这在 OS X Snow Leopard 上的 Chrome 和 Firefox 中都会发生。

我看到某些字体有类似的东西（将 Web 呈现的输出与提供的 PDF 进行比较），但原因可能不同。

编辑

这是原始图像。希望 SO 不会处理它。

编辑2

为什么使用 PNG？这就是设计师提供图像的方式。我不知道有一个与色彩空间信息的权衡。另外，我会认为 PNG 更适合需要平坦背景和清晰边缘的字形（与 JPEG 相比），不是吗？

当我在 Adob​​e Illustrator 中设计东西时，我喜欢选择一种颜色，然后玩弄它的亮度或饱和度，让自己成为“同族”的相似颜色。

在CSS中，你可以用这样的值来定义颜色：RGB、RGBA、HSL……既然你可以同时定义所有三个参数，我一直在想：有没有办法改变单个参数那些？

例如，假设我将三个链接定义为具有非常“漂亮”的颜色#FF0000、#00FF00 和#0000FF。是否有可能创建一个单一的 CSS 规则，上面写着“在所有链接悬停时，无论它们的颜色如何，将它们的亮度/亮度降低 10%”？

我也很想对 RGBA 颜色的 alpha 参数做同样的事情。我知道不加选择地影响所有颜色的唯一通用方法是 opacity 属性，但如果我只想影响背景，这就会变成一个问题。

这样的事情（仅影响 H、S 或 L）听起来很简单：如果您可以重新定义整个颜色，您不能再次采用相同的颜色并更改其中一个值吗？但问题是：有人想过真正做到这一点吗？

假设一个元素处于 100% 的饱和度、不透明度等状态......当它悬停时，我怎样才能让它的背景变得稍微亮一些？

用例是我允许用户将鼠标悬停在页面上的任何元素上。我不想四处确定每种颜色的不透明度为 80%。

一种方法是更改​​，opacity: 0.4但我只想更改背景。

我有一个用 d3 构建的标准 50 状态地图，其中我根据各种数据集动态着色状态。无论数据集是什么，这些值都在 0 到 1 的范围内进行归一化，其中 1 对应于具有最高值的状态。我正在寻找一种使用标准化数据点的值来计算状态阴影的方法。

过去，我选择了一种我喜欢的基色——比如#900——并将fill每个状态的 设置为该颜色，并将opacity设置为标准化值。除了两个问题之外，这可以正常工作：

• 当画布有背景颜色时，需要在每个阴影状态下绘制一个空白状态；和
• 以这种方式淡出颜色可能看起来很糊

但我真的很喜欢能够动态设置颜色，而不是处理数据的 bin 和渐变的 RGB 值的预设数组。所以我想知道是否有更好的方法。如果备用颜色系统效果更好，我可以处理转换。

d3 有一个内置的 HSL 转换器，所以我尝试了这个：

它工作得很好——这是一张捕鱼工作地图，在缅因州和俄勒冈州最普遍——但我怀疑有更好的方法。想法？

由于 HSL val 可能会在彩虹中循环，并且众所周知的色调阵列 (ROYGBIV) 中有 7 种主要颜色，因此每种颜色之间的距离（从 0 到 360）应该是 51 或 52。那么为什么这里的颜色不符合人们的期望？

HTML

CSS

见http://jsfiddle.net/NvTvr/

也许标准颜色彼此等距的假设是错误的；如果是这样（而且似乎是这样），那么真正的蓝色（以及其他人）接受的色调值是多少？

肉眼说30左右适合橙色，60左右适合黄色；其余的似乎还可以。

更新

这些值 (0,25,50,100,200,250,300) 更像是我听到这些颜色名称时的想法：

http://jsfiddle.net/NvTvr/2/

更新 2

我再次摆弄，这次使用约翰的 vals：http: //jsfiddle.net/NvTvr/7/

我很难在我的代码中使用 hsl 颜色值...我的目标是根据坐标索引在数据集中出现的频率来更改图像中像素的不透明度。我正在从 csv 文件中提取数据，我得到的唯一错误是我使用了无效的 hsl 语法。这是我的代码的一部分：

在 PIL 的网站上，我假设亮度和饱和度都必须是百分比。row[1] 的最大值是 999，因此不透明度永远不会 >1。预先感谢您的帮助！

我想知道是否可以生成用于颜色选择器的饱和度+亮度蒙版（例如http://johndyer.name/lab/colorpicker/refresh_web/colorpicker/images/map-hue.png ) 但在 css3 中仅使用线性梯度？我尝试了一些东西，例如：

但是我不能做出像图片一样的东西，找不到合适的组合，而且因为我不完全理解，我不知道是否可以。

谢谢

我一直在阅读有关如何在 JS/JQuery 中生成随机颜色的问题。但我只想生成较暗的颜色，避免使用黑色、黄色和灰色范围的颜色，以便能够在谷歌地图中绘制不同颜色的区域。

谢谢

是否可以使用 HueRotate、Saturation 和 Brightness 等 CSS 过滤器方法来更改绘制成全白的 PNG 的颜色？类似于 Photoshop 的颜色叠加效果，但在 CSS 中。

这将是一个很好的解决方案，可以避免创建大量只改变颜色的图像。例如，一组具有深色和浅色版本的 UI 图标。