CSS 色彩表示法：色名、16 進位與色彩函式
CSS 支援多種色彩表示法，常用的為色名、十六進位、RGB(A)、HSL(A)。根據需求選擇合適的表示法。
色名
直觀的用文字來描述，但缺色彩細部的調整。
css
color: red;
color: blue;
color: orange;16 進位
以 # 開頭，後面接續色光三原色 (RGB) 所分成 0 ~ 255 階共 256 等分，並使用 16 進位來表示。
css
color: #ff0000; /* 紅色 */
color: #00ff00; /* 綠色 */
color: #0000ff; /* 藍色 */
color: #fff; /* 白色，縮寫 */支援透明度
近年來瀏覽器也進步不少，亦支援 16 進位色碼的八碼寫法，多出來兩碼為透明度，數值越高透明度越低，00 表示全透明，ff 表示不透明。
css
color: #ff000080 /* 透明度 50% */
color: #00ff004d /* 透明度 30% */以下為轉換為 16 進位的小工具:
色彩函式
CSS 還有 函式 的色彩表示法，Away 列出一些較常見到的。
RGB
RGB 為色光三原色，其色彩的範圍在 0 ~ 255 之間。
color: rgb(R, G, B);- R: 0~255。例如：
255。 - G: 0~255。例如：
0。 - B: 0~255。例如：
0。
RGBA
RGB 表示法的延伸，多加了透明度。其範圍在 0~1 之間。
css
color: rgba(255, 0, 0, .5); /* 50% 透明度的紅色 */HSL
HSL 為色彩空間的表示法。
color: hsl(色相, 飽和度, 明度);- 色相: 0~359。例如：
0。 - 飽和度: 0%~100%。例如：
100%。 - 明度: 0%~100%。例如：
50%。
HSLA
HSL 表示法的延伸，多加了透明度。其範圍在 0~1 之間。
css
color: hsla(0, 100%, 50%, .5); /* 半透明紅色 */用自訂屬性管理色彩
css
:root {
--brand: #2965f1;
--text: #1f2937;
--danger: #dc2626;
}
.btn { background: var(--brand); }集中定義後，換色只要改一處，也方便做深淺主題切換。
透明度的兩種做法
css
/* 整個元素連同文字一起變透明 */
.a { opacity: 0.5; }
/* 只有背景半透明，文字維持清晰 */
.b { background: rgb(0 0 0 / 0.5); }小提醒
文字與背景的對比度不足會直接影響可讀性，也是無障礙檢測的重點項目。淺色文字配淺色背景前，記得先確認對比。
常見問題
十六進位可以縮寫嗎？
可以。六碼中每兩碼相同時能縮成三碼，加上透明度的八碼同理能縮成四碼。
hsl 有什麼優勢？
它用色相、飽和度與亮度描述顏色，只要改亮度就能做出同色系的深淺變化，做主題配色比十六進位直覺得多。
透明度該用 opacity 還是帶透明度的顏色？
opacity 會讓整個元素連同內容一起變透明；帶透明度的顏色只影響那個屬性。只想讓背景半透明時，請用後者。
顏色該怎麼管理比較好？
把品牌色與語意色定義成自訂屬性，全站統一引用。日後換色只要改一處，也方便做深淺主題切換。
