color-關於顏色值

Zero_A發表於2018-06-30

css中<color>即顏色值可以是一個關鍵字也可以是一個數值規則,包括 Color Name(顏色名稱), HEX, RGB, RGBA, HSL, HSLA, transparent, currentColor

Color Name

用顏色關鍵字來指定顏色。包括:

  • 基礎顏色關鍵字
  • 系統顏色關鍵字
  • 擴充套件顏色關鍵字

檢視示例

HEX-十六進位制

#RRGGBB#RGB

取值

  • RR:紅色值。十六進位制正整數
  • GG:綠色值。十六進位制正整數
  • BB:藍色值。十六進位制正整數

說明

  • 以上三個引數,取值範圍為:00 - FF。
  • 引數必須是兩位數。對於只有一位的,應在前面補零。
  • 如果每個引數各自在兩位上的數字都相同,那麼本單位也可縮寫為 #RGB 的方式。例如:#FF8800 可以縮寫為 #F80。
  • 此色彩模式與RGB色彩模式不同。

RGB

RGB(R,G,B)

取值

  • R:紅色值。正整數 | 百分數
  • G:綠色值。正整數 | 百分數
  • B:藍色值。正整數 | 百分數

說明

  • 以上三個引數,正整數值的取值範圍為:0 - 255。百分數值的取值範圍為:0.0% - 100.0%。
  • 超出範圍的數值將被截至其最接近的取值極限。如:rgb(300,0,0)會被解析為rgb(255,0,0)
  • 正整數值255對應百分比數值100%,如:rgb(255,255,255) = rgb(100%,100%,100%) = #FFFFFF = #FFF
  • RGB色彩是通過對紅(R)、綠(G)、藍(B)三個顏色通道的變化和它們相互之間的疊加來得到各式各樣的顏色的。
  • 此RGB色彩模式與#RRGGBB/#RGB(HEX)不同。

RGBA

RGBA(R,G,B,A)

取值

  • R:紅色值。正整數 | 百分數
  • G:綠色值。正整數 | 百分數
  • B:藍色值。正整數 | 百分數
  • A:Alpha透明度。取值0 - 1之間。

說明

  • 此色彩模式與RGB相同,只是在RGB模式上新增了Alpha透明度
  • IE6.0-8.0不支援使用 rgba 模式實現透明度,可使用 IE 濾鏡處理

HSL

HSL(H,S,L)

取值

  • H:Hue(色調)。0(或360)表示紅色,120表示綠色,240表示藍色,也可取其他數值來指定顏色。取值為:0 - 360
  • S:Saturation(飽和度)。取值為:0.0% - 100.0%
  • L:Lightness(亮度)。取值為:0.0% - 100.0%

HSLA

HSLA(H,S,L,A)

取值

  • H:Hue(色調)。0(或360)表示紅色,120表示綠色,240表示藍色,也可取其他數值來指定顏色。取值為:0 - 360
  • S:Saturation(飽和度)。取值為:0.0% - 100.0%
  • L:Lightness(亮度)。取值為:0.0% - 100.0%
  • A:Alpha透明度。取值0 - 1之間。

說明:

此色彩模式與HSL相同,只是在HSL模式上新增了Alpha透明度。

相關文章