博亚体育 彩色RGB模型和HSL模型(受欢迎)

日期:2021-04-01 15:15:46 浏览量: 86

今天,我发现了一篇关于RGB和HSL颜色模型的易于理解的文章。我了解了RGB与HSL之间的关系凤凰彩票app ,以及为什么HSL更人性化。我不敢一个人享受它。原始链接:

对于视觉设计师而言,RGB,CMYK等与左右手一样熟悉。但是,如果仅使用心算,而没有Photoshop拾色器或任何类似工具的帮助,您能否快速分辨出与“海棠红”相对应的RGB颜色值?如果再添加一点橙色以增加亮度,那么颜色值是什么?

这很难回答,不是吗...面对这些作弊的问题,视觉设计师/前端工程师通常只能打开Photoshop,输入与当前颜色相对应的颜色值,然后调用新的颜色。调色板,然后复制颜色值并替换当前颜色。

生命很短暂。您愿意这样浪费很多时间吗?

因此rgb模型凤凰彩票平台 ,让我们探讨是否有更好的解决方案。

让人爱与恨的RGB

RGB是基于颜色和光混合原理设计的。它是面向硬件的颜色模型。它描述了显示器电子枪在红色,绿色和蓝色发光极点上的显色方法。当红色,绿色和蓝色的光的亮度达到最大值(25 5)时,屏幕上再现的颜色是最亮的白色rgb模型,当所有颜色都为0时,结果为黑色。

如果要获得刚才提到的“秋海棠红”,我们必须将红光调整为最亮,将绿光调整为大约1/5,将蓝光调整为左右1/3,如图所示下方:

17.png

类似地,要使颜色变为“现在加入一点橙色,再稍微亮一点”,我们需要使绿色的光增加一倍以上,然后使蓝色的光稍微变暗,如下所示:

尽管我们获得了所需的颜色,但是我们所做的与“橙色”或“增加亮度”无关。这种调色方法与我们对颜色的直觉完全不符。可以容忍这种事情吗?停止假装自己是视觉设计师,舞台灯光工程师才是您的真实身份!

什么是HSL颜色模型?

HSL还使用3个成分来描述颜色。与RGB使用的三种颜色不同,HSL颜色以H(色相),S(饱和度)饱和度和L(亮度)亮度表示。听起来复杂吗?稍后您将了解与“反人类” RGB模型相比,HSL的友好程度。

HSL的H(色相)成分代表人眼可以感知的颜色范围。这些颜色分布在扁平的色相环上,取值范围为0°至360°中心角,每个角度可代表一种颜色。色相值的含义是,我们可以通过旋转色相环来更改颜色,而无需更改光感。在实际应用中,我们需要记住色相圈上的六种主要颜色作为基本参考:360°/ 0°红色,60°黄色,120°绿色,180°青色,240°蓝色,300°洋红色,它们是如下图所示,以60°中心角的间隔排列在色相圆上。

31.png

HSL的S(饱和度)分量是指颜色的饱和度。它使用从0%到100%的值来描述在相同色调和亮度下颜色纯度的变化。值越大,颜色越少,颜色越亮,表明从理性(灰度)到感知(纯色)的变化,如下所示:

41.png

HSL的L(亮度)组件是指颜色的亮度,其功能是控制颜色的变化。它还使用0%到100%的值范围。值越小,颜色越深,越接近黑色。值越大,颜色越亮,并且越接近白色。

51.png

HSL能带给我们什么?

让我们基于HSL进行颜色分级实践。想想一开始提到的“秋海棠红”,它应该是洋红色和红色之间的一种性感迷人的颜色。我们可以假设其与色相圆H的夹角约为330°,饱和度高,亮度适中。那是什么颜色?

62.png

我们想要的颜色应该接近红色。让我们将色相H旋转至350°,现在更好了。

71.png

通过更改色相值H,我们实现了从品红色到秋海棠红色的色相转换。感觉很近,但仍然有点阴沉,还没性感...

现在,我们可以通过增加饱和度S来使这种颜色更鲜艳。

81.png

将饱和度提高20%后,颜色看起来更亮。

还是错的。秋海棠红是女孩的肤色,应该更加柔和透明,而不是那么温暖。我们需要通过增加亮度L来找到那种微妙的感觉。

101.png

将颜色稍微增亮10%,我们终于得到了我们想要的颜色:

111.png

类似地,面对“添加一些橙色并使其稍微增亮”的粗鲁要求,我们仅可以通过心理计算就可以大致确定色相圈的相位和亮度值。在这里,我们需要将H增加25°,将L增加5%:

121.png

就是这样!现在,让我们重新审视整个色彩校正过程。

131.png

在使用HSL进行着色的过程中,我们不需要打开颜色选择器,也不需要了解复杂的颜色和光混合原理。这是一个自然,可感知且易于理解的过程。

相反,RGB颜色分级非常笨拙且难以理解。

我们对颜色的理解通常是这样的:“这是什么颜色?深度是多少?明暗是什么?”这种理解是基于人类的感觉电竞下注app ,而不是基于反射光的物理特性。与RGB颜色模型相比亚博体彩 ,HSL颜色模型对颜色表达方式非常友好,非常符合人类对颜色的感知。

HSL颜色模型诞生于上个世纪,已被广泛应用于许多领域。但是,不同的颜色模型具有不同的适用方案。就GUI设计而言,HSL颜色模型的合理应用可以使颜色处理工作更加人性化,有助于建立和谐的人机交互关系,并增强产品体验。当您像我一样在RGB外星空间中挣扎时鸭脖娱乐官网 ,您可能希望改变自己的思维方式。也许HSL是解决问题的关键。

附件:HSL颜色模型在工业中的应用

Internet:CSS3开始为HSL提供支持。借助人性化的HSL模型,Web设计人员可以更直观地定义所需的颜色,并可以轻松控制Web页面中的颜色变化。

141.png

电子办公室:Microsoft Office的颜色选择器支持HSL颜色模型,用户可以简单地部署协调的颜色并将其直接应用于电子文档。

151.png

数字暗室:Adobe Photoshop Lightroom软件中的HSL调色板使数字摄影师的色彩游戏更加生动直观。

161.png

软件外观:在软件图形界面的设计中应用HSL颜色并设置简单的转换规则可以实现友好且易于使用的外观功能。

171.png

视频监视/运动捕捉:HSL颜色模型的亮度L分量与颜色信息无关,并且易于识别和分析。 H和S成分类似于人类视觉感知的原理,因此非常适合于图像理解,模式识别等以及与视觉感知相关的图像应用。

18.png

医学成像:借助HSL颜色模型的优势,医学成像专家可以更好地恢复医学成像信息,或者对生物样品进行准确直观的色谱分析。

19.png