顏色教程
顏色透過結合紅色、綠色和藍色光來顯示。
顏色名稱
使用 CSS，顏色可以透過使用顏色名稱來設定
CSS 顏色值
使用 CSS，顏色可以透過多種方式指定
- 按顏色名稱
- 作為 RGB 值
- 作為十六進位制值
- 作為 HSL 值 (CSS3)
- 作為 HWB 值 (CSS4)
- 使用
currentcolor關鍵字
RGB 顏色
RGB 顏色值在所有瀏覽器中都受支援。
RGB 顏色值指定為：rgb( RED , GREEN , BLUE )。
每個引數定義顏色的強度，為一個介於 0 和 255 之間的整數。
例如，rgb(0,0,255) 顯示為藍色，因為藍色引數設定為其最高值 (255)，而其他引數設定為 0。
灰色調通常使用所有三種光源的相同值來定義
十六進位制顏色
十六進位制顏色值在所有瀏覽器中都受支援。
十六進位制顏色指定為：#RRGGBB.
RR (紅色)、GG (綠色) 和 BB (藍色) 是介於 00 和 FF 之間的十六進位制整數，用於指定顏色的強度。
例如，#0000FF 顯示為藍色，因為藍色分量設定為最高值 (FF)，而其他分量設定為 00。
灰色調通常使用所有三種光源的相同值來定義
示例
| 顏色 | HEX | RGB | 顏色 |
|---|---|---|---|
| #000000 | rgb(0,0,0) | 黑色 | |
| #808080 | rgb(128,128,128) | 灰色 | |
| #FFFFFF | rgb(255,255,255) | 白色 |
大寫或小寫？
您可以 O使用大寫或小寫字母來指定十六進位制值。
小寫更容易輸入。大寫更容易閱讀。
顏色名稱
CSS 支援 140 種標準顏色名稱。
在下一章中，您將找到按字母順序列出的完整顏色名稱及其十六進位制值列表
| 顏色名稱 | 十六進位制 | 顏色 |
|---|---|---|
| 愛麗絲藍 | #F0F8FF | |
| 古董白 | #FAEBD7 | |
| 水綠色 | #00FFFF | |
| 海藍色 | #7FFFD4 | |
| 蔚藍色 | #F0FFFF | |
| 米色 | #F5F5DC | |
| 杏仁白 | #FFE4C4 |
currentcolor 關鍵字
關鍵字 currentcolor 指的是元素的 color 屬性的值。
示例
以下 <div> 元素的邊框顏色將是藍色，因為 <div> 元素的文字顏色是藍色。
#myDIV {
color: blue; /* 藍色文字顏色 */
border: 10px solid currentcolor; /* 藍色邊框顏色 */
}
自己動手試一試 »
