在使用HSL调色的过程中， 我们并不需要打开拾色器，也不需要了解复杂的色光混合原理，这是一个自然的、感性的、易于理解的过程。比一比的话，RGB调色方式显得fei常笨拙、无法理解。我们对色彩的认识往往是这样的：“这是什么颜色？深浅如何？明暗如何？”这种认识是基于人类的主体感官而形成的，并不是基于反射光的物理性质。与RGB色彩模型相比，HSL色彩模型对色彩的表述方式fei常友好，fei常符合人类对色彩的感知习惯，等着瞧。。

什么是HSL色彩模型？

不是我唱反调... HSL色彩模型诞生于上个世纪，Yi经在hen多领域被广泛应用。但不同的色彩模型有着不同的适用场景， 就GUI设计领域对HSL色彩模型的合理应用Neng让色彩处理的工作geng加人性化，有助于建立和谐的人机交互关系，提升产品体验。当你像我一样在RGB的异度空间中苦苦挣扎的时候，不妨换一种思维方式。也许HSL就是为你解决问题的关键。

HSL色彩模型的应用

互联网：CSS3开始对HSL提供支持， 借助人性化的HSL模型，Web设计师可yigeng直观的定义所需的色彩，并Neng轻松的控制网页中的色彩变化。

增加了20%的饱和度之后颜色kan起来亮丽了许多。

HSL色彩模型的三个分量

HSL的L分量， 指的是色彩的明度，作用是控制色彩的明暗变化。它同样使用了0%至100%的取值范围。 太水了。 数值越小，色彩越暗，越接近于黑色；数值越大，色彩越亮，越接近于白色。

HSLNeng为我们带来什么？我们来Zuo一个基于HSL的调色实践。想想提到的“海棠红”，那应该是一个介于洋红和红色之间的， 我明白了。 性感娇艳的颜色。我们可yi假定它在色相环H上的角度是330°左右，饱和度较高，明度适中，kankan那是什么颜色？

HSL的S分量

HSL的S分量， 指的是色彩的饱和度，它用0%至100%的值描述了相同色相、明度下色彩纯度的变化。数值越大，颜色中的灰色越少，颜色越鲜艳，呈现一种从理性到感性的变化，害...。

tong过改变色相值H，我们实现了色相从洋红向海棠红的偏移。大感觉接近了 但还是略微有点灰暗，还谈不上性感……现在我们可yitong过增加饱和度S，让这个颜色变得geng鲜活。

操作一波。 用场景， 就GUI设计领域对HSL色彩模型的合理应用Neng让色彩处理的工作geng加人性化，有助于建立和谐的人机交互关系，提升产品体验。

数码暗房：Adobe Photoshop Lightroom软件中的HSL调色器， 试着... 使数码摄影师的色彩游戏变得geng为生动直观。

医学影像：借助HSL色彩模型的优势， 医学影像学专家可yi用geng好的方式还原医学影像信息，或对生物体样本进行精确直观的色谱分析。

RGB色彩模型与HSL色彩模型的对比

造起来。 RGB是基于色光混合的原理设计的， 是一种以硬件为导向的色彩模型，它描述了显示器的电子枪打在Red红、Green绿、Blue蓝三色发光极上的显色方式。当红绿蓝三色光的亮度均为大值的时候，屏幕上重现的颜色就是Zui亮的白色，dou为0的时候，后来啊就是黑色。

如guo想要得出刚才提到的“海棠红”， 我们就要把红光调到Zui亮， 看好你哦！ 把绿光的亮度调到1/5左右，再把蓝光的亮度调到1/3左右，如下图：

虽然得到了需要的色彩，但我们所Zuo的事情与“橙色”或“增加亮度”实在扯不上关系。这种调色方法，wan全不符合我们对颜色的直观感受。 什么鬼？ 连这种事dou可yi忍受吗？不要再假装视觉设计师了舞台灯光师才是你的真实身份！HSL色彩模型又是什么？

优化一下。 HSL同样使用了3个分量来描述色彩， 与RGB使用的三色光不同，HSL色彩的表述方式是：H色相，S饱和度，以及L亮度。听起来一样复杂？稍后你就会发现，与“反人类”的RGB模型相比，HSL是多么的友好。

hen难回答， 是吧……面对这些坑爹的问题，视觉设计师/前端工程师们通常只Neng打开Photoshop，输入当前颜色对应的色值，在色板上调出新的颜色，再把色值复制下来替换当前的色彩，杀疯了！。

人生hen短暂，这样白白浪费掉大块的时间，你甘心吗？那么让我们来探索一下有没有geng好的解决方案。让人又爱又恨的RGB