Color Picker & Converter

顏色選擇器與顏色轉換器

視覺取色或直接貼上任何數值 — HEX、RGB、HSL、OKLCH 與 OKLAB 即時同步。內建 WCAG 2.2 對比檢查器與 OKLCH 調色盤產生器,完全在瀏覽器中運算。

顏色選擇器與顏色轉換器 — TL;DR

視覺取色或直接貼上任何數值 — HEX、RGB、HSL、OKLCH 與 OKLAB 即時同步。內建 WCAG 2.2 對比檢查器與 OKLCH 調色盤產生器,完全在瀏覽器中運算。

把你的色碼(如 #ff5722)貼到 HEX 欄位,RGB 那一行就會即時更新。同樣地,把 rgb(255 87 34) 貼到 RGB 欄位,HEX、HSL、OKLCH、OKLAB 都會同步。每種支援的格式都可以雙向轉換。

OKLCH 是 CSS Color Module Level 4 引入的色彩空間,以感知亮度(L)、彩度(C)、色相(h)表示 — 結構像 HSL,但是「感知均勻」的。兩個 OKLCH 顏色只要 L 一樣,即使色相不同,看起來明亮度也一樣。這讓設計 token、自動配色與無障礙色階都遠比 HSL 可預測。所有現代瀏覽器(Chrome 111+、Safari 15.4+、Firefox 113+)都支援。

顏色資訊永遠不會離開你的裝置。打開 DevTools → Network,你會看到無論轉換、選色、產生調色盤或檢查對比,都沒有任何對外請求。

HEX
RGB
HSL
OKLCH
OKLAB
色名

調色盤

WCAG 2.2 對比檢查

文字色
背景色
—
預覽
大標題範例文字
內文範例 — 敏捷的棕色狐狸跳過了懶惰的狗。

為真實工作流程而設計

從設計系統到無障礙稽核 — 你需要的所有色彩格式與檢查,一次就位。

支援六種色彩空間

在 HEX(3 / 4 / 6 / 8 位)、RGB(A)、HSL(A)、OKLCH、OKLAB 與 CSS 命名色之間雙向轉換。輸出字串符合 CSS Color Module Level 4 語法,可直接貼進你的樣式表。

WCAG 2.2 對比檢查器

立即顯示任意兩色之間的對比比率,並提供 AA(4.5 : 1)與 AAA(7 : 1)在一般與大字尺寸下的通過 / 不通過徽章。演算法符合 W3C 標準:sRGB 線性化 → 相對亮度 →(L1+0.05)/(L2+0.05)。

滴管 — 從畫面任意像素取色

點擊滴管即可從螢幕任何像素取色:另一個分頁、截圖、照片、icon 都行。Chromium 瀏覽器使用原生 EyeDropper API。

OKLCH 調色盤

自動產生 9 階明暗色階,以及互補、三色、類似色配色組合 — 全部以 OKLCH 計算,確保每一階在感知上明亮度相等(不像 HSL 會忽明忽暗)。

保護隱私

所有換算都在你的裝置上以 JavaScript 執行,不上傳、不記錄、不傳給任何第三方。你可以打開 DevTools → Network 自行驗證。

極致快速

純 JavaScript,無框架運行時。冷啟動 gzip 後不到 50 KB,顏色轉換與調色盤產生在五年前的筆電也能在 1 毫秒內完成。

如何使用顏色選擇器

四種開始方式,所有格式同步更新。

  1. 1

    視覺取色

    在飽和度 / 亮度方塊內拖曳來選擇明暗,下方色相滑桿改變主色調,再用透明度滑桿調整 alpha。右側每個格式都會即時更新。

  2. 2

    貼上任意數值

    把 HEX(#4f46e5)、RGB(rgb(79 70 229))、HSL(hsl(244 76% 59%))、OKLCH(oklch(53% 0.22 277))甚至 CSS 命名色(tomato)貼到對應欄位 — 選色器與其他格式都會同步。

  3. 3

    用滴管取色

    點擊滴管按鈕,可從螢幕上任何像素取色 — 另一個分頁、截圖、照片、icon 都行。Chrome、Edge、Opera 使用原生 EyeDropper API。

  4. 4

    複製或檢查對比

    點擊任一格式旁的複製圖示,即可送進剪貼簿。或捲動到下方 WCAG 2.2 對比檢查區,確認你的文字 / 背景組合在一般與大字尺寸下能否通過 AA 或 AAA。

為設計師、開發者與無障礙稽核打造

色彩工具,完美對應四種常見工作場景。

設計系統 token 撰寫

把品牌 HEX 轉成 OKLCH,讓 token 色階上每一階都有相同的感知亮度間距。OKLCH 輸出可直接貼進 CSS,免前處理器。

WCAG 無障礙稽核

輸入文字 / 背景組合,立即看到對比比率與 AA / AAA 徽章。在上線前抓出不通過的配色 — 符合 W3C 規範的 4.5 : 1 一般、7 : 1 強化門檻。

前端 CSS 顏色轉換

設計稿給的是 HEX、但 Tailwind 設定要 HSL、現代樣式表要 OKLCH?貼一次就好,任意格式都能複製。輸出字串是合法的 CSS Color Module Level 4 語法。

配色探索

選定一個基底色,即時看到九階感知均勻的明暗色階,以及互補、三色、類似色配色 — 全部以 OKLCH 計算,每一階看起來都同樣明亮。

100% 私密 — 在瀏覽器中運算

顏色資訊永遠不會離開你的裝置。打開 DevTools → Network,你會看到無論轉換、選色、產生調色盤或檢查對比,都沒有任何對外請求。

  • 所有換算(HEX ↔ RGB ↔ HSL ↔ OKLCH ↔ OKLAB)都在你的機器上以 JavaScript 執行 — 公式都看得見原始碼。
  • EyeDropper API 只會回傳你主動點擊的那一個顏色,瀏覽器負責管理權限,不會讓網頁讀到任何其他像素。
  • 無需登入、不對顏色資料埋點、無第三方色彩 API。網站符合 GDPR 規範。

相關文章

為設計師、開發者與無障礙團隊精選的實用教學。

常見問題

如何把 HEX 轉成 RGB?

把你的色碼(如 #ff5722)貼到 HEX 欄位,RGB 那一行就會即時更新。同樣地,把 rgb(255 87 34) 貼到 RGB 欄位,HEX、HSL、OKLCH、OKLAB 都會同步。每種支援的格式都可以雙向轉換。

OKLCH 是什麼?為什麼要用它?

OKLCH 是 CSS Color Module Level 4 引入的色彩空間,以感知亮度(L)、彩度(C)、色相(h)表示 — 結構像 HSL,但是「感知均勻」的。兩個 OKLCH 顏色只要 L 一樣,即使色相不同,看起來明亮度也一樣。這讓設計 token、自動配色與無障礙色階都遠比 HSL 可預測。所有現代瀏覽器(Chrome 111+、Safari 15.4+、Firefox 113+)都支援。

WCAG 對比結果可信嗎?

是的,演算法依據 WCAG 2.2 §1.4.3:先把 sRGB 各通道線性化,再計算相對亮度(0.2126·R + 0.7152·G + 0.0722·B),最後 (較亮 + 0.05) / (較暗 + 0.05)。一般文字 AA 為 4.5 : 1、大字(18pt 以上或 14pt 粗體以上)為 3 : 1;AAA 則分別是 7 : 1 與 4.5 : 1。

可以從圖片或其他應用程式取色嗎?

可以 — 點擊滴管按鈕即可呼叫瀏覽器內建的 EyeDropper API。你可以從畫面任何位置取色:其他分頁、Figma 設計、影片畫面、截圖都行。Chrome、Edge、Opera 已支援;Firefox 與 Safari 會自動禁用按鈕(降級處理)。

資料會傳到伺服器嗎?

完全不會。選色器、所有格式換算、調色盤產生、對比檢查全部都在你的瀏覽器內進行,任何顏色數值、影像取樣或文字都不會傳出。可以打開 DevTools → Network 驗證,使用過程中沒有任何對外請求。