HSL

虽然RGB颜色空间是我们人眼可以看到的频谱的子集，但SRGB空间并不能让我们选择更多的自然色。当我们查看自然界中出现的颜色时，我们不仅谈论特定的颜色，例如这是红色，而且是它的阴影。区分这些阴影的主要因素是轻度和饱和因子。

可以控制轻度和饱和度，使我们可以扩大范围，并选择一种更具体的颜色作为设计师。乔治·瓦伦西（Georges Valensi）在1938年发明了这个颜色空间时确定了这一点。今天，它被广泛用于数字介质，使我们对颜色有了更多的控制。

要了解HSL在数字介质中的工作方式，让我们考虑一个圆，如下所示。

这被称为色相饱和圆，它将有助于我们选择色调，饱和度和轻度。圆通过以下方式分开：

圆圈在三个方向上工作，每个方向都可以选择色相，饱和度和轻度。色调是我们要在此圆上选择的颜色。

您看到的较小圆圈是当前选择。这个小圆圈只能在选择色调时沿圆方向移动。在这种情况下，距边界和中心的距离将保持不变。是否在这里获得完美的颜色并不重要，但是应该足够近以在圆圈中发生。

完成后，我们选择使用色调选择的颜色的饱和度。请记住，通过在穿过中心的直线中移动较小的圆来选择饱和度。这意味着在选择饱和度时，您可以将圆向中心移动或远离饱和，但不能朝圆形方向移动。

在这里，我将圆圈移到了靠近中心的位置。如果我画一条直线穿过中心和较小的圆，它将通过色调选择。饱和值远离中心，同时降低了饱和值。因此，如果所选颜色的饱和度移至中心，则变为灰色，即无饱和。

最后，我们需要选择我们选择的颜色的轻度分量（固定色调和饱和度）。考虑大量的这些圆圈彼此堆叠，每个圆都有不同的轻度。

source

如所见，最底部的圆将是最黑暗的，而最高的圆将是最轻的。如果您认为最高的亮度值将使颜色变白，最低的颜色将使它变黑，那么您正在正确思考。由于轻度主导着RGB颜色的成瘾性的组合，因此会影响最终的颜色输出。

使用这三个组件，您已经猜到了，我们将获得更多的控制和更广泛的颜色。在这里，我们可以使用浅色和饱和度选择完美的颜色阴影，RGB中缺少。

HSL CSS颜色功能的语法

使用HSL的语法与RGB相似，只是该值的饱和度和轻度为百分比。语法看起来如下：

background-color: hsl(<hue in degrees>, <saturation in percentage>, <lightness in percentage>)

示例：

background-color: hsl(240, 100%, 40%);

请注意，与RGBA类似，您也可以使用HSLA，其中A具有类似的Alpha和类似值的含义。

将HSL转换为RGB

如果您想知道是否可以将HSL值转换为RGB值（反之亦然）并在您的代码中实现它们，那么是的，许多开发人员都这样做以覆盖一系列设备。<<<<<<<<<<<<<<<<< /p>

但是，它背后有一些复杂的数学，这是本文的范围。我偶然发现了一个描述性的帖子和简化的数学公式，以在Waldman Media上实现同样的成就。我希望如果您想提前学习，这会为您提供帮助。

另外，您可能会找到一些可以在几秒钟内完成此任务的网站。它们是节省时间的推荐方法。 HSLPICKER是我个人在项目中使用的网站之一。如果您有自己的喜好，请在评论部分中告诉我们，我们将检查一下。

HSL CSS颜色功能的局限性

使用HSL确实为我们提供了比RGB更广泛的范围工作的想法，但是背后的基本工作可能会误导。在HSL中，我们在选择的任何色调或饱和度中使用恒定轻度（作为气缸）。这不是大自然提供颜色的方式，也不是人类感知的。如果我们再次查看SRGB图，我们会注意到，轻度不会不断散布在空间中的各种颜色上。有些提供了更多的轻度值，而有些则是

色调，饱和度和浅色的完美混合不会带给桌子上感知的颜色。因此，例如，用户选择的饱和黄色和饱和蓝色可能具有相同的光度值。但是，当我们感知天然存在的颜色（饱和蓝色和饱和黄色）时，事实并非如此。它们的轻度实际上有所不同，这可能会使我们质疑HSL的使用。

综合 end-to-end Testing 教程，涵盖了E2E测试的内容，其重要性，好处以及如何使用实时示例进行操作。

浏览器支持HSL CSS颜色功能

HSL在所有流行的浏览器中都支持Chrome，Firefox，Edge等。

Source

HSV或HSB

类似的颜色空间是HSV（色相，饱和和值），也称为HSB（色调，饱和度和亮度）。前两个参数与HSL相同，只有一个轻微的变化考虑值和亮度。

