Palette

色票產生器

OKLCH 品牌色票。挑一個基底,產出每種經典色彩和諧 + 50–950 色階。鎖定、重新隨機、輸出為 CSS / Tailwind v4 / SCSS / JSON。

色票產生器 — TL;DR

OKLCH 品牌色票。挑一個基底,產出每種經典色彩和諧 + 50–950 色階。鎖定、重新隨機、輸出為 CSS / Tailwind v4 / SCSS / JSON。

我們的 Color Picker & Converter 是處理單一顏色 — 選 / 轉 / 複製。本工具是處理 整套色票:丟入一個基底色,一次取得整套品牌就緒系統(色彩和諧 + 色階)。差別就像買一件襯衫和打點整個衣櫃。

HSL 的色相分布不均勻(60° 的黃感覺比 240° 的藍亮很多,即使明度值相同)。HSL 中的三等分配色一定會有一個色塊看起來明顯比較亮或暗。OKLCH 是感知均勻的 — 同一個 OKLCH 明度值的三個色塊看起來真的一樣亮。所以每個現代設計系統(Apple HI、Tailwind v4、IBM Carbon)都改用 OKLCH 處理色彩和諧與色階。

你的品牌色永遠不會離開你的裝置。打開 DevTools → Network 即可驗證任何操作中沒有對外請求。

提示:按空白鍵重新隨機未鎖定的色塊。

色階(50 → 950)
CSS
Tailwind v4
SCSS
JSON

為設計系統而生,不只是漂亮的圖

OKLCH 色彩和諧、色階、鎖定重隨、設計 token 輸出 — 加上幾個讓你真正用得開心的小細節。

六種 OKLCH 色彩和諧

互補、類比、三等分、四等分、分裂互補、單色 — 全部以 OKLCH 計算,所以三等分配色三個飽和明亮色保持同樣明度。沒有 HSL 帶來的混濁感。

50 → 950 色階

丟入品牌色,得到 Tailwind 形狀的 50, 100, 200, … 900, 950 色階,以 OKLCH 曲線走訪明度產生。極端值處色度自動壓縮以保持在 sRGB 色域內。

鎖定 + 重隨(Coolors 風格)

點任何色塊上的鎖定圖示固定它,然後按 Re-roll(或直接按空白鍵)讓其他色塊在所選和諧範圍內變化。快速迭代,保留你喜歡的。

四種實戰用輸出

CSS custom properties(--brand-500)、Tailwind v4 @theme block、SCSS map、可丟進 Style Dictionary / Figma Tokens 的 JSON 設計 token。再加上 1200×200 PNG 色票條。

WCAG 對比一目了然

每個色塊顯示它與黑或白(較佳那個)的 WCAG 對比比,標 AA / AAA / fail。在上線之前就抓出無障礙問題。

保護隱私

所有資料都留在你的裝置上。OKLCH 數學、和諧產生、色階推導、PNG 匯出全部以 JavaScript 在本地執行。打開 DevTools → Network 即可驗證沒有任何對外請求。

如何建立品牌色票

從一個基底色到完整可作為設計 token 的色票,四個步驟。

  1. 1

    丟入你的品牌基底色

    點色框、貼 HEX、或按 Random base 找靈感。工具會以這個顏色為核心 — 包括色彩和諧色塊與 11 階色階。

  2. 2

    選擇色彩和諧

    預設是 Analogous(類比) — 三個在基底 30° 內的顏色,適合沉穩品牌。Complementary(互補)做對比強調色。Triadic / Tetradic(三/四等分)適合編輯感、活潑品牌。Monochromatic(單色)適合單色相系統。全部以 OKLCH 計算,保持同樣明度。

  3. 3

    鎖定 + 重隨直到滿意

    點任何想保留色塊上的鎖定圖示,然後按 Space(或按 Re-roll)讓其他色塊在和諧範圍內變化。快速迭代。要精準調某個值就直接點該色塊的 HEX 欄位編輯。

  4. 4

    輸出為設計 token

    複製 CSS 輸出(custom properties)、Tailwind v4(@theme block)、SCSS map 或 JSON 設計 token。或按 Download PNG 拿到 1200×200 色票條,可直接放進設計 brief。

