選色器與轉換器
選取顏色並在 HEX、RGB、HSL 與 OKLCH 之間轉換。
⚠ This OKLCH value falls outside the sRGB gamut and was clamped.
Pick a color from an image
WCAG contrast
Color schemes & harmonies
Tints & shades
Color blindness simulation
Runs entirely in your browser. Nothing is uploaded.
完全在瀏覽器中運行的免費色彩轉換器與拾色器
這款免費色彩轉換器可將任何顏色即時轉換為您所需的所有格式。貼上一個十六進位碼、輸入RGB值、拖動色輪，或用滴管對任意像素取樣 — 即可同時看到HEX、RGB、HSL、HSV、CMYK和OKLCH的結果。每個欄位均可編輯且雙向同步：修改任一格式，其他所有格式將即時更新，無需重新載入頁面，無需伺服器請求，零延遲。
ColorHexa.com、RapidTables、convertingcolors.com和cssgradient.io等網站各自涵蓋了部分功能。本工具將日常使用場景——格式轉換、視覺化取色、無障礙檢查和調色盤生成——整合到一個即時介面中，只需輸入一次顏色即可看到所有結果。所有處理均在本地進行，不上傳任何資料。
雙向即時轉換 HEX、RGB、HSL、HSV、CMYK 和 OKLCH
每個欄位均可編輯且保持同步。貼上十六進位碼，RGB、HSL、HSV、CMYK和OKLCH的值會立即更新。修改任意一個，其餘隨即跟進。這使它同時成為一個快速的HEX轉RGB轉換器、RGB轉HEX工具、RGB轉CMYK轉換器以及HSL/HSV/OKLCH轉換器，全部集中在一個視圖中 — 非常適合設計檔案提供一種格式而樣式表、印刷作業或設計系統需要另一種格式的情況。
所有輸出均為有效的HTML和CSS值 — #hex、rgb(…)、hsl(…)、hsv(…)、cmyk(…)和oklch(…) — 每個都配有一鍵複製按鈕。工具還會自動識別最接近的CSS命名顏色，讓您能即時描述色調，或確認自訂十六進位碼是否與標準關鍵字相符。
從圖片中取色 — 或直接從螢幕上取色
需要從照片、Logo、螢幕截圖或設計稿中獲取精確顏色？使用圖片取色器：上傳檔案、拖放，或從剪貼簿貼上（Ctrl+V / Cmd+V），然後將滑鼠移到圖片上並點擊即可擷取任意像素。內建的放大鏡可放大顯示以實現像素級精準取色，每次點擊的顏色都會儲存在「從圖片取色」條中，讓您無需擔心遺失之前的取樣而從單張圖片建立調色盤。圖片透過HTML canvas在本地處理，永遠不會離開您的裝置 — 在包括Firefox和Safari在內的所有瀏覽器中均可使用。
更喜歡從螢幕其他地方取色？滴管在Chrome 95+和Edge 95+中透過原生EyeDropper API對螢幕上的任意像素取樣 — 點擊它，指向螢幕上任意像素，該顏色即時載入到所有欄位中。最近使用顏色條和互動式色輪提供了完整的取色選項，無需安裝任何軟體。
配色方案、色彩和諧、色調與陰影
將一種顏色擴展為完整調色盤。工具基於色輪和諧關係生成六種匹配的配色方案：互補色、類似色、三角色、四角色、分裂互補色和單色。點擊任意色塊將其設為新的基準色並繼續探索，使工具成為建立品牌一致組合的快速調色盤產生器。
色調與陰影比例尺從基準色生成一系列更淺和更深的步驟 — 適用於懸停狀態、啟用狀態、停用狀態、邊框和背景填充。點擊任意步驟將其設為活動顏色並顯示完整的格式分解。調色盤生成和色調/陰影比例尺在每次顏色變化時無需伺服器請求即可即時更新。
WCAG對比度檢查與色盲模擬
無障礙功能內建於每個顏色選擇中。WCAG對比度檢查器計算您的顏色與白色和黑色背景之間基於亮度的對比度比值，然後顯示一般文字、大型文字和UI元件的AA和AAA通過/失敗徽章 — WCAG 2.1的三個等級，用於確定前景/背景顏色對是否符合無障礙標準。在您調整顏色時即時更新，無需切換到其他工具。
色盲模擬器預覽您的顏色在患有紅色盲（Protanopia）、綠色盲（Deuteranopia）、藍色盲（Tritanopia）和全色盲（Achromatopsia）的人眼中的效果 — 使用標準Brettel/Viénot模擬演算法計算並即時更新。對比度檢查和色盲模擬相結合，有助於確保您的設計選擇對每位觀眾都保持清晰可辨。
了解OKLCH — CSS色彩的未來
OKLCH是一個感知均勻的色彩空間，透過CSS Color Level 4規格進入了主流CSS。它將顏色表示為明度(L)、彩度(C)和色相(H)，其中明度根據人類感知進行校準，而非線性光能量。這意味著具有相同L值的兩種顏色，無論色相如何，在人眼中看起來都一樣亮 — 這在HSL或RGB中並不成立。對於建立系統化調色盤的設計師來說，這意味著您可以為「主要背景」定義一個L值，將其應用於調色盤中的每種色相，無需手動調整即可獲得視覺上均衡的結果。
OKLCH還描述了比sRGB更大的色域 — 它可以表示大多數十六進位、RGB和HSL值所使用的sRGB三角形之外的Display P3和Rec.2020顏色。現代瀏覽器（Chrome、Safari、Firefox）現在原生支援oklch() CSS函式，使OKLCH成為CSS色彩工作面向未來的格式。當您輸入的OKLCH值超出sRGB範圍並會被舊瀏覽器截斷時，本工具會顯示色域警告，讓您在部署到生產環境前提早得到提醒。
Google拾色器、Adobe Color和線上工具的免費替代品
大多數拾色器都埋藏在更大的產品中。Google拾色器僅出現在特定查詢的搜尋結果中，無法加入書籤或獨立使用。Adobe拾色器內建於Photoshop、Illustrator或Adobe Color（color.adobe.com），需要Adobe帳戶並將資料同步到Adobe伺服器。ColorHexa和RapidTables是參考網站而非互動工具。convertingcolors.com支援小眾色彩空間但缺乏取色和調色盤功能。cssgradient.io適合漸層生成但不適合單色管理。
這是一款獨立的免費拾色器和色彩轉換器，一鍵即可開啟，適用於任何裝置，無需登入，完全在您的瀏覽器中運行。無論您是需要配對品牌十六進位碼的開發人員、調整HSL調色盤的設計師、檢查CMYK近似值的印刷專業人員，還是驗證WCAG對比度的無障礙工程師 — 本工具在一個快速、私密的頁面上完成所有工作。OKLCH支援、無障礙檢查和調色盤生成均預設包含，這些功能大多數替代品收費或根本不提供。
Frequently asked questions
這款色彩轉換器是免費的嗎？
是的 — 完全免費，無需註冊、無需帳戶、無使用限制。它完全在您的瀏覽器中運行，因此您選取、貼上或採樣的顏色永遠不會離開您的裝置。無需安裝任何內容，不需要訂閱。所有功能 — 轉換、滴管、圖片取色器、WCAG對比度檢查、色調與陰影、色盲模擬和配色方案生成 — 從第一次訪問起即可免費使用，無需帳戶。
如何將HEX代碼轉換為RGB？
將您的十六進位碼（帶或不帶前導#）貼上到HEX欄位中，RGB、HSL、HSV、CMYK和OKLCH值會立即更新。例如，貼上#3b82f6，您會立即在RGB欄位中看到rgb(59, 130, 246)，在HSL欄位中看到hsl(217, 91%, 60%)。轉換是雙向的：輸入RGB值，HEX和所有其他欄位以同樣的方式更新。
此工具可以在哪些色彩格式之間轉換？
該工具在六種格式之間進行雙向轉換：HEX（HTML和CSS中使用的#rrggbb代碼）、RGB（紅綠藍值0–255）、HSL（色相0–360°，飽和度和亮度為百分比）、HSV/HSB（色相-飽和度-明度，大多數設計應用程式拾色器使用的模型）、CMYK（列印預覽的青品黃黑百分比）和OKLCH（現代感知均勻色彩空間）。修改任意欄位，其他五個立即更新。
我可以從圖片或照片中取色嗎？
可以 — 這是一個完整的圖片拾色器。上傳照片、拖放，或從剪貼簿貼上（Ctrl+V / Cmd+V），然後將游標移到圖片上並點擊即可擷取任意像素的精確顏色。內建放大鏡可放大實現像素級精準取色。圖片使用HTML canvas在瀏覽器中本地處理，永遠不會上傳到任何伺服器。
它會檢查無障礙對比度（WCAG）嗎？
會。WCAG對比度檢查器計算您選擇的顏色與白色和黑色背景之間基於亮度的對比度比值，並顯示一般文字、大型文字和UI元件的AA和AAA通過/失敗徽章。WCAG AA要求一般文字4.5:1（大型文字3:1）；WCAG AAA要求7:1（大型文字4.5:1）。當您調整任何顏色欄位時，檢查器會即時更新。
什麼是OKLCH，為什麼要使用它？
OKLCH是CSS Color Level 4中引入的現代感知均勻色彩空間。與RGB或HSL不同，後者中等量的數值變化不會在人眼中產生等量的感知差異，而OKLCH經過校準，使明度值(L)固定增減產生視覺上一致的結果，無論色相如何。這使它非常適合建立無障礙、均衡的調色盤。OKLCH還能表示廣色域顏色（Display P3），並在現代瀏覽器中原生支援。
拾色器在iPhone和Android上可以使用嗎？
可以。整個工具可在任何現代行動瀏覽器中運行 — iPhone/iPad上的Safari和Android上的Chrome。色輪、格式輸入欄位、圖片拾色器、WCAG對比度檢查器、色調/陰影比例尺和配色方案產生器在行動端均正常運作。螢幕滴管在行動瀏覽器上不可用（這是僅限桌面Chrome/Edge的API），但圖片取色器和剪貼簿貼上在行動端完美運作。
Related tools
檢視所有工具
新 玻璃擬態產生器
設計毛玻璃卡片並複製 CSS，附即時預覽。
新 CSS Text-Shadow 產生器
調整 CSS 文字陰影並即時預覽，可複製程式碼。
新 顏色混合器
以任意比例混合兩種顏色，並複製結果或任一階段色。
新 圖片取色器
從圖片中挑選任意顏色，並擷取主要色盤為 HEX、RGB 和 HSL。
新 Pixel Art Maker
Draw pixel art on a customizable grid, pick colors, and export as PNG — in your browser.
新 Color Token Generator
Generate a full design-token scale (50–950 shades) from a single base color — CSS, Tailwind or JSON.