色彩選取器 - 取得 HEX、RGB 與 HSL 色碼 | Morph

選一個顏色，取得色碼

Morph 的色彩選取器讓你用視覺方式挑選任意顏色，並即時讀取你實際會用到的色碼格式：HEX（`#3A7BD5`）、RGB（`rgb(58, 123, 213)`）、HSL（`hsl(214, 64%, 53%)`）。在色域中拖曳，用色相滑桿微調，再把數值直接複製到你的 CSS、設計檔案，或任何需要的地方。

三種格式，同一個真相來源

這三組色碼描述的是同一個顏色——只是寫法不同，各有各的用途：

HEX 是最精簡的格式，適合貼進大多數 CSS 與設計工具。
RGB 把紅、綠、藍三個色版（各 0–255）分別列出，適合你要調整單一色版，或處理需要各自數值的程式碼時使用。
HSL 描述色相、飽和度、明度——想讓顏色變亮一點、變柔和一點，或朝相鄰色相偏移時，這是最直覺的格式，不必靠試誤法調整 hex 數值。

無論你怎麼調整顏色，三組色碼都會同步更新，需要哪種格式直接取用即可。

為真實工作流程打造

設計師用它確定調色盤，把精確數值複製到設計檔或風格指南裡。前端開發者用它取得按鈕的 HEX 值，或把設計師給的 RGB 轉成 HSL 來製作 hover 狀態。想微調主題色、圖表顏色或郵件範本的人，也能精準鎖定想要的色調，一鍵複製。因為 HSL 就在 HEX 旁邊，製作基礎色的亮色與暗色變體，比死盯著 hex 數字猜要輕鬆得多。

在你的瀏覽器裡運作，完全私密

色彩選取器是純瀏覽器程式碼——色彩運算與介面都在你的裝置上執行。沒有上傳、不用帳號，也不會有任何資料傳到伺服器。載入速度快，頁面開啟後即使離線也能繼續使用，因為選色與計算色碼從來不需要網路連線。

幾個實用小提醒

複製 HEX 值後，可以直接貼進 CSS 使用。如果需要帶透明度的顏色，轉成 RGB，再到程式碼裡加上 alpha 色版（`rgba(...)`）。想打造一致的調色盤，選定一個基礎色，運用 HSL 的明度數值，在保持色相與飽和度不變的情況下上下微調明度，就能產生一系列色調與明暗變化——這樣一組顏色看起來會像同一家族，而不是隨機拼湊。

使用方法

選擇顏色 — 在色域中拖曳設定飽和度與亮度，再用色相滑桿設定基礎色。
讀取色碼 — 移動時 HEX、RGB、HSL 數值會同步更新，讓你隨時看到目前顏色的三種格式。
複製你需要的格式 — 複製 HEX 用於大多數 CSS 與設計工作，複製 RGB 調整色版，或複製 HSL 製作亮色與暗色變體。
貼到你的專案裡 — 把數值直接貼進你的樣式表、設計工具或主題設定。

常見問題

它能提供哪些色彩格式？

每次選色都會顯示 HEX、RGB、HSL，並保持同步，你可以複製專案需要的任一格式。

為什麼要用 HSL 而不是 HEX？

HSL 能讓你直覺地調整顏色——調高明度製作淺色調、調低製作深色調，或偏移色相——不必憑感覺猜 hex 數值。

可以取得帶透明度的顏色嗎？

選好顏色後複製 RGB 數值，再到程式碼中以 rgba(...) 加上 alpha 色版，設定你想要的透明度。

它會把我的資料傳到別的地方嗎？

不會。選取器完全在你的瀏覽器中執行，沒有上傳，也不會有任何資料傳到伺服器——頁面載入後即使離線也能運作。

要怎麼建立一致的調色盤？

選定一個基礎色，運用它的 HSL 數值，在保持色相與飽和度不變的情況下上下微調明度，就能做出感覺像一整組的色調與明暗變化。