CSS 顏色編號碼

一、RGB值和十六進位值

CSS顏色編號碼分為兩種：RGB值和十六進位值。RGB值指的是紅、綠、藍三個顏色通道的取值，取值範圍從0到255。例如，紅色為rgb(255,0,0)；綠色為rgb(0,255,0)。而十六進位值則是用16進位數對顏色進行編碼，每個顏色通道佔2個十六進位位，取值範圍為00到FF。例如，紅色為#FF0000；綠色為#00FF00。

/* CSS中設置顏色 */
color: rgb(255,0,0);
background-color: #00FF00;

使用RGB值或十六進位值設置顏色時，需要使用color屬性或background-color屬性。

二、CSS3中的顏色屬性

CSS3中新增了很多的顏色屬性，下面介紹其中的一些。

1. RGBA和HSLA

RGBA和HSLA是RGB值和HSL值的半透明版本。它們的格式分別為：rgba(red, green, blue, alpha)和hsla(hue, saturation, lightness, alpha)。其中，alpha表示透明度，範圍為0到1，0表示完全透明，1表示完全不透明。

/* 設置顏色的透明度 */
color: rgba(255,0,0,0.5);

2. 顏色名字

除了用RGB值或十六進位值設置顏色以外，還可以使用顏色的名字來設置。例如，紅色可以用red來表示。

/* 使用顏色名字設置顏色 */
color: red;

3. currentColor

currentColor表示當前元素所使用的顏色。例如，如果color屬性被設置為red，那麼border-color屬性設置為currentColor將會繼承red的顏色值。

/* 繼承元素的顏色 */
color: red;
border-color: currentColor;

三、CSS4中的顏色屬性

CSS4中又新增了一些有趣的顏色屬性，下面介紹其中的一些。

1. rebeccapurple

rebeccapurple是CSS4中新增的一種顏色名字，表示紫色。它是為了紀念Web標準先驅Rebecca Murphey而創建的。

/* 使用rebeccapurple設置顏色 */
color: rebeccapurple;

2. gray()

gray()函數可以用來快速設置一種灰色，它的參數表示灰度值，範圍為0到100。例如，gray(50%)表示50%灰度的灰色。

/* 快速設置灰色 */
color: gray(50%);

3. color-mod()

color-mod()函數可以對顏色進行操作，包括調整亮度、對比度、透明度等。

/* 修改顏色的透明度 */
color: color-mod(red alpha(0.5));

四、總結

CSS顏色編號碼包括RGB值和十六進位值，CSS3中新增了RGBA、HSLA等顏色屬性，CSS4中又新增了rebeccapurple、gray()和color-mod()等顏色屬性，這些屬性可以讓我們更加方便地設置顏色，並且對於顏色的處理也更加靈活。