為品牌設計師 + 設計系統團隊打造

四種常見場景 — 在這些情況下,瀏覽器內隱私優先 OKLCH 色票工具比在 Figma 手調 hex 快太多。

新品牌身分衝刺

你有品牌色,需要圍繞它建系統。丟入 HEX、選 Analogous、重隨直到兩個輔助色出彩、鎖定三個色塊。切到色階檢視、複製 Tailwind @theme block、貼到新專案的 app.css。總時間:5 分鐘。

現有 Tailwind 專案加上品牌色

Tailwind 預設 indigo 不是你的品牌。你的品牌是 #5B3FCD。丟入,得到完美對應 Tailwind 步距的 11 階色階。複製 @theme block — 所有 bg-brand-500 / text-brand-700 都直接可用。

上線前檢查無障礙

每個色塊顯示 WCAG 對比比 + AA/AAA 標籤。逐一檢查 brand-500 對白底達到 AA、brand-100 當淺底時搭 brand-900 文字仍可讀。有問題的色塊個別重隨即可修正。

多品牌設計系統

代理商 / 多品牌公司同時維護 N 套設計系統,結構相同、品牌色相不同。每個品牌都用同一套色彩和諧 + 色階流程,各自輸出成 JSON tokens、丟進 Style Dictionary。結構一致、識別獨立。

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

你的品牌色永遠不會離開你的裝置。打開 DevTools → Network 即可驗證任何操作中沒有對外請求。

  • OKLCH 數學、色彩和諧產生、色階推導、WCAG 對比計算、PNG 匯出全部以 JavaScript 在你的機器上執行 — 沒有伺服器渲染、沒有第三方 API。
  • PNG 匯出用本地 canvas;色票圖完全在瀏覽器記憶體中產生並以 Blob 下載 — 沒有任何東西經過網路。
  • 無需登入、不對色彩值埋點。只用一個 cookie 記錄 cookie 同意狀態,以及一個 cookie 記錄語言偏好。

相關文章

為 OKLCH 色票、品牌色彩系統、設計 token 精選的實用文章。

常見問題

這個和一般選色器有什麼不同?

我們的 Color Picker & Converter 是處理單一顏色 — 選 / 轉 / 複製。本工具是處理 整套色票:丟入一個基底色,一次取得整套品牌就緒系統(色彩和諧 + 色階)。差別就像買一件襯衫和打點整個衣櫃。

為什麼用 OKLCH 而不是 HSL?

HSL 的色相分布不均勻(60° 的黃感覺比 240° 的藍亮很多,即使明度值相同)。HSL 中的三等分配色一定會有一個色塊看起來明顯比較亮或暗。OKLCH 是感知均勻的 — 同一個 OKLCH 明度值的三個色塊看起來真的一樣亮。所以每個現代設計系統(Apple HI、Tailwind v4、IBM Carbon)都改用 OKLCH 處理色彩和諧與色階。

「色階(50 → 950)」是什麼意思?

Tailwind 風格的品牌色階:indigo-50(最淺)、indigo-100、indigo-200、… indigo-900、indigo-950(最深)。丟入品牌色,工具自動以 OKLCH 明度曲線產生 11 個色階。結果可以直接取代任何 Tailwind palette token,但用你的品牌色相。

怎麼鎖定色塊只重隨其他?

點任何色塊左上角的 鎖定圖示 — 它就不變了。然後按 Re-roll 或空白鍵 Space,所有未鎖定色塊會在所選色彩和諧範圍內變化。這是找到好色票的方法:把已經決定的品牌色固定,在它周圍探索變化。

資料會傳到伺服器嗎?

不會。OKLCH 數學、色彩和諧產生、色階推導、WCAG 對比計算、PNG 匯出、每次剪貼簿複製 — 全部以 JavaScript 在你的裝置上執行。打開 DevTools → Network 即可驗證沒有任何對外請求。貼品牌色、內部設計 token、NDA 鎖定的色票進來都安全 — 沒有任何位元組離開你的筆電。