CSS中颜色代码大全总结(收藏)

在CSS中,颜色可以通过多种方式表示,以下是一些常见的颜色表示方法:

CSS中颜色代码大全总结(收藏)
(图片来源网络,侵删)

1、十六进制颜色代码

2、RGB颜色代码

3、RGBA颜色代码

4、HSL颜色代码

5、HSLA颜色代码

6、HSLV颜色代码

7、HSLW颜色代码

8、CMYK颜色代码

9、CIELAB颜色代码

10、Lab颜色代码

11、LCH颜色代码

12、LCH A颜色代码

13、XYZ颜色代码

14、XYZ A颜色代码

15、Luminance颜色代码

16、Lightness颜色代码

17、Chroma颜色代码

18、Huerotate颜色代码

19、Saturation颜色代码

20、Grayscale颜色代码

21、CurrentColor颜色值

22、Transparent透明色

以下是这些颜色的详细解释和示例:

1、十六进制颜色代码:以井号(#)开头的6位十六进制数字,分为红色、绿色、蓝色三个部分,每个部分两位。#FF0000表示红色,#00FF00表示绿色,#0000FF表示蓝色。

2、RGB颜色代码:使用三个数字表示红、绿、蓝三种颜色的强度,范围为0255,rgb(255, 0, 0)表示红色,rgb(0, 255, 0)表示绿色,rgb(0, 0, 255)表示蓝色。

3、RGBA颜色代码:在RGB颜色代码的基础上添加一个透明度参数,范围为01,rgba(255, 0, 0, 0.5)表示半透明的红色。

4、HSL颜色代码:使用色相(Hue)、饱和度(Saturation)、亮度(Lightness)三个参数表示颜色,hsl(0, 100%, 50%)表示红色。

5、HSLA颜色代码:在HSL颜色代码的基础上添加一个透明度参数,范围为01,hsla(0, 100%, 50%, 0.5)表示半透明的红色。

6、HSLV颜色代码:使用色相(Hue)、饱和度(Saturation)、亮度(Lightness)、变量(Value)四个参数表示颜色,hslv(0, 100%, 50%, 50%)表示红色。

7、HSLW颜色代码:在HSLV颜色代码的基础上添加一个权重(Weight)参数,范围为01,hslw(0, 100%, 50%, 50%, 0.5)表示半透明的红色。

8、CMYK颜色代码:使用青色(Cyan)、品红(Magenta)、黄色(Yellow)、黑色(Black)四个参数表示颜色,cmyk(0, 100%, 100%, 50%)表示红色。

9、CIELAB颜色代码:使用国际照明委员会(CIE)定义的L*a*b*三个参数表示颜色,lab(50%, 20%, 30%)表示红色。

10、Lab颜色代码:使用L*a*b三个参数表示颜色,lab(50%, 20%, 30%)表示红色。

11、LCH颜色代码:使用L*色度(Chroma)、C*色调(Hue)、H*色相角(Hue angle)三个参数表示颜色,lch(50%, 45deg, 270deg)表示红色。

12、LCH A颜色代码:在LCH颜色代码的基础上添加一个透明度参数,范围为01,lch(50%, 45deg, 270deg, 0.5)表示半透明的红色。

13、XYZ颜色代码:使用国际照明委员会(CIE)定义的X*Y*Z三个参数表示颜色,xyz(1, 1, 1)表示白色,xyz(1, 1, 1)表示黑色。

14、XYZ A颜色代码:在XYZ颜色代码的基础上添加一个透明度参数,范围为01,xyza(1, 1, 1, 0.5)表示半透明的白色。

15、Luminance颜色代码:使用亮度(Luminance)参数表示颜色,范围为01,luminance(50%)表示中等亮度的颜色。

16、Lightness颜色代码:使用亮度(Lightness)参数表示颜色,范围为01,lightness(50%)表示中等亮度的颜色。

17、Chroma颜色代码:使用色度(Chroma)参数表示颜色,范围为01,chroma(45%)表示中等饱和度的颜色。

18、Huerotate颜色代码:使用色相旋转(Huerotate)参数表示颜色,范围为deg或rad角度值,huerotate(90deg)表示将色相旋转90度的颜色。

19、Saturation颜色代码:使用饱和度(Saturation)参数表示颜色,范围为百分比值,saturation(50%)表示中等饱和度的颜色。

20、Grayscale颜色代码:使用灰度值(Grayscale)参数表示灰色或黑色的颜色,grayscale(50%)表示半透明的灰色。

原创文章,作者:未希,如若转载,请注明出处:https://www.kdun.com/ask/406839.html

本网站发布或转载的文章及图片均来自网络,其原创性以及文中表达的观点和判断不代表本网站。如有问题,请联系客服处理。

(1)
未希新媒体运营
上一篇 2024-03-29 20:09
下一篇 2024-03-29 20:10

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

产品购买 QQ咨询 微信咨询 SEO优化
分享本页
返回顶部
云产品限时秒杀。精选云产品高防服务器,20M大带宽限量抢购 >>点击进入