HSV或HSB和HSL之间的差异与轻度部分有关，当我们考虑HSL 100％的轻度和相同颜色的相同色调和饱和度的相同颜色时值时，最明显的是可见的。

因此，正如我们以前的知识所收集的那样，HSL颜色上的100％发光价值意味着纯白色（纯白色的阴影略有差异，但根据设备的投射零件，可以观察到纯白色）。当我们将轻度提高到最大值时，用户不会看到在这种情况下选择的颜色。但是，在HSV或HSB中，我们不考虑颜色的浅色，而是光的强度。

在这里，考虑一个光源在带有色调的物体上亮着灯，您决定了饱和。例如，考虑从Codepen拍摄的以下图像，选择一个色调，饱和度并保持值（或亮度）为100％在下面的结果：

Source

数字的颜色是结果颜色的外观。这不是白色，这将是HSL的结果。在HSV中，我们谈论具有强度为“价值或亮度”的光源下的颜色。但是，在HSL中，我们正在谈论该特定颜色的亮度部分。

在考虑HSV或HSB的操作时，这种色彩空间方案对人类比HSL更好，这有点直观。当物体暴露于全强度的光线时，我们自然不会看到白色。

在此 Appium Automation 教程中，了解Appium及其对移动自动化测试的好处。看看Appium的工作原理，并查看如何对移动应用程序进行Appium测试： https://www.lambdatest.com/appium

促进

为了满足更快的颜色空间计算，HSV的创建者Alvy Ray Smith创造了另一个称为HWB的彩色空间。这里的字母对应于色相，白色和黑色。 HWB是一个相当简单的色彩空间，选择一种以360度比例（与上述相同）为色相的颜色，并将一定数量的白色和黑色混合在一起。

因此，当我们采用W和B值以大约50％的值时，颜色将变为灰色。

w值为100％的值将产生白色，而b的值a为100％，无论色相价值如何。

另外，有趣的是，白色和黑色的平衡将彼此取决于彼此。如果混合太多白色，黑色部分将自动减少，反之亦然。因此，hwb(0,100,100)的值是不可能的，并且相同的逻辑适用于hwb(0,0,0)的值。

从天然出现的色调，饱和度和浅色的角度来看，此颜色空间更加直观。颜色空间认为可用的颜色阴影是白色和黑色混合物的一部分，成为主要颜色选择。但是，此颜色空间的使用受到限制。

浏览器支持HWB CSS颜色功能

HWB CSS颜色功能的浏览器兼容性如下所示。

Source

实验室色彩空间

可以使用实验室颜色空间来应用更多颜色的更广泛的颜色。实验室是一个不同，更复杂的色彩空间，倾向于探索更多的颜色，并为用户提供更多控制。

实验室代表轻度，通道A和通道B。与使用圆柱形表示的HSL，HSV和HWB不同，实验室使用了3轴系统，我们可以控制四种不同的原色和轻度。轴看起来如下：

为了更好地理解，我们将此图像分解为三个轴。但是，请注意，除了通道A和通道B表示外，没有此类标准符号。

让我们将轴A视为中心轴，即轻度。它代表了我们选择的颜色的亮度。它的工作方式与我们在前面的部分中讨论的方式相同。

另一个轴代表通道A，两个原色位于两侧的极端。一端包含洋红色，而另一端则将其设置为绿色。洋红色对比了以前的颜色空间中使用的红色，并提供了从一个极端到另一个极端的更好过渡。同样，在通道B轴中，一个端是黄色的，另一端为蓝色。

接下来是我们颜色值的设置。考虑到光轴的相交是我们图的起源，其中一种颜色代表负轴值，而另一个则代表一个正值。

重要的是要注意，冷颜色称为阳性，温暖的颜色在我们的实验室颜色空间中被称为阴性。因此，向绿色迈进意味着增加价值，而向黄色移动将意味着减少它。

实验室支持的值

如上所示，在上面的实验室图中所示，每个通道的值在-128至+127之间变化。轻度术语的描述从0到100％描述，描述了您想要多少轻度。

实验室CSS颜色功能的语法

实验室的语法正在调用一个函数，该函数以轻度，通道A和通道B的顺序编写。

background-color: lab(40% 100 100);

在上述语法中，轻度的值为40％，通道A为100，通道B为100。

浏览器支持实验室CSS颜色功能

浏览器对LAB CSS color function的支持很差，这是其在网页和互联网上使用有限的主要原因。使用实验室的唯一领域是在Photoshop中，当设计师需要在T恤或杯子上打印图像或设计时，等等。

Source

LCH颜色空间

我们将在这篇文章中考虑的最终色彩空间可以定义为最接近人类视觉的，因为它能够以我们人类的方式适应轻度感知。 LCH颜色空间缩写为轻度，色度和色相。颜色空间倾向于探索SRGB颜色中的更多颜色，并克服了HSL的缺点。

