跳至正文

理解 Web 顏色 🎨

在建立網站時，你會看到像 #FF5733、rgb(255, 87, 51) 這樣的奇怪代碼。這些都是顏色代碼！我會用簡單的方式講解，讓初學者也能輕鬆理解。

為什麼使用顏色代碼？​

我們說「紅色」、「藍色」，但電腦需要精確的數字。

例如：

  • 說「紅色」：哪種紅色？亮紅色？深紅色？ 🤔
  • 說 #FF0000：精確的紅色！ ✅

Web 中使用的 3 種顏色表示方式​

1. HEX（十六進位）顏色 🔢​

最常見的格式！

color: #FF5733;
background: #3498db;

格式：

  • 以 # 符號開始
  • 6 位數字/字母（0-9，A-F）
  • 兩位一組：#RRGGBB
    • RR = 紅色（Red）
    • GG = 綠色（Green）
    • BB = 藍色（Blue）

範例：

#FF0000  →  紅色（Red 最大）
#00FF00  →  綠色（Green 最大）
#0000FF  →  藍色（Blue 最大）
#FFFFFF  →  白色（所有顏色最大）
#000000  →  黑色（所有顏色為 0）

2. RGB 顏色 🎨​

用紅色（Red）、綠色（Green）、藍色（Blue）的量來表示！

color: rgb(255, 87, 51);
background: rgb(52, 152, 219);

格式：

  • rgb(紅色, 綠色, 藍色)
  • 每個數字在 0~255 之間

範例：

rgb(255, 0, 0)     →  紅色
rgb(0, 255, 0)     →  綠色
rgb(0, 0, 255)     →  藍色
rgb(255, 255, 255) →  白色
rgb(0, 0, 0)       →  黑色
rgb(128, 128, 128) →  灰色

添加透明度（RGBA）：

rgba(255, 0, 0, 0.5)  →  半透明紅色
             ↑
        0.0 ~ 1.0（透明 ~ 不透明）

3. HSL 顏色 🌈​

人類最容易理解的方式！

color: hsl(9, 100%, 60%);
background: hsl(204, 70%, 53%);

格式：

  • hsl(色相, 飽和度, 亮度)
  • H（Hue）：色相（0~360 度）
  • S（Saturation）：飽和度（0~100%）
  • L（Lightness）：亮度（0~100%）

色相環（Hue）：

0° / 360°  →  紅色
60°        →  黃色
120°       →  綠色
180°       →  青色
240°       →  藍色
300°       →  洋紅

範例：

hsl(0, 100%, 50%)    →  純紅色
hsl(120, 100%, 50%)  →  純綠色
hsl(240, 100%, 50%)  →  純藍色
hsl(0, 0%, 50%)      →  灰色
hsl(0, 100%, 100%)   →  白色
hsl(0, 0%, 0%)       →  黑色

顏色格式比較​

用三種方式表示同一顏色：

🔴 亮紅色​

HEX:  #FF5733
RGB:  rgb(255, 87, 51)
HSL:  hsl(9, 100%, 60%)

🔵 藍色​

HEX:  #3498db
RGB:  rgb(52, 152, 219)
HSL:  hsl(204, 70%, 53%)

🟢 綠色​

HEX:  #2ecc71
RGB:  rgb(46, 204, 113)
HSL:  hsl(145, 63%, 49%)

何時使用哪種格式？​

使用 HEX 📝​

  • 設計師給出顏色代碼時（最常見）
  • 簡單指定顏色時
  • CSS 檔案中常用
.button {
  background-color: #3498db;
  color: #ffffff;
}

使用 RGB 🎨​

  • 需要透明度（alpha）時
  • 用 JavaScript 計算顏色時
  • 動態改變顏色時
.overlay {
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
}

使用 HSL 🌈​

  • 只想改變色相時
  • 只想調整亮度時
  • 建立相似色調的顏色時
.primary {
  background: hsl(200, 70%, 50%);
}
.primary-light {
  background: hsl(200, 70%, 70%); /* 只改變亮度 */
}
.primary-dark {
  background: hsl(200, 70%, 30%); /* 變暗 */
}

實戰範例​

範例 1：按鈕顏色 🔘​

/* 藍色按鈕 */
.button {
  background-color: #3498db;
  color: #ffffff;
}

/* 滑鼠懸停時 */
.button:hover {
  background-color: #2980b9; /* 稍深的藍色 */
}

範例 2：漸層背景 🌅​

.gradient-bg {
  background: linear-gradient(
    to right,
    #667eea,   /* 紫色 */
    #764ba2    /* 洋紅 */
  );
}

範例 3：半透明遮罩 👻​

.modal-overlay {
  background-color: rgba(0, 0, 0, 0.7); /* 70% 不透明黑色 */
}

使用顏色工具​

轉換顏色​

在 Color Converter 中：

  • HEX → RGB → HSL 轉換
  • 用顏色選擇器選擇顏色
  • 複製各種格式

使用方法：

  1. 開啟 Color Converter
  2. 用顏色選擇器選擇想要的顏色
  3. 自動產生 HEX、RGB、HSL 代碼！
  4. 複製所需格式使用

建立 CSS 漸層​

在 Gradient Generator 中：

  • 用 2 種或更多顏色製作漸層
  • 設定方向
  • 自動產生 CSS 代碼

顏色選擇技巧 💡​

1. 顏色和諧​

互補色（對面的顏色）：

紅色(0°) ↔ 青色(180°)
藍色(240°) ↔ 黃色(60°)

