您对Web上的颜色表示了解多少？

时间：2023-04-02 19:13:41 HTML

前言如果你想在网页中表示各种颜色，你首先想到的可能是用十六进制或RGB来表示。但是在实际的web中，远远不止这两个。在今天的这篇文章中，我将与您谈谈网络上表达颜色的各种方式。以下面的代码为例，可以复制代码看看效果：HTML

CSS.box{width:200px;高度：200px；填充：20px20px；显示：弹性；调整内容：空格；}.box>div{width:50px;高度：50px；border-radius:4px;}英文单词HTML和CSS颜色规范中预定义了140+种颜色名称，您可以点击这里查看。直接用英文单词的好处是简单明了，缺点是140+的单词真的很难记，而且不能包含所有的颜色。.one{背景颜色：红色；}.two{背景颜色：绿色；}.three{背景颜色：蓝色；}Hexadecimal颜色的十六进制表示：#RRGGBB，这里的十六进制本质是RGB的十六进制表示，每两位代表RR（红）、GG（绿）、BB（蓝）三个颜色通道的色阶。所有值必须在00和FF之间。.one{背景颜色：#00FFFF;}.two{背景颜色：#FAEBD7;}.three{背景颜色：#7FFFD4;}也可以缩写为#0FF对于颜色格式，如#00FFFF。.one{背景颜色：#0FF;}如果你需要带透明度，你也可以像这样添加两个额外的数字：.one{background-color:#00FFFF80;}RGB在rgb()函数中，CSS语法如下：rgb(red,green,blue)每个参数red,green,blue定义了颜色的强度，可以是0到255之间的整数或者百分比值（从0%到100%).one{background-color:rgb(112,128,144);}.two{背景色：rgb(30%,10%,60%);}.three{背景色：rgb(0,139,139);}十六进制和RGB的原理是使用光的三种基色：红、绿、蓝。使用这三种颜色可以组合出数以千万计的颜色。简单计算一下，256级RGB颜色总共可以组合出大约1678万种颜色，即256×256×256=16777216种。至于为什么是256级，因为0也是其中一个值。RGBARGBA在RGB之上扩展一个Alpha通道以指定对象的不透明度。.one{背景色：rgba(112,128,144,0.5);}.two{背景色：rgb(30%,10%,60%,0.2);}.three{背景色：rgb(0,139,139,0.5);}HSLHSL分别代表色调、饱和度和明度，是RGB颜色模型中点在圆柱坐标系中的表示。CSS语法如下：hsl(hue,saturation,lightness)Hue：色轮上的一个度数（从0到360）——0（或360）为红色，120为绿色，240为蓝色.饱和度：一个百分比值；0%是灰色阴影，100%是全彩色。亮度：百分比；0%是黑色，100%是白色。示例：.one{背景颜色：hsl(20,100%,50%);}.two{背景颜色：hsl(130,100%,25%);}.three{背景颜色：hsl(240,80%,80%));}HSLAHSLA和HSL的关系类似于RGBA和RGB的关系，HSLA颜色值在HSL颜色值上扩展Alpha通道——指定物体的不透明度。CSS语法如下：hsla(hue,saturation,lightness,alpha)示例：.one{background-color:hsla(20,100%,50%,0.5);}.two{背景色：hsla(130,100%,25%,0.75);}.three{背景颜色：hsla(240,80%,80%,0.4);}opacityopacity属性设置元素的不透明度级别。CSS语法如下：opacity:value|inherit;它在行为上与RGBA中的A有一定区别：opacity同时影响子元素的样式，而RGBA则不会。有兴趣的可以试一试。关键字除了的各种数字语法外，CSS还为颜色定义了几组关键字，每组都有自己的优点和用例。这里有两个特殊的关键字transparent和currentcolor。transparenttransparen指定透明黑色，如果一个元素覆盖在另一个元素上，而你想显示下面的元素；或者您不希望某个元素具有背景颜色，并且您不希望用户的浏览器颜色设置影响您的设计。透明会派上用场。在CSS1中，透明用作背景色的值。在后来的CSS2和CSS3中，透明可以用在任何有颜色值的属性上。.one{背景颜色：透明；颜色：透明；边框颜色：透明；}currentcolorcurrentcolor关键字可以引用元素的color属性值。.one{颜色：红色；border:1pxsolidcurrentcolor;}等价于.one{color:red;边框：1px纯红色；}下面介绍的目前主流浏览器都支持得不好，但是已经列为CSS4标准，了解一下还是不错的。HWBhwb()函数符号表示给定颜色的色调、白度和黑度。还可以添加一个alpha分量来表示颜色的透明度。语法如下：hwb[a](HWB[/A])例子：hwb(1800%0%)hwb(1800%0%/.5)hwb(180,0%,0%,.5);/*使用逗号分隔符*/目前只有Safari支持。Lab，Lchlab()函数符号表示CIELab*颜色空间中的给定颜色，L表示亮度，取值范围为[0,100]；a表示从绿色到红色的分量，取值范围为[127,-128]；b*表示从蓝色到黄色的分量，取值范围是[127,-128]。理论上，它可以显示人类所能看到的全部颜色。语法如下：lab(Lab[/A])例子：lab(29.2345%39.382520.0664);lab(52.2345%40.164559.9971);lch()函数表示法在CIELCH颜色空间中表示给定的颜色，使用与Lab*相同的颜色空间，但它使用圆柱坐标，其中L是亮度值，C是饱和度值，H是色调角度值。语法如下：lch(LCH[/A])例子：lch(29.2345%44.227);lch(52.2345%72.256.2);常用色彩空间的概念可以自行查询，或点击本文了解更多。color()color()函数符号允许在特定颜色空间中指定颜色。语法如下：color([[|]?[+|][/]?])p3-0.61121.0079-0.2192);颜色（profoto-rgb0.48350.91670.2188）；在这里您可以了解色域标准。CMYKCMYK是印刷四色模式。四色模式是彩色印刷中使用的套色模式。利用色材三基色的混色原理，加上黑色油墨，共四种颜色混合叠加，形成所谓的“全色印刷”。四种标准颜色为：C：Cyan=青色，又称'天蓝'或'蓝色'M：Magenta=品红，又称'品红'；Y：黄色=黄色；K:blacK=黑色。这里的缩写使用最后一个字母K而不是开头的B，以避免与Blue混淆。CMYK模式是减色模式，对应的RGB模式是加色模式。计算机显示器使用RGB颜色值显示颜色，而打印机通常使用CMYK颜色值显示颜色。在CSS4标准中，计划使用device-cmyk()函数来实现。语法如下：device-cmyk()=device-cmyk({4}[/]?,?)=|<百分比>示例：device-cmyk(081%81%30%);device-cmyk(081%81%30%/.5);参考https://www.w3school.com.cn/c...https://www.w3.org/TR/css-col...https://www.cnblogs.com/ypppt...https://developer.mozilla.org...https://blog.csdn.net/gdymind...https://blog.csdn.net/JiangHu...最后，关于web中的颜色表示方法，这些是基础知识。如果想了解更多，可以点击文章中的正文链接或者文末的参考链接。

上一篇：前端基础面试题

下一篇：hbuilder运行PHP

您对Web上的颜色表示了解多少？相关文章