顏色工具/拾色器
在線顏色拾取工具，支持HEX、RGB、HSL多格式互轉，實時預覽顏色效果
hsl(217, 91%, 60%)
使用說明
- 1 使用顏色選擇器選取顏色，或直接輸入HEX/RGB值
- 2 查看HEX、RGB、HSL三種格式的顏色值
- 3 點擊對應格式旁的"複製"按鈕複製顏色值
相關工具
關於此工具
在線拾色器支持 HEX（#RRGGBB）、RGB（rgb(255, 0, 0)）和 HSL（hsl(0, 100%, 50%)）三種顏色格式的實時互轉，任意修改其中一種格式，其他兩種自動同步更新，消除手動換算的繁瑣。
適用場景：前端開發中將設計稿的 HEX 顏色轉為 RGB 供 CSS 使用、UI 設計師調整色相/飽和度時直接操作 HSL 參數、品牌色管理中統一輸出多種格式的色值、以及在顏色調試時快速對比不同格式下的寫法差異。
HSL 格式相比 HEX 和 RGB 的最大優勢是符合人類直覺：H（色相）決定顏色種類，S（飽和度）控制鮮豔程度，L（亮度）調節深淺，調色時只需修改單一維度，不必在三個通道之間反覆試錯。
常見問題
HEX 顏色的 3 位縮寫和 6 位完整寫法有什麼區別？ +
#RGB 三位縮寫等價於 #RRGGBB，即每位重複一次。#F00 等同於 #FF0000（純紅）。只有當 R、G、B 每個分量的兩位數字相同時才能縮寫。CSS 兩種寫法均有效，但建議統一使用 6 位寫法以避免混淆。
CSS 中 rgba 和 rgb 的區別是什麼？ +
rgba 比 rgb 多一個 a（alpha）透明度通道，取值 0（完全透明）到 1（完全不透明）。例如 rgba(255, 0, 0, 0.5) 是半透明紅色。CSS 現代語法也支持 rgb(255 0 0 / 50%) 的空格分隔寫法，兩種方式均有效。
為什麼設計稿給的顏色在屏幕上看起來不一樣？ +
可能原因：顯示器色彩空間不同（sRGB vs P3）、顯示器未校色、屏幕亮度和色溫設置差異，或 Figma/Sketch 使用了 P3 廣色域色彩空間而瀏覽器默認渲染 sRGB。拾色器工具基於標準 sRGB 色彩空間，跨設備顏色一致性需校色顯示器保證。
HSL 中的色相（H）值是怎麼分佈的？ +
H 的取值範圍是 0°-360°，對應色輪上的顏色：0°/360° 是紅色，60° 是黃色，120° 是綠色，180° 是青色，240° 是藍色，300° 是洋紅色。調整品牌色的配色方案時，互補色相差 180°，類似色相差 30° 以內。
設計系統中應該用哪種顏色格式存儲品牌色？ +
推薦 HEX 格式存儲基礎色值（簡潔、無歧義），HSL 格式用於生成衍生色（如同色系的深色/淺色變體只需調整 L 值）。在 CSS 變量（Custom Properties）中存儲 HSL 分量值（--brand-h: 220; --brand-s: 90%;）可以方便地動態生成配色。