🎨 顏色選擇器
選顏色、看色碼、轉換 HEX/RGB/HSL。
📚 顏色選擇器是什麼？給門外漢的完整說明
你設計網頁，需要「金色」；你畫圖，需要「天空藍」；你調 CSS，需要「#D4AF37」。這就是「顏色選擇器」。這篇文章一次講清楚。
一、一句話講完
顏色選擇器 = 選顏色、看色碼、轉換色碼。
支援 HEX、RGB、HSL 三種色碼。
二、三種色碼
| 格式 | 例子 | 用途 |
|---|---|---|
| HEX | #D4AF37 | 網頁 CSS |
| RGB | rgb(212, 175, 55) | 程式、CSS |
| HSL | hsl(45, 66%, 52%) | 設計、調色 |
三、HEX 是什麼？
HEX 是「十六進位」色碼，格式 #RRGGBB，每兩位代表紅、綠、藍（00~FF）。例如 #FF0000 = 純紅、#00FF00 = 純綠、#0000FF = 純藍。
四、RGB 是什麼？
RGB 是「紅、綠、藍」三原色，每個 0~255。例如 rgb(255, 0, 0) = 純紅。
五、HSL 是什麼？
HSL 是「色相、飽和度、亮度」：
- H（Hue）：色相，0~360（0=紅、120=綠、240=藍）。
- S（Saturation）：飽和度，0~100%（0=灰、100=鮮豔）。
- L（Lightness）：亮度，0~100%（0=黑、50=正常、100=白）。
六、常見誤解
- ❌ 誤解：HEX 和 RGB 完全不同。
✅ 事實：HEX 和 RGB 是同一件事的不同表示（#FF0000 = rgb(255,0,0)）。 - ❌ 誤解：HSL 比 RGB 難。
✅ 事實：HSL 更直覺（調色相、飽和、亮度）。 - ❌ 誤解：顏色只有紅綠藍。
✅ 事實：顏色有「色相、飽和、亮度」三個維度。 - ❌ 誤解：互補色一定好看。
✅ 事實：互補色對比強烈，要謹慎使用。 - ❌ 誤解：顏色選擇器只能選色。
✅ 事實：也能轉換色碼、產生配色。
七、這個工具能幫你做什麼？
- 選顏色：拖動滑桿或用顏色輸入框
- 看色碼：HEX、RGB、HSL 三種
- 一鍵複製：複製色碼
- 完全離線：不上傳任何資料
八、常見問題（FAQ）
❓ 常見問題（FAQ）
顏色選擇器是什麼？
顏色選擇器是「選顏色、看色碼、轉換色碼」的工具。支援 HEX、RGB、HSL。
HEX、RGB、HSL 差在哪？
HEX 是 #FF0000 格式（網頁用），RGB 是 rgb(255,0,0)（程式用），HSL 是 hsl(0,100%,50%)（設計用）。
怎麼選顏色？
拖動顏色滑桿，或用顏色輸入框選顏色，即時顯示色碼。
什麼是互補色？
互補色是「色環上相對的顏色」，搭配使用會有強烈對比（紅 vs 綠）。
這個工具會上傳我的資料嗎？
不會。所有轉換都在你的瀏覽器完成，不上傳任何資料。