類似色（相似的顏色）：

hsl(200, 70%, 50%)  藍色
hsl(210, 70%, 50%)  偏紫的藍色
hsl(190, 70%, 50%)  偏青的藍色

2. 明度對比​

為了讓文字清晰可見：

/* 良好對比 ✅ */
.good-contrast {
  background: #000000;  /* 黑色 */
  color: #ffffff;       /* 白色 */
}

/* 不良對比 ❌ */
.bad-contrast {
  background: #cccccc;  /* 淺灰色 */
  color: #ffffff;       /* 白色 - 看不清！ */
}

3. 保持一致性​

相似的元素使用相似的顏色：

/* Primary 顏色系列 */
.primary       { background: hsl(200, 70%, 50%); }
.primary-light { background: hsl(200, 70%, 70%); }
.primary-dark  { background: hsl(200, 70%, 30%); }

/* Success 顏色系列 */
.success       { background: hsl(120, 60%, 50%); }
.success-light { background: hsl(120, 60%, 70%); }
.success-dark  { background: hsl(120, 60%, 30%); }

常用顏色代碼​

基本顏色​

紅色： #FF0000  rgb(255, 0, 0)    hsl(0, 100%, 50%)
綠色： #00FF00  rgb(0, 255, 0)    hsl(120, 100%, 50%)
藍色： #0000FF  rgb(0, 0, 255)    hsl(240, 100%, 50%)
黃色： #FFFF00  rgb(255, 255, 0)  hsl(60, 100%, 50%)
洋紅： #FF00FF  rgb(255, 0, 255)  hsl(300, 100%, 50%)
青色： #00FFFF  rgb(0, 255, 255)  hsl(180, 100%, 50%)

無彩色​

白色：     #FFFFFF  rgb(255, 255, 255)
淺灰色：   #CCCCCC  rgb(204, 204, 204)
灰色：     #808080  rgb(128, 128, 128)
深灰色：   #333333  rgb(51, 51, 51)
黑色：     #000000  rgb(0, 0, 0)

流行顏色​

天藍色： #87CEEB  rgb(135, 206, 235)
粉紅色： #FFC0CB  rgb(255, 192, 203)
橙色：   #FFA500  rgb(255, 165, 0)
紫色：   #800080  rgb(128, 0, 128)
金色：   #FFD700  rgb(255, 215, 0)

簡寫 HEX 代碼​

如果相同數字重複，可以簡寫：

#FF0000  →  #F00   （紅色）
#00FF00  →  #0F0   （綠色）
#0000FF  →  #00F   （藍色）
#FFFFFF  →  #FFF   （白色）
#000000  →  #000   （黑色）
#CCCCCC  →  #CCC   （灰色）

使用顏色名稱​

CSS 中也可以使用顏色名稱：

color: red;
color: blue;
color: green;
color: white;
color: black;

但最好使用精確的顏色代碼！

考慮無障礙性 ♿​

檢查對比度​

  • 普通文字：最小 4.5:1
  • 大文字：最小 3:1

良好範例：

background: #000000;  /* 黑色 */
color: #FFFFFF;       /* 白色 - 對比度 21:1 */

不良範例：

background: #777777;  /* 灰色 */
color: #888888;       /* 稍亮的灰色 - 對比度太低 */

實踐：顏色實驗​

實踐 1：相同顏色，不同亮度​

.color-1 { background: hsl(200, 70%, 20%); } /* 很暗 */
.color-2 { background: hsl(200, 70%, 40%); } /* 暗 */
.color-3 { background: hsl(200, 70%, 60%); } /* 普通 */
.color-4 { background: hsl(200, 70%, 80%); } /* 亮 */

實踐 2：相同亮度，不同顏色​

.color-1 { background: hsl(0, 70%, 50%); }   /* 紅色 */
.color-2 { background: hsl(120, 70%, 50%); } /* 綠色 */
.color-3 { background: hsl(240, 70%, 50%); } /* 藍色 */
提示

在 Color Converter 中直接改變顏色進行實驗！

常見問題（FAQ）​

Q1：HEX 中的數字和字母是什麼？​

A：使用十六進位制。

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
                                ↑
                        A=10, B=11 ... F=15

Q2：RGB 為什麼到 255？​

A：電腦用 8 位元（0~255）表示每種顏色。

0 = 最小（無顏色）
255 = 最大（顏色滿）

Q3：如何建立透明顏色？​

A：使用 RGBA 或 HSLA：

rgba(255, 0, 0, 0.5)   /* 半透明紅色 */
hsla(0, 100%, 50%, 0.5) /* 半透明紅色 */

Q4：如何建立漸層？​

A：使用 Gradient Generator 或：

background: linear-gradient(to right, #667eea, #764ba2);

下一步 🚀​

理解顏色後：

  1. ✅ Color Converter - 練習顏色轉換
  2. ✅ Gradient Generator - 建立漸層
  3. ✅ Shadow Generator - 建立顏色陰影
  4. ✅ Border Radius Generator - 建立圓角

總結​

Web 顏色並不難！

記住要點：

  • HEX：#RRGGBB - 最常見
  • RGB：rgb(紅色, 綠色, 藍色) - 可新增透明度
  • HSL：hsl(色相, 飽和度, 亮度) - 人類容易理解

經常用 Color Converter 工具實驗，很快就會熟悉！ 🎨

顏色是決定網站氛圍的重要元素。嘗試各種顏色吧！