如何通过HSL颜色着色?
我有一个复杂的问题,但可以通过这个小问题解决。我想制作一个按像素工作的着色器。
我为图片定义了基色(图片中有一些像素具有该颜色,还有许多其他像素接近该颜色):
Hex: #188DD9
HSL: 204° 80% 47%
RGB: 24 141 217
我知道我的目标基色< /strong>:
Hex: #23752E
HSL: 128° 54% 30%
RGB: 35 117 46
所以,我想对图像进行着色。
我的假设是,如果我发现这两个 HSL 值之间的相关性,我可以 逐像素地为我的图片着色。
目前我发现如果我用(目标色调 - 基础色调)= -76 移动基色色调,色调就会很好。
您能指导我解决这个问题的饱和度和亮度之间的联系在哪里吗?
I have an complex problem, but it could be solved via this little problem. I would like to make a colorizer, which works per pixel.
I have a defined base color for the picture (the picture has some pixels with this color and a lot of other pixels, which are near to this color):
Hex: #188DD9
HSL: 204° 80% 47%
RGB: 24 141 217
I know my target base color:
Hex: #23752E
HSL: 128° 54% 30%
RGB: 35 117 46
So, I would like to colorize an image.
My assumption is that if I find the correlation in this two HSL values, I can
colorize my picture pixel by pixel.
Currently I found that if I move the base color hue with (target hue - base hue) = -76, the hue will be fine.
Could you direct me where is the connexion between saturation and lightness to solve this problem?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我认为,无论您最终使用什么映射,您都希望将黑色映射到黑色,将白色映射到白色,将灰色映射到灰色。
加性映射
(带有环绕)您用于色调确实可能没问题。对于饱和度,需要保留灰度值建议使用乘法映射
超过 100% 饱和度的值被剪掉。然而,对于亮度,线性贴图无法做到这一点,因为您想要在调整中间值的同时修复 0% 和 100% 亮度。一个自然的选择可能是 gamma 类型的地图,即
其中亮度值缩放到 0 到 1 之间。(注意:为了针对大量像素有效计算此贴图,您可能需要预先计算一个包含 256 个条目的查找表。)
当然,还有很多其他贴图你可以使用,但我会从这些开始,看看它们是否给出足够好的结果。请注意,最终结果的质量也可能受到 HSL 色彩空间感知不均匀性的限制;有关详细信息,请参阅此维基百科页面。
I assume that, whatever mapping you end up using, you want to map black to black, white to white and grays to grays.
The additive mapping
(with wrap-around) you use for hue is indeed probably fine. For saturation, the need to preserve gray values suggest a multiplicative mapping
with values exceeding 100% saturation clipped. However, for lightness, a linear map just isn't going to do it, since you want to fix both 0% and 100% lightness while adjusting intermediate values. A natural choice might instead be a gamma-type map, i.e.
where the lightness values are scaled to between 0 and 1. (Note: To calculate this map efficiently for lots of pixels, you probably want to precompute a lookup table of, say, 256 entries.)
Of course, there are plenty of other maps you could use, but I'd start with these and see if they give good enough results. Note that, ultimately, the quality of your results may also be limited by the perceptual non-uniformity of the HSL color space; for details, see this Wikipedia page.