顏色選擇器
線上顏色選擇工具，HEX、RGB、HSL 格式互轉，生成配色方案
什麼是顏色選擇器？
顏色選擇器用於選擇、查看和轉換設計與前端開發中的顏色。同一個顏色可以用多種格式表示：HEX 寫法精簡，常用於 CSS；RGB 描述紅、綠、藍三個通道；HSL 用色相、飽和度與亮度表達，更適合做明暗、飽和度與配色調整。這個工具適合把品牌色轉成程式碼、比較不同顏色模型、圍繞一個主色產生小型配色，或檢查互補色、鄰近色等相關色板。顏色選擇不只是好不好看，還關係到對比度、可讀性、無障礙、印刷效果與螢幕校準。重要介面顏色應放到最終背景上測試，並確認是否符合可及性要求。
使用方式
使用方法
- 點選顏色選擇器選取顏色，或在輸入欄位輸入顏色值
- 查看 HEX、RGB 及 HSL 格式的轉換結果
- 點選格式旁的複製按鈕複製顏色值
- 參考配色方案取得互補色、類似色等配色建議
- 查看深淺變化，取得同一顏色的深色及淺色變體
色彩提示
- 將顏色用於文字、圖示或控制項前，請先檢查對比度；視覺上好看的顏色仍可能不符合無障礙標準。
- 調整亮度或飽和度時使用 HSL，將值複製到 CSS 或 design tokens 時使用 HEX 或 RGB。
使用場景
技術原理
本工具中的所有數值都位於 IEC 61966-2-1 定義的 sRGB 色彩空間中，這是 CSS 十六進制字面值、rgb() 函數以及任何 <canvas> 讀回的預設色彩空間。HEX #RRGGBB 是一個壓縮的 24 位元整數（每通道 8 位元，0-255）；HEX #RRGGBBAA 額外增加一個 alpha 位元組；rgb()/rgba() 以整數或百分比暴露相同的通道；hsl()/hsla() 切換到柱面坐標，色相以度數表示 [0, 360)，飽和度和亮度在 [0%, 100%] 範圍內。RGB 轉 HSL 的計算方式為 L = (max + min) / 2，S = (max - min) / (1 - |2L - 1|)（非零色度時），H 由六段分段公式根據哪個通道為最大值來決定。反向 HSL 轉 RGB 使用標準的 t = L < 0.5 ? L(1+S) : L+S-LS 演算法，然後將每個通道縮放回 0-255。 即時揀色器使用原生 <input type="color"> 元素，在支援的瀏覽器上還暴露 EyeDropper API（Chrome 95+、Edge 95+；截至 2026 年 Safari/Firefox 尚未支援）。EyeDropper 觸發作業系統級別的螢幕取樣，返回 sRGB 十六進制字串，但無法在跨來源 iframe 或 DRM 保護的介面上取樣。配色方案產生透過旋轉 HSL 色相實現：互補色為 +180 度，三等分色為 +/-120 度，類似色為 +/-30 度，分裂互補色為 +150 和 +210 度。淺色調和深色調以固定增量調整亮度（淺色調通常向白色方向 +10%，深色調向黑色方向 -10%），同時保持色相和飽和度不變。 對比度遵循 WCAG 2.1 SC 1.4.3/1.4.6：每個通道使用分段 sRGB 傳遞函數進行 gamma 解碼（0.03928 以下為線性段，以上為 2.4 次方），以亮度權重 0.2126R + 0.7152G + 0.0722B 計算相對亮度，然後比值為 (L_lighter + 0.05) / (L_darker + 0.05)。閾值為：AA 一般文字 4.5:1，AA 大文字和 UI 元件 3:1，AAA 7:1。需注意 sRGB 是每通道 8 位元的空間，因此使用 Display P3（Apple）或 Rec. 2020 的廣色域顯示器在渲染相同十六進制碼時，原色可能明顯更飽和；對於跨裝置的色彩關鍵工作，應為顏色附加色彩配置檔，而非依賴原始 RGB 三元組。
- sRGB 色彩空間符合 IEC 61966-2-1；每通道 8 位元，共可表示 16,777,216 種顏色。
- HSL 轉 RGB 使用 t = L<0.5 ? L(1+S) : L+S-LS，然後按通道進行 hue2rgb() 查找。
- EyeDropper API 需要 Chrome/Edge 95+ 和使用者手勢；跨來源 iframe 介面會被封鎖。
- WCAG 對比度：gamma 解碼 sRGB，以 0.2126R + 0.7152G + 0.0722B 加權亮度，然後計算 (L1+0.05)/(L2+0.05)。
- 互補色 = 色相 +180 度，三等分色 = +/-120 度，類似色 = +/-30 度，分裂互補色 = +150/+210 度。
- canvas.getImageData 返回 Uint8ClampedArray RGBA 像素，但要求 canvas 為同來源（不可使用受污染的圖片）。
- Display P3 / Rec. 2020 廣色域顯示器渲染相同十六進制碼時原色更飽和——色彩關鍵工作請附加配置檔。
範例
選取品牌主色並複製三種格式
選取： Tailwind blue-600
HEX: #2563eb
RGB: rgb(37, 99, 235)
HSL: hsl(217, 91%, 53%)
依照周邊程式碼選擇對應格式即可。三種數值
描述同一個 sRGB 色彩（IEC 61966-2-1，每通道 8 bits）；
本頁以標準 RGB <-> HSL 數學運算進行轉換。產生互補配色
基礎色： #2563eb（藍）
互補色： #eb7a25（橘） 色相 +180 度
類比色 1： #5a25eb（紫） 色相 +60 度
類比色 2： #256beb（天藍） 色相 -30 度
三等分色 1： #25eb56（綠） 色相 +120 度
三等分色 2： #eb2525（紅） 色相 -120 度
互補色適合高對比的強調，類比色適合
和諧背景，三等分色則適合鮮豔插畫。
明度與飽和度維持不變，僅旋轉色相。上線前檢查 WCAG 對比度
前景：#1f2937（gray-800，相對亮度 0.022）
背景：#ffffff（白色， 相對亮度 1.000）
對比度：(1.000 + 0.05) / (0.022 + 0.05) = 14.5:1
通過 WCAG AAA 一般文字（>= 7:1）與大字（>= 4.5:1），
也達到 UI 元件 3:1 的門檻。所有上線的文字／背景
組合都應該執行同樣的檢查；本頁以分段式 sRGB
轉換函式計算相對亮度（gamma 解碼，加權 0.2126R + 0.7152G +
0.0722B）。常見問題
支援哪些色彩格式？
HEX（#RRGGBB）、RGB（rgb(R, G, B)）和 HSL（hsl(H, S%, L%)）。頁面還會根據你選的顏色，顯示互補色、類比色、三等分色、分割互補色等配色方案，以及色調（tint）和暗色調（shade）。
HSL 和 HSV 有什麼差別？
兩者都把顏色拆成色相（0-360°）、飽和度，以及一個類似亮度的分量。HSL 的第三個維度是亮度（lightness）：50% 是飽和度最高，0% 為黑、100% 為白。HSV 的第三個維度是明度（value）：100% 是飽和度最高，0% 為黑，沒有白。HSL 對於配 tint 和 shade 較直觀，HSV 比較貼近畫家調色的方式。
顏色換算的精準度如何？
HEX、RGB、HSL 是精確的數學換算，描述的都是同一個 sRGB 色彩。頁面用標準公式互轉，不會有精度損失。
同一個 HEX 在每個螢幕上看起來都一樣嗎？
不會。sRGB 是網頁的預設色彩空間；廣色域螢幕（P3、Adobe RGB）若沒有色彩管理，同一個 HEX 看起來會更飽和。校色狀態也會影響。重要的顏色請在目標裝置上實測，做品牌設計時尤其要注意。
配色方案是怎麼產生的？
方案會旋轉 HSL 的色相，飽和度與亮度保持不變。互補色為 +180°、三等分色為 +120° / +240°、類比色為 ±30°、分割互補色為 +150° / +210°。Tint 把亮度往 100%（白）推，Shade 則往 0%（黑）推。
這個取色器只能用於螢幕上的顏色嗎？
它運作在 sRGB 色彩空間，正是網頁與多數消費級螢幕適用的模型。對 CSS 與 UI 設計工作而言，這些換算是標準且可靠的。
有任何資料會上傳嗎？
不會。整個頁面是純瀏覽器 JavaScript，色彩數值不會被儲存或傳送。