LCH使用色度而不是轻度，定义为最终渲染中使用的颜色量。即使您在各种情况下使用具有不同值的浅色，这也会产生均匀的颜色。例如，以下颜色具有不同的色调值，但相同的轻度。请注意，根据选定的色调，它们的轻便看起来有何不同：

颜色绿色的50％看起来不像紫色那样轻。这更接近颜色如何自然出现。

在理论中，Chroma参数无限。这意味着一个特定色调的色度值可能会有所不同，并且对此没有定义结合。 LCH是一个更好的颜色空间，一种颜色向另一种颜色的过渡也描绘了与HSL相比，这种频谱将我们带入SRGB空间。

自然而然地认为人类视力所感知的，过渡效果平滑，强度相等。但是，正如您必须注意的那样，LCH和HSL即使在其坐标系统中也有所不同。 HSL可以在圆形表盘上工作，而LCH更像实验室，与实验室颜色空间中讨论的原色相同。

LCH CSS颜色功能的语法

使用LCH CSS颜色空间的语法与实验室CSS颜色函数相似。传递到该功能的参数是轻度，色度值和相同顺序的色相。

lch(29.2345% 46.2 36);

请注意，Alpha值也可以作为第四参数在0到1的相同范围内或以百分比项为100的参数。

浏览器支持LCH CSS颜色功能

浏览器对LCH CSS color function的支持目前非常差，只有Safari支持此颜色空间。但是，我们非常肯定，LCH将在不久的将来进行，更新很快就会推出。色彩空间将有助于探索更广泛的颜色，可帮助设计师通过图像更生动地表达在CSS frameworks上的设计师。

Source

在使用颜色空间之前，有几点要记住

作为最后的注意，值得一提的是我们在使用颜色空间之前必须记住的一堆点。

• display-p3空间使用颜色函数，其他空间没有。此CSS颜色功能可帮助浏览器了解用于元素的空间类型。苹果仍然无法清楚起来的原因。

• 所有的颜色空间均可互相转换。在有关CSS颜色功能和空间的这篇文章中，我们提到了使用Safari上的Lambdatest将RGB转换为显示P3，然后将HSL转换为HSL部分中的RGB。在其他空间中尚未反复提及，因为需求很小。但是，您始终可以找到在线颜色转换器和工具，可以为您提供帮助。

• 将一个颜色空间转换为另一个颜色空间不能确保实现了不支持的设备。因此，例如，如果您打算使用LCH颜色选择并将其转换为Safari以外的浏览器的RGB，则将导致颜色，色相和饱和度损失。颜色是原始的，但靠近LCH选择。

始终确保在多个设备，操作系统和浏览器上选择颜色空间和颜色选择。这三个都会影响用户如何看待您的颜色并确保事先有助于避免突然的惊喜。如果您有兴趣了解有关CSS的更多信息，为什么不在CSS toggle switches上查看我们的博客？

您如何避免Cross Browser Compatibility issues？这是我们的视频：

订阅LambdaTest YouTube channel，以了解有关实时测试，真实设备测试和test orchestration using HyperExecute的更多信息。

观看本网络研讨会，以了解如何通过智能减少测试执行时间来帮助企业实现更快的上市时间。

在多个系统上验证颜色空间

上一节的最后一点很重要，因此我们认为专门为一个简短的部分来帮助大家开始旅程。在本节中，我将使用一个在线跨浏览器测试工具lambdatest，该工具将帮助我们从云上完全可用的强大基础架构中选择任何平台。

1. 要开始在任何网站上测试我们的颜色，首先，我们需要在lambdatest上进行signup for free。

2. 移至实时测试>浏览器测试 online browser testing的面板通过从左工具栏中单击它。

3. 输入您希望检查颜色的网站。选择浏览器，版本，OS 和解决方案以相同的规范启动网站。

4. 按开始启动测试会话。

在这里，您可以尝试颜色并分析所有与设计相关的图像。

您可能还需要在移动应用程序上分析相同的配色方案和空间。如前所述，设备制造商可以使用不同的零件在屏幕上投射颜色。因此，您可能会观察到具有相似规格和相似浏览器的不同设备上的颜色变化。幸运的是，Lambdatest确实在其云上提供了真实的设备，以使测试人员安装其应用程序并测试与颜色相关的问题。

为此，您需要导航到真实设备。您也可以查看我们支持的list of desktops and browsers。

1. 遵循步骤 1 上面提到的。

2. 转到真实设备>实时在侧面面板上访问real device cloud。

1. 在这里，您可以在会话开始您选择的操作系统并在Web应用程序中浏览您的颜色后，在浏览器中输入网站URL。

2. 您还可以通过上传您的应用程序和测试颜色相关的问题来执行应用程序测试。

综合 Exploratory Testing 教程，涵盖了探索性测试，其重要性，好处以及如何使用实时示例进行实例< /em>