大家好，我是CUGGZ。1、CSS命名颜色颜色在CSS中无处不在，可以作为文本、背景、阴影、表格、边框、链接等属性，我们在CSS中使用的颜色大多是hex和RGB。其实，表达色彩的方式有很多种。让我们了解一下CSS中的颜色系统吧！CSS中提供了148种命名颜色，所有浏览器都支持这些名称，并且这些名称都是预定义的颜色值。以下是一些颜色名称及其对应的十六进制颜色值：查看所有预定义颜色名称：https://www.w3schools.com/colors/colors_names.asp以下是使用颜色名称的示例：div{color:black;边框：1px纯蓝紫色；background:skyblue;}注意：所有命名的颜色都不区分大小写。除了颜色名称之外，还有一些其他命名的颜色和关键字值得一提：(1)transparenttransparent关键字用作rgba(0,0,0,0)的简写，表示完全透明。目前所有浏览器都支持该关键字。它是背景颜色属性的默认值。div{background-color:transparent;}(2)currentColorcurrentColor表示当前颜色。如果未指定，文本颜色将从父容器继承。因此，下面的CSS规则是等价的：div{color:red;背景色：currentColor；}div{颜色：红色；background-color:red;}这个属性在SVG中使用时非常方便，你可以指定将填充或描边颜色设置为currentColor以确保SVG颜色与其父级的文本颜色相匹配。(3)inheritinherit是保留字，不限于颜色，表示该属性与元素的父元素的属性取相同的值。对于继承的属性，主要用途是覆盖另一个规则。(4)系统颜色还有一些其他特殊的颜色关键字，用来匹配一些系统元素，目的是保持应用程序在浏览器上的一致性。系统颜色成对出现：背景色-前景色。下面是系统颜色相关的关键字：backgroundcolor,foregroundcolor,buttonFacebuttonText,canvasactiveText,canvasText,linkText,visitedTextfieldfieldTexthighlighthighlightText以下是不同浏览器对系统颜色的支持：2.RGB颜色RGB值也是我们常用的颜色表示。RGB指的是红-绿-蓝，这个顺序很重要。每种颜色都使用0到255之间的数字指定。最常见的RGB值是黑色：rgb(0,0,0)和白色：rgb(255,255,255)。RGB符号允许我们以更易读的形式访问与十六进制值相同的颜色范围。下面是一个使用RGB值的颜色示例：div{color:rgb(0,0,0);边框：1px纯色rgb(155,55,89)；background:rgb(255,255,255);}此外，我们还可以使用名为rgba()的属性为rgb值定义一个alpha值，其中alpha值是透明度的百分比。它类似于rgb，但允许添加第四个值。不透明度范围可以是0到1之间的任何值，0是最小值（无不透明度），1是最大值（完全不透明度）：div{color:rgba(0,0,0,0.5);边框：1px实心rgba(255,0,0,0.8)；background:rgba(0,125,0,0.2);}注意十六进制颜色值不区分大小写。所以#ff0000、#FF0000、#Ff0000的显示效果是一致的。3、十六进制颜色在CSS中我们也可以使用十六进制值来表示颜色，这也是我们使用最多的颜色表示方式。十六进制用16个符号来表示，0到9的值用0-9，10到15的值用A-F，如下：在CSS中，6个十六进制数字用来表示颜色。这意味着两个数字分别用于表示红色(R)、绿色(G)和蓝色(B)分量。例如#000000代表黑色，是最小的十六进制值；#FFFFFF代表白色，是最大的十六进制值。这是一个使用颜色名称的示例：div{color:#000000;边框：1px实心#00FF00；background:#FF0000;}我们也可以用3个值（每种颜色一个）来缩短十六进制值如果每两个数字的值相同，则可以缩短一半：div{color:#000;边框：1px实心#0F0；background:#F00;}我们也可以为十六进制颜色定义一个alpha值，即透明百分比。在十六进制代码中，将另外两位添加到六位序列以形成八位序列。例如，要在十六进制代码中设置黑色#000000，添加50%透明度，您可以将其更改为#00000080。如您所见，十六进制颜色值很难阅读。通过读取十六进制值来猜测元素的颜色几乎是不可能的。4、HSL颜色HSL的全称是Hue-Saturation-Lightness，分别代表色相、饱和度和亮度。它基于RGB色轮。每种颜色都有饱和度和亮度值的角度和百分比值。先来了解一下这三个概念，Hue：Hue描述的是色轮上的数值，从0到360度，从红色开始（0和360）；Saturation：饱和度是选择的色调Vibrance，100%表示完全饱和的亮色，0%表示完全不饱和的灰色；lightness：颜色的亮度等级，数值越低越暗，接近黑色，数值越高越亮，接近白色。HSL颜色函数的表示如下：hsl(Hue,Saturation,Lightness)其中Hue为色相值，即在色轮上的位置，可以是0到360deg之间的任意值，以及这个参数也可以连接到角度单位turn（转弯）和unitless。下面三个规则的显式效果是一样的：div{background-color:hsl(180deg,50%,50%);}div{background-color:hsl(0.5turn,50%,50%);}div{background-color:hsl(180,50%,50%);}一些常用的HSL颜色值：另外，HSL颜色值还可以加上alpha值表示透明度，其用法如下：hsla(Hue,Saturation,Lightness/alpha)数值之间不用逗号分隔，而是用斜杠，例如：div{background-color:hsl(0100%50%/0.5);}5.HWB颜色HWB是称为Hue-Whiteness-Blackness，意思是色相、白度和黑度。色调：色轮中的一个角度；白度：表示要混合的白色的百分比。值越高，颜色越白。黑度：表示要混合的黑色量的百分比。值越高，颜色越深。和HSL一样，色调可以是0到360之间的任意值。黑度和白度用于控制在所选色调中混合了多少黑色和白色。它们也是0-100%之间的值。当它为100%时，它将呈现全黑或全白。如果等量的白色或黑色混合在一起，颜色会越来越灰。这个函数对于创建单色调色板非常有用：hwb()也可以添加alpha值来表示透明度，同样用斜线分隔：hwb(1940%0%)hwb(1940%0%/.5)注意：目前只有Safari15支持这种颜色格式，请谨慎使用。6.LABColorLAB是一个可以在Photoshop等软件中访问的颜色空间，它代表了人类可以看到的整个颜色范围。它使用三个轴表示：亮度、a轴和b轴。亮度：从黑到白。值越低，颜色越接近黑色。a轴：从绿色到红色。较低的值更接近绿色，较高的值更接近红色。b轴：从蓝色到黄色。较低的值更接近蓝色，较高的值更接近黄色。亮度值可以是任意百分比，不限于0%和100%，可以超过100%。超亮白的使用比例可高达400%。a和b轴的值可以是正的也可以是负的。两个负值会导致颜色偏向光谱的绿色/蓝色端，而两个正值会产生更偏橙色/红色的色调。所有参数用空格隔开：div{background-color:lab(80%10050);}div{background-color:lab(80%-80-100);}lab()也可以加上alpha值表示透明度,也用斜线隔开:div{background-color:lab(80%-80-100/.5);注意：目前只有Safari15支持这种颜色格式，谨慎使用。7.LCH颜色LCH代表亮度、色度和色调。它具有与Lab相同的L值，但它不使用坐标a*和b*，而是使用C（色度）和H（色调）。色调可以是0到360之间的值。色调表示颜色的多少，类似于HSL中的饱和度。但是色度值可以超过100，理论上是没有限制的。div{background-color:lch(80%10050);}对于色度值，目前的浏览器和显示器能显示的颜色数量有限，只有0-230之间的值有用。230没什么区别：此方法还可以添加第四个可选参数alpha。此函数遵循空格分隔（带斜线的字母）：div{background-color:lch(80%10050/.5);注意：目前只有Safari15支持这种颜色格式，谨慎使用。那么，当您拥有HSL时，为什么还需要LAB和LCH？因为您可以使用LAB或LCH获得更广泛的颜色。LCH和LAB旨在让我们获得全方位的人类视觉。除此之外，HSL和RGB在感知上并不统一，在HSL中，增加或减少亮度会根据色调产生完全不同的效果。8.CMYK颜色CMYK代表青色、洋红色、黄色和基调，与打印机中的墨水颜色相匹配。虽然屏幕通常以RGB显示颜色，但打印机通常使用青色、品红色、黄色和黑色的组合来表示颜色，这些是最常见的墨水颜色。可以使用device-cmyk()指定CMYK颜色，使用空格分隔参数，或者添加alpha值设置透明度。div{background-color:device-cmyk(1000);}注意该方法存在兼容性问题，谨慎使用。9.混色在CSSColorModuleLevel5提案中提出了混色的概念和相关方法color-mix()，可以混合两种颜色，类似于Sass中的mix()函数。color-mix()允许我们指定颜色空间，默认使用LCH，混合效果极佳。你可以指定每种颜色混合多少：div{background-color:color-mix(inlch,red,blue);}div{background-color:color-mix(inlch,red30%,70%blue);}
