什麼是單色調色盤？

選擇一個基礎色，從中產生暗色（較深）和淺色（較亮）。設定步驟數，然後匯出為 CSS 變數、Tailwind 設定，或複製單個 hex/RGB 值。

選任意 HEX 或用調色盤,設定淺色、色調(灰調)與深色的數量,頁面會在 LAB 色空間中均勻插值。每個色塊顯示 HEX、RGB 與 HSL,一鍵即可複製,點「全部複製」還能一次取得整套色階。可篩選只看淺色、色調或深色,也能將整套色階匯出為 CSS 自訂屬性、Tailwind 設定片段、SCSS 變數、JSON 設計 token 或 PNG 色票圖。

使用方法

1. 用取色器選一個基礎色、直接輸入十六進位代碼，或用「從圖片」直接從標誌或相片中擷取主色。
2. 調整淺色(較亮)、色調(灰調)與深色(較暗)的數量,如果只想看其中一列,可用「顯示」篩選器縮小範圍。
3. 複製單個顏色值,點「全部複製」一次取得所有 HEX,或將整個調色盤匯出為 CSS 自訂屬性、Tailwind 設定物件、SCSS 變數、JSON 設計 token 或顏色色票圖片。

何時使用

• 建立 UI 設計系統,需要把品牌色拆成 9 級給按鈕、表單、狀態列等元件使用。
• 做資料視覺化,熱力圖、單色長條圖等所有圖層必須來自同一個色相。
• 決定文字與底色的搭配:-100 背景配 -900 文字,對比度通常足夠安全。

結果

您正在建構資料視覺化儀表板，需要一套藍色調色盤。以 #3B82F6 為基礎色，產生從接近白色（#EBF2FE）到接近黑色（#1A2744）的 9 個步驟。匯出為 CSS 變數，在圖表中使用 --color-blue-100 到 --color-blue-900。

常見問題

什麼是單色調色盤?

一組色相相同、只在飽和度和明度上有差別的顏色。整體看起來是同一個藍、同一個綠的不同深淺,不會因為混搭其他色相而顯得吵雜。

一般要生成幾級?

UI 最常見是 9 級(Tailwind、Material、IBM Carbon 都採用 50-900 的 10 級制)。資料視覺化通常 5-7 級就夠。超過 11 級時相鄰色塊已經接近漸層,肉眼難以分辨。

該選哪一種匯出格式?

CSS 變數可直接貼到任何樣式表;Tailwind 片段加進 theme.extend.colors 之後就能用 bg-brand-500;SCSS 同時給你 $brand-500 變數和一個 Sass map;JSON 會把整套色階匯出成結構化的設計 token,可接入 style dictionary;PNG 色票表適合給品牌或設計團隊在 Figma 中參考。

為什麼最淺的幾級看起來都像白色?

亮度過高時,任何飽和色都會被眼睛當成接近白色。若 -100 幾乎與白色無異,請減少 tint 數量,或把亮度上限拉近基色,相鄰色塊才容易分辨。

產生的顏色符合無障礙嗎?

現在可以直接在這裡檢查。開啟 WCAG 對比度徽章，每個色塊就會顯示其上的黑色或白色文字能否達到 AA 或 AAA；色覺預覽會把色階重新著色，呈現綠色盲、紅色盲或藍色盲人士看到的效果。一個簡便規則：把 -100/-200 階與 -700/-800 階搭配，通常就能通過 WCAG AA。

相關工具