顏色選擇器

什麼是顏色選擇器？

顏色選擇器（Color Picker）是一款線上工具，可以讓您直觀地選擇網頁設計、圖形設計、UI/UX開發所需的顏色，並將其轉換為多種格式（HEX、RGB、HSL）。透過色相環和飽和度/明度選擇器，您可以直觀地找到所需的顏色，而且支援透明度（Alpha）調整，因此也可以產生RGBA、HSLA格式的顏色代碼。

該工具直接在瀏覽器中執行，無需安裝任何程式。支援EyeDropper API的瀏覽器（Chrome、Edge）還可以使用吸管功能，直接從螢幕任何區域擷取顏色，快速獲取設計參考或圖片中的顏色。

適用場景

• 網頁開發 – 快速查找並複製用於CSS樣式表的準確顏色代碼（HEX、RGB、HSL）
• UI/UX設計 – 為應用程式或網站的按鈕、背景、文字建構和諧的配色方案
• 平面設計 – 為海報、橫幅、社群媒體圖片選擇和搭配顏色
• 品牌形象 – 定義公司或專案的品牌顏色，並以多種格式記錄
• 無障礙測試 – 檢查顏色值以驗證文字和背景色之間的對比度
• 參考色擷取 – 使用EyeDropper直接從喜歡的網站或圖片中擷取顏色
• 簡報製作 – 查找顏色代碼，為簡報材料套用一致的顏色主題

主要功能

• 色相環選擇 – 在360度色相環上直觀地選擇所需的色相（Hue）。透過滑鼠拖曳或觸控平滑瀏覽顏色。
• 飽和度/明度2D選擇器 – 基於所選色相同時調整飽和度（Saturation）和明度（Lightness）。可自由選擇從明亮粉彩色調到深暗顏色。
• 透明度（Alpha）滑桿 – 從0%到100%調整透明度，建立RGBA、HSLA格式的半透明顏色。適用於疊加層和漸層效果。
• 多種顏色格式支援 – 即時轉換並顯示HEX、RGB、HSL三種格式。套用透明度時自動切換為RGBA、HSLA格式。
• EyeDropper螢幕取色 – 在Chrome、Edge瀏覽器中點擊螢幕任何位置直接擷取顏色。還可以從其他分頁的圖片或桌面獲取顏色。
• 和諧色自動產生 – 基於所選顏色自動產生互補色、相似色、三色配色、單色調色盤。輕鬆找到基於色彩理論的和諧配色組合。
• CSS程式碼一鍵複製 – 將所選顏色以color: #D4AF37;格式的CSS程式碼立即複製。可選擇HEX、RGB、HSL中的任意格式。
• 顏色歷史儲存 – 最近選擇的20種顏色會自動儲存。關閉瀏覽器後歷史記錄仍然保留，可以重新使用之前用過的顏色。

使用方法

1. 選擇色相 – 在色相環上點擊或拖曳選擇所需的基本顏色區域（紅、橙、黃、綠、藍、紫等）。
2. 調整飽和度/明度 – 在下方的正方形區域中，左右移動調整飽和度，上下移動調整明度。右上角是最鮮豔明亮的顏色。
3. 設定透明度 – 如需半透明效果，請調整Alpha滑桿。100%為不透明，0%為完全透明。
4. 查看並複製顏色值 – 在右側面板查看HEX、RGB、HSL值，點擊各格式旁的複製按鈕將其複製到剪貼簿。
5. 使用CSS程式碼 – 在底部的CSS程式碼區域選擇所需格式（HEX/RGB/HSL），使用「複製CSS」按鈕複製可直接貼上到樣式表的程式碼。

色彩理論與和諧色的理解

色相環的原理

色相環源於1666年艾薩克·牛頓用稜鏡分解光線的實驗。現代色相環分為以紅-黃-藍為基礎的傳統色相環（RYB）和使用紅-綠-藍的數位色相環（RGB）。本工具基於HSL（Hue-Saturation-Lightness）顏色模型，色相（Hue）用0°至360°的角度表示。

HSL vs RGB vs HEX

• HEX（十六進位） – 網路上最廣泛使用的格式。以#RRGGBB形式表示，紅、綠、藍各用00~FF（0~255）表示。例如：#D4AF37是金色。
• RGB（Red, Green, Blue） – 基於光的三原色，各通道用0~255的值表示。在CSS中使用rgb(212, 175, 55)格式。
• HSL（Hue, Saturation, Lightness） – 更接近人類顏色感知方式的模型。由色相（0°~360°）、飽和度（0%~100%）、明度（0%~100%）組成。在同一色相下更容易調整亮度或鮮豔度。

和諧色的類型

• 互補色（Complementary） – 色相環上正對面的兩種顏色。產生強烈對比，適合吸引目光。例如：藍色（240°）的互補色是黃色（60°）。
• 相似色（Analogous） – 色相環上相鄰的顏色。自然界中常見，給人和諧舒適的感覺。例如：橙-黃-黃綠。
• 三色配色（Triadic） – 色相環三等分位置的顏色。提供平衡的對比度，比互補色更柔和。例如：紅-黃-藍。
• 單色調（Monochromatic） – 同一色相中僅改變飽和度和明度的顏色。給人簡潔精緻的印象，常用於品牌設計。

透明度（Alpha）的應用

Alpha通道調整顏色的不透明度。0%為完全透明，100%為完全不透明。在網頁設計中，半透明顏色常用於疊加效果、漸層、懸停狀態等。RGBA和HSLA格式從CSS3開始支援，包含透明度的HEX代碼（#RRGGBBAA）在現代瀏覽器中得到支援。

關於EyeDropper API

EyeDropper API是一種Web API，允許在瀏覽器中直接擷取螢幕上的顏色。此功能目前支援Chrome 95+、Edge 95+版本。Firefox和Safari尚不支援。

使用EyeDropper不僅可以從目前分頁擷取顏色，還可以從其他分頁、其他應用程式甚至桌面擷取顏色。非常適合快速從設計參考圖、競品網站、靈感圖片中獲取準確的顏色值。

使用技巧

• 記錄品牌顏色 – 選擇公司或專案的主要顏色後，記錄所有HEX、RGB、HSL值，以便在各種環境（網頁、印刷、影片）中使用一致的顏色。
• 考慮無障礙性 – 選擇文字和背景顏色時，確保明度差異足夠。根據WCAG標準，普通文字建議對比度4.5:1以上，大字體建議3:1以上。
• 建構配色方案 – 選擇一個主色後，利用和諧色功能可以輕鬆建立專業的配色方案。通常由1個主色、1-2個輔助色、1個強調色組成。
• 使用半透明效果 – 在背景圖片上放置文字時，使用半透明疊加層（如：rgba(0, 0, 0, 0.5)）可以提高可讀性。

常見問題