CSS 顏色寫法整理：HEX、RGB、HSL、半透明，opacity 和 rgba 差在哪

改網站顏色時，常看到 #1e8a8a、rgb(30 138 138)、hsl(180 64% 33%) 這幾種寫法，三個都是同一個藍綠色。這篇用一個顏色從頭整理：

1. 三種常見的顏色寫法
2. 半透明怎麼寫
3. opacity 和半透明底色差在哪
4. 用 hsl 調出同一色系的深淺
5. color-mix() 做滑鼠移上去的顏色
6. currentColor：外框、圖示跟著文字變色

三種常見的寫法

/* 同一個藍綠色的四種寫法 */
.teal-1 { color: #1e8a8a; }
.teal-2 { color: rgb(30 138 138); }
.teal-3 { color: rgb(30, 138, 138); } /* 舊寫法：用逗號分隔 */
.teal-4 { color: hsl(180 64% 33%); }

• HEX（十六進位）：# 後面 6 碼，每 2 碼一組，依序是紅、綠、藍，從 00 到 ff。設計軟體、色碼表最常給這種。
• RGB：直接寫紅、綠、藍三個數字，0 到 255。現在的寫法用空格分隔，舊的寫法用逗號，兩種瀏覽器都看得懂。
• HSL：色相（0 到 360 度的色環）、飽和度、亮度。數字比較好「讀」：180 度是青色，飽和度 64%，亮度 33% 偏暗。

我們在 Chrome 量過，四個寫法算出來都是 rgb(30, 138, 138)，完全一樣。

另外還有顏色名稱，例如 red、gold、white，寫起來方便，但只有一百多個固定的顏色，品牌色通常還是用色碼。

半透明的四種寫法

/* 半透明的藍綠色：四種寫法效果一樣 */
.half-1 { background: #1e8a8a80; }              /* HEX 多兩碼，80 約是 50% */
.half-2 { background: rgb(30 138 138 / 50%); }
.half-3 { background: hsl(180 64% 33% / 0.5); }
.half-4 { background: rgba(30, 138, 138, 0.5); } /* 舊寫法 */

• HEX 寫 8 碼：最後兩碼是透明度，ff 是完全不透明、80 大約一半、00 是全透明。
• rgb、hsl 加斜線：斜線後面寫透明度，可以用百分比，也可以寫 0 到 1 的小數。
• rgba：舊的寫法，很多教學和舊網站還在用，一樣有效。

在 Chrome 量，四個寫法算出來都是 rgba(30, 138, 138, 0.5)。

opacity 和半透明底色差在哪

這是最常遇到的問題：想讓卡片的白底變半透明、透出後面的背景圖，結果用了 opacity，連卡片上的字也一起變淡。

/* 整張卡片連文字一起變淡 */
.card-opacity { background: #fff; opacity: 0.6; }

/* 只有底色變淡，文字維持清楚 */
.card-alpha { background: rgb(255 255 255 / 60%); }

• opacity 作用在整個元素上，包含裡面的文字、圖片、按鈕，全部一起變透明，而且裡面的元素沒辦法用 opacity: 1 改回來。
• 半透明的底色（rgb(... / 60%) 這類寫法）只讓背景透明，文字、圖片維持原樣。

所以「背景透出來、字要清楚」的情況，用半透明底色；「整個東西淡出、淡入」的效果（例如動畫、停用的按鈕），才用 opacity。

用 hsl 調出同一色系的深淺

HSL 最好用的地方：色相和飽和度不動，只改亮度，就得到同一色系的淺色、深色，不用一個一個去找色碼。

/* 色相、飽和度不動，只調亮度，就得到同一色系的深淺 */
:root {
  --brand-light: hsl(180 64% 92%); /* 淺底色 */
  --brand:       hsl(180 64% 33%); /* 主色 */
  --brand-dark:  hsl(180 64% 22%); /* 深色字 */
}
.notice { background: var(--brand-light); color: var(--brand-dark); border-left: 4px solid var(--brand); }

亮度 92% 當淺色底、33% 當主色、22% 當深色字。量出來淺底是 rgb(222, 248, 248)、深色字是 rgb(20, 92, 92)，兩個的對比約 6.9:1，一般大小的文字也讀得清楚。

color-mix()：滑鼠移上去的顏色

按鈕滑鼠移上去通常要深一點。以前要另外查一個深色的色碼，現在可以讓瀏覽器自己混：

.btn { background: var(--brand); color: #fff; }

/* 滑鼠移上去：主色加 20% 黑色，不用另外查一個深色 */
.btn:hover { background: color-mix(in srgb, var(--brand), black 20%); }

color-mix(in srgb, 主色, black 20%) 的意思是主色混 20% 的黑色。Chrome 實測，移上去的顏色約是 rgb(24, 110, 110)。以後主色改了，深色會跟著變。2023 年起 Chrome、Safari、Firefox 都支援。

對比要注意：白字放在這個藍綠色（#1e8a8a）上，我們算出來的對比是 4.15:1。WCAG 建議一般大小的文字至少 4.5:1，所以這種按鈕的字最好加粗、放大，或把按鈕底色調深一點；滑鼠移上去的深色是 6.0:1，就沒有問題。

currentColor：外框、圖示跟著文字變色

/* 外框、圖示跟著文字顏色走，換顏色只要改一個地方 */
.tag { color: #c2410c; border: 1px solid currentColor; }
.tag svg { fill: currentColor; }

currentColor 就是「這個元素目前的文字顏色」。外框和 SVG 圖示都寫 currentColor，以後只要改 color 一個地方，三個一起變。量出來外框和圖示都是文字的 rgb(194, 65, 12)。

舊的 font 標籤別再用

很久以前的網頁用 <font color> 改文字顏色，有些舊網站或從 Word 貼過來的內容還看得到：

<!-- 舊寫法：HTML5 已經廢除 font 標籤（瀏覽器還會顯示，但不該再用） -->
<font color="red">限時優惠</font>

<!-- 現在的寫法：用 class 加上 CSS -->
<span class="sale">限時優惠</span>
<style>
  .sale { color: #d92d20; }
</style>

瀏覽器還看得懂 font 標籤，但它在 HTML5 已經被廢除了。用 class 加 CSS，以後要改顏色，改 CSS 一個地方就好；WordPress 的區塊編輯器也有文字顏色的設定可以用。

延伸閱讀

• 好用的 CSS 語法技巧：半透明、圓角、陰影、字型等 15 個常用寫法
• CSS 彩色條紋怎麼做？用 linear-gradient 做多色分段色條
• CSS 文字陰影、發光、描邊怎麼寫：text-shadow、text-stroke、多層陰影範例

顏色用對了，網站看起來就整齊。正威網路行銷是 25 年經驗的基隆網頁設計工作室，提供 RWD 響應式客製化網頁設計，台北與全台客戶也歡迎來聊聊。