提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

<color>数据类型

gt 数据类型 lt Color
2023-09-11 14:15:02 时间

MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value

一种颜色可以用以下任意的方式来描述：

  • 使用一个关键字
  • RGB立体坐标（RGB cubic-coordinate）系统，以“#”加十六进制或者rgb()和rgba()函数表达式的形式
  • 使用HSL圆柱坐标（HSL cylindrical-coordinate）系统，以hsl()和hsla()函数表达式的形式

色彩关键字

例如：

red
blue
white
black
orange
yellow
green

transparent关键字

transparent表示一个完全透明的颜色，即该颜色看上去将是背景色。从技术上说，它是带有阿尔法通道为最小值的黑色，是rgba(0,0,0,0)的简写。

currentColor关键字

当前元素的color值。

rgb()

颜色可以使用红-绿-蓝（red-green-blue (RGB)）模式的两种方式被定义：

十六进制符号#RRGGBB和#RGB

  • "#" 后跟6位十六进制字符（0-9, A-F）。
  • "#" 后跟3位十六进制字符（0-9, A-F）。

三位数的 RGB 符号（#RGB）和六位数的形式（#RRGGBB）是相等的。

函数符rgb(R,G,B)

"rgb" 后跟3个<integer>或3个<percentage>值。
整数 255 相当于 100%，和十六进制符号里的 F 或 FF 。

/* These examples all specify the same RGB color: */
 
 #f03
 #F03
 #ff0033
 #FF0033
 rgb(255,0,51)
 rgb(255, 0, 51)
 rgb(255, 0, 51.2) /* ERROR! Don't use fractions, use integers */ 
 rgb(100%,0%,20%)
 rgb(100%, 0%, 20%)
 rgb(100%, 0, 20%) /* ERROR! Don't mix up integer and percentage notation */

rgba()

颜色可以使用rgba()函数符在红-绿-蓝-阿尔法（RGBa）模式下被定义。RGBa 扩展了 RGB 颜色模式，它包含了阿尔法通道，允许设定一个颜色的透明度。
a 表示透明度：0=透明；1=不透明；

rgba(255,0,0,0.1)    /* 10% opaque red */  
rgba(255,0,0,0.4)    /* 40% opaque red */  
rgba(255,0,0,0.7)    /* 70% opaque red */  
rgba(255,0,0,  1)    /* full opaque red */

hsl()

颜色也可以使用hsl()函数符被定义为色相-饱和度-明度（Hue-saturation-lightness）模式。HSL 相比 RGB 的优点是更加直观：你可以估算你想要的颜色，然后微调。它也更易于创建相称的颜色集合。（通过保持相同的色相并改变明度/暗度和饱和度）。

色相（Hue）表示色环（即代表彩虹的一个圆环）的一个角度。这个角度作为一个无单位的<number> 被给出。定义 red=0=360，其它颜色分散于圆环，所以 green=120, blue=240，以此类推。作为一个角度，它隐含像 -120=240 和 480=120 这样的回环。

饱和度和明度由百分数来表示。
100%是满饱和度，而 0%是一种灰度。
100%明度是白色， 0%明度是黑色，而50%明度是“一般的”。

hsl(0,  100%,50%)    /* red */   
hsl(30, 100%,50%)                 
hsl(60, 100%,50%)                
hsl(90, 100%,50%)                
hsl(120,100%,50%)    /* green */ 
hsl(150,100%,50%)                
hsl(180,100%,50%)                
hsl(210,100%,50%)                
hsl(240,100%,50%)    /* blue */  
hsl(270,100%,50%)                
hsl(300,100%,50%)                
hsl(330,100%,50%)                
hsl(360,100%,50%)    /* red */   

hsl(120,100%,25%)    /* dark green */  
hsl(120,100%,50%)    /* green */       
hsl(120,100%,75%)    /* light green */ 

hsl(120,100%,50%)    /* green */  
hsl(120, 67%,50%)                 
hsl(120, 33%,50%)                 
hsl(120,  0%,50%)                 

hsl(120, 60%,70%)    /* pastel green */

hsla()

颜色可以使用hsla()函数符在色相-饱和度-明度-阿尔法（HSLa）模式下被定义。HSLa 扩展自 HSL 颜色模式，包含了阿尔法通道，可以规定一个颜色的透明度。
a表示透明度：0=透明；1=不透明；

相关文章