标签: hsl

我正在寻找一种工具或算法来将HSL颜色转换为RGB.在我看来,HSL并没有被广泛使用,所以我没有太多运气寻找转换器.

假设一个元素处于100%饱和度,不透明度等等...... 当它悬停时,我怎样才能让它的背景变得更轻？

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

一种方法是改变opacity: 0.4但我只希望改变背景.

我正在将Color类作为c ++中非常基本的图形API的一部分.所以我决定看一下微软的.NET框架,发现他们的Color类有HSB的功能.

然后我开始研究,以确定我是否应该在课堂上提供HSB,HSL或HSV或所有这些.

所以,我有3个关于HSB,HSL,HSV的问题:

1. HSB与HSL相同吗？

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

3. 我发现有很多不同的计算这些值的方法,有人能告诉我最快的吗？

我正在查看描述牙科中用于描述牙齿颜色的标准颜色的文件.他们引用色调,值,色度值,并指出它们来自1905年Munsell的颜色描述:

AH Munsell在1905年开发的颜色符号系统根据三个属性识别颜色:HUE,VALUE(亮度)和CHROMA(饱和度)[ 15 ]

HUE(H):Munsell将色调定义为我们将一种颜色与另一种颜色区分开来的质量.他选择了五种主要颜色:红色,黄色,绿色,蓝色和紫色; 五种中间色:黄红色,绿黄色,蓝绿色,紫蓝色和红紫色.它们被放置在相同点的色环周围,这些点之间的颜色是两者的混合,有利于更接近的点/颜色(见图1).

VALUE(V):此符号表示颜色相对于中性灰度的亮度或暗度,中性灰度从绝对黑色(值符号0)延伸到绝对白色(值符号10).这实际上是颜色的"明亮"程度.

CHROMA(C):这表示给定色调与相同值的中性灰色的发散程度.根据要评估的样品的强度(饱和度),色度的范围从0变为中性灰色到10,12,14或更远.

有各种用于分类颜色的系统,Vita系统最常用于牙科.这使用字母A,B,C和D来表示牙齿的色调(颜色).色度和值均由1到4的值表示.A1比A4轻,但A4比A1更饱和.如果按照值(即亮度)的顺序放置,从最亮到最暗的顺序将是:

A1,B1,B2,A2,A3,D2,C1,B3,D3,D4,A3.5,B4,C2,A4,C3,C4

每种色调的色调,值和色度的确切值如下所示(16)

所以我的问题是,任何人都可以将Munsell HVC转换为RGB,HSB或HSL吗？

Hue    Value (Brightness) Chroma(Saturation)
===    ================== ==================
4.5    7.80               1.7
2.4    7.45               2.6
1.3    7.40               2.9
1.6    7.05               3.2
1.6    6.70               3.1
5.1    7.75               1.6
4.3    7.50               2.2
2.3    7.25               3.2
2.4    7.00               3.2
4.3    7.30               1.6
2.8    6.90               2.3
2.6    6.70               2.3
1.6    6.30               2.9
3.0    7.35               1.8
1.8    7.10               2.3
3.7    7.05               2.4

他们说价值(亮度)不同0..10,这很好.所以我认为7.05意味着70.5%. …

我正在创建一个拾色器工具,对于HSL滑块,我需要能够将RGB转换为HSL.当我搜索SO以进行转换的方法时,我发现这个问题HSL到RGB颜色转换.

虽然它提供了从RGB转换到HSL的功能,但我没有看到计算中实际发生的事情的解释.为了更好地理解它,我在维基百科上阅读了HSL和HSV.

后来,我使用"HSL和HSV"页面中的计算重写了"HSL到RGB颜色转换"的功能.

如果R是最大值,我会坚持计算色调.请参阅"HSL和HSV"页面中的计算:

这是来自荷兰语的另一个维基页面:

这是从"HSL到RGB颜色转换" 的答案:

case r: h = (g - b) / d + (g < b ? 6 : 0); break; // d = max-min = c

我已经用几个RGB值测试了所有三个,它们似乎产生了类似的(如果不是精确的)结果.我想知道的是他们表演同样的事情吗？对于某些特定的RGB值,我会得到不同的结果吗？我应该使用哪一个？

hue = (g - b) / c;                   // dutch wiki
hue = ((g - b) / c) % 6;             // eng wiki
hue = (g - b) / c + (g < b ? 6 : 0); // SO answer …

在.net中使用哪些工具处理HSL颜色？

我原来的问题

我读到要将RGB像素转换为灰度RGB,应该使用

r_new = g_new = b_new = r_old * 0.3 + g_old * 0.59 + b_old * 0.11

我也阅读并理解,它g具有更高的权重,因为人眼对绿色更敏感.实现这一点,我看到结果与在像Gimp这样的图像编辑器中将图像设置为"灰度"时的结果相同.

在我读到这篇文章之前,我想象要将像素转换为灰度,将其转换为HSL或HSV,然后将饱和度设置为零(因此,删除所有颜色).然而,当我这样做时,我得到了一个完全不同的图像输出,即使它也缺少颜色.

如何s = 0准确地从"正确"的方式我读不同,为什么它"不正确"？

基于答案和其他研究的持续发现

似乎使用哪个亮度系数是一些争论的主题.各种组合和灰度算法具有不同的结果.以下是电视标准等领域中使用的一些预设:

• ITU-R BT.601(NTSC？)定义的系数是 0.299r + 0.587g + 0.114b
• ITU-R BT.709(更新版)定义的系数是 0.2126r + 0.7152g + 0.0722b
• 等于三分之一的系数(1/3)(rgb)相当于s = 0

这篇科学文章详细介绍了各种灰度技术及其各种图像的结果,以及对119人的主观调查.

然而,当将图像转换为灰度时,为了实现"最佳"艺术效果,几乎肯定不会使用这些预定义系数,而是调整每个通道的贡献以产生特定图像的最佳输出.

是否可以通过CSS滤镜方法(如HueRotate,饱和度和亮度)进行更改,PNG的颜色是否为全白色？像Photoshop的颜色叠加效果,但在CSS中.

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

今天在挖Ghost代码的时候遇到了一些代码。从 API 中提取数据后，我试图在我的 React 应用程序中创建相同的样式。

我找到了这个：

:root {
    /* Colours */
    --blue: #3eb0ef;
    --green: #a4d037;
    --purple: #ad26b4;
    --yellow: #fecd35;
    --red: #f05230;
    --darkgrey: #15171A;
    --midgrey: #738a94;
    --lightgrey: #141e24;
    --whitegrey: #e5eff5;
    --pink: #fa3a57;
    --brown: #a3821a;
    --darkmode: color(var(--darkgrey) l(+2%));
}

.post-full-content pre {
    overflow-x: auto;
    margin: 1.5em 0 3em;
    padding: 20px;
    max-width: 100%;
    border: color(var(--darkgrey) l(-10%)) 1px solid;
    color: var(--whitegrey);
    font-size: 1.4rem;
    line-height: 1.5em;
    background: color(var(--darkgrey) l(-3%));
    border-radius: 5px;
}

l()CSS中的函数是什么？我在任何地方都找不到。WebStorm 无法识别它，VSCode 也无法识别。它也不适用于我的 CRA 应用程序。我也不认为 Ghost 之后会使用任何 CSS 处理器。那是什么？

我发现 …

我已经看了一下ColorSpace类,并找到了常量TYPE_HLS(可能只是HSL的顺序不同).

我可以使用此常量来创建Color色调,饱和度和亮度吗？如果没有,是否有任何Java类,或者我需要编写自己的类？