Kigen 免費配色產生器：把一個顏色展開成工程能直接用的色階

用 AI 摘要這篇文章：

ChatGPT Claude Perplexity Google Grok

品牌色定案之後、程式碼出現之前，中間有一段沒什麼人想做的手工：深淺階梯要一階階調、變數要命名、Tailwind 的設定要抄一份、設計 token 的 JSON 還得自己生。這段中間層通常落在設計與前端的交接處，兩邊都覺得是對方的事，最後多半是前端認賠，在色彩轉換器跟試算表之間來回搬數字。9 月 3 日我把 Kigen 的顏色產生器從選色到匯出整個走了一遍，這段手工在它上面的長度是：按一下空白鍵。

畫面跳出一個紫色，工具自動給它取名 Heliotrope，下方排出 50 到 950 共十一階色階，再往下四個分頁：CSS、Tailwind、Tailwind 4、Tokens，每個分頁裝的都是能直接複製進專案的檔案內容。整個過程沒有註冊，沒有帳號，email 也不用留。網址是 kigen.design/color，開頁即用。它是 Kigen 產品線的免費前門，背後那套要付費的 Figma 設計系統後面再談，先看這扇門裡實際有什麼。

空白鍵按下去，畫面會給你什麼

輸入區給了 R、G、B 三個數值欄位和三條對應的滑桿，也可以直接用選色器。不想慢慢調的話，頁面上有一行提示：Hit Spacebar，按空白鍵就換一個隨機色。我按了幾輪，拿到 Heliotrope 這種紫、Curious Blue 這種藍、Cashmere 這種膚色調，每次換色，名字跟著色一起換。這些名字是工具自動取的，屬於初始值，旁邊的輸入框可以改成你自己的命名慣例，改成 brand-primary 也行。

色階的規格跟著 Tailwind 的慣例走：NAMING PATTERN 顯示 50, 100 到 900 的階梯，SHADE COUNT 預設 11，實際輸出會含到 950。以 Curious Blue 這組為例，基準色 #0EA5E9 落在 400 階，往淺走到 50 階是 #E6F2FF，往深走到 950 階是 #00131F。每一階的色票上直接印著該階的 HEX 值，設計端要抽哪一階去用，眼睛掃過去就能對上，不用逐階點開。階數可以加減，要更細的中間調就往上加。色階列後方還排著幾個空格，工具沒有附說明，看排列方式像預留給更多顏色的位置。

Pin

同一組色有四種表示法切換：HEX、RGBA、HSL、OKLCH。前三種是老面孔，OKLCH 值得多看一眼，它是用感知亮度模型描述顏色的格式，同一個色階換成 OKLCH 之後，明度數值的遞減比 HSL 的 L 值均勻，Tailwind v4 也把整組預設色板改用 OKLCH 定義。想漸進採用的團隊，在這裡切過去就能拿到全部數值，不用另找轉換器。

四種匯出分頁，貼進專案前長這樣

匯出區才是這個工具的核心。CSS 分頁給的是一組變數宣告，實際輸出長這樣：

/* CSS Variables generated from Kigen.design */
:root {
  --heliotrope-50: #f5eefe;
  --heliotrope-500: #b239f5;
  --heliotrope-950: #1f0230;
}

Tailwind 分頁給的是 v3 的 tailwind.config.js 寫法，值直接內嵌在設定裡，跟著畫面當前的表示法走，HEX 模式就是純色碼，切到 OKLCH 就給 oklch() 原始數值：

colors: {
  'curious-blue': {
    '500': '#0b92ce',
  }
}

Tailwind 4 分頁一次給兩段內容：先是可以直接放進 CSS 檔的變數，值用 OKLCH 原始數字表示，省掉一層轉換：

--curious-blue-500: 0.625 0.134 237.0;

後面跟著把變數接回 config 的段落，用 var() 引用剛才的變數並保留 alpha 通道的支援，bg-curious-blue-500/50 這種半透明指令才有作用，HEX 模式下的 v3 設定做不到這件事：

colors: {
  'curious-blue': {
    500: 'oklch(var(--curious-blue-500) / <alpha-value>)',
  }
}

Tokens 分頁輸出 W3C DTCG 格式的設計 token JSON，每個色階一個物件，附值與類型欄位（$value 與 $type），這是設計工具之間交換 token 的標準格式，Figma 的變數功能與多數 token 管理工具都認這套。四個分頁共用同一組色，改了基準色全部連動重算，右下角一個 Copy 按鈕把當前分頁整包複製走。

Pin

我實際跑的一次完整流程是這樣：按空白鍵拿到 Cashmere 這個膚色調，看過階梯分佈滿意後，切到 OKLCH 表示法確認明度遞進，跳到 Tailwind 4 分頁，按 Copy，貼進專案的 CSS 檔，前後不到一分鐘。這一分鐘裡發生的事，放在手工時代是半小時起的換算加命名加重打。

對前端的實際意義：以前拿到一個定案的品牌色，要自己決定十個深淺、自己換算、自己命名，再用工程的格式重打一遍。現在這段中間層被壓縮成選色加複製，命名從 –heliotrope-500 這種自動名稱開始，要改成 –brand-500 就是改個字的事。接進專案時比較穩的做法是讓工具產出的這層當基礎層，語意層自己再包一層變數，例如把 –primary 指到 –brand-500，之後品牌色微調就只動基礎層，元件程式碼裡的語意名不用跟著改。

九種演算法，等於九套色階曲線

ALGORITHM 下拉選單是這個工具藏得最深的一層，清單上有九個選項：Tailwind CSS、Radix UI、Ant Design、Lightness Scale、Saturation Scale、Hue Shift Scale、Monochromatic、Analogous、Complementary，預設是 Tailwind CSS。

Pin

前三個對應三個設計系統自己的色階曲線。這個選項的價值在對齊：專案用 Tailwind 就選 Tailwind，團隊元件庫建立在 Radix UI 上就選 Radix UI，產生的色階放進既有系統時，深淺的節奏是同一套，介面上的主色、hover、按下狀態沿階梯取用就是慣例用法，不用事後再手調。至於三套曲線具體差在哪，各系統的文件自己有定義，這個選單的重點是讓你對齊既有系統，而不是自己發明新的階梯邏輯。

後六種是色彩學操作，從名稱就能對上用途：Lightness Scale 顧明度階，Saturation Scale 顧飽和度階，Hue Shift Scale 讓色相隨深淺偏移，Monochromatic 給同色相的組合，Analogous 給鄰近色相，Complementary 給互補色。做介面的人對這幾個詞不陌生，淺色主題的背景與邊框要的是降飽和的深淺階，資訊圖表要的則是鄰近或互補的色相組合，這個選單把兩類需求都放進同一個輸入框後面。把它們當快速變體產生器用，比當成配色聖經合適。選單旁邊另有一個 Contrast Shift 滑桿，預設 0.00，用來微調色階的對比分佈。

跟 Coolors 是上下游，不是替代品

常有人問這能不能取代 Coolors。兩個工具解的題目不同：Coolors 那類工具的強項在探索，從種子色去撞出整組和諧的配色靈感，適合還不知道要用什麼色的階段；Kigen 的產生器假定你已經有答案，可能是設計師給的品牌色，也可能是會議剛定案的標準色，它負責把那一個色變成工程端能直接用的檔案。實際的分工流程多半是：在 Coolors 這類工具裡把主色挑定，主色交給 Kigen 展開成完整色階，工程端拿到的是可以直接 commit 的檔案。挑色在前面，展開在後面，是上下游的關係。同樣在挑色階段有用的還有 Colorion 和 Palettemaker，從配色組合去感覺整體氛圍；色定了之後要工程產物，才輪到 Kigen 上場。

寫 Tailwind 專案的人也可以把它跟 Tailwind Ink 放在一起看：後者從既有的 Tailwind 色票出發找色，前者從你自己的顏色出發長出色票，方向相反，恰好互補。

免費的前門，付費的後院

Kigen 這個名字背後是 Overlayz Studio，創辦人在站上署名 realvjy（Vijay Verma）。產品線不止這個產生器：導覽列上還有要錢的 Design System 與 Figma 插件，頁尾的產品清單裡另有一個標著 WIP 的 Type Scale，看命名是把同一套做法往字級尺度做，上線後多半也是同樣的組合。定價頁寫的方案是：Personal 一次性 75 美元（標示原價 85），單一使用者授權、專案數不限、終身免費更新；Team 310 美元最多五人，給工作室與小團隊；Enterprise 從 4,999 美元起，走客製洽談。都掛著上市折扣，付的是買斷價，之後不是月訂閱。那份 Figma 檔的內容是六千個以上的元件與變體、五百多組樣式與變數，走的是完整元件庫的路線。授權條款頁（最近更新 2026 年 3 月）寫明這是兩個分開銷售的產品：Kigen Design System 是那份 Figma 檔，Kigen Figma Plugin 是插件，買設計系統不含插件。條款裡還有一條值得掏錢前知道的限制：禁止拿 Kigen 的素材去製作並銷售競爭性的設計系統、UI 套件或模板。

插件本身有獨立的版本紀錄：2025 年 5 月首發，功能清單含色彩生成、字級生成、圓角、間距與尺寸 token，色彩這條線支援 Tailwind CSS、Material Design、Fluent Design、Atlassian、Uber Base、Polaris；2026 年 3 月更新到 v1.1.0。對照之下就明白一件事：網路上部分介紹說產生器內建 Material、Fluent、Polaris 等現成色板，實際打開網頁版的選單，這些選項不在裡面，那批色板屬於插件的功能清單。期待網頁版直接給你整套 Material 色板會落空，網頁版做的是從你的顏色生成，免費前門與付費後院的邊界就在這裡。

顏色運算留在瀏覽器，追蹤只有一套

我在操作的過程中看過頁面的對外連線：生成色階、切換格式、複製匯出內容，這些動作沒有產生任何把顏色資料送往伺服器的請求，運算都在瀏覽器裡完成。頁面載入的第三方請求，一個是 Google Analytics（追蹤編號 G-4LFDEC1MJH）的流量統計，另一個是頁尾一枚 startupfa.me 的推薦徽章圖。換句話說，你輸入的色值不會存進誰的資料庫，但站方知道有人來用過、用了幾頁。介意的人用擴充功能擋掉 GA 就好，不影響功能。對手上是還沒公開的新品牌色的人，這點讓人放心：色值不出瀏覽器，就沒有先過一站第三方伺服器的問題。

沒有帳號系統對免費工具是好事，也代表沒有雲端儲存：你的色階不會存在站上等你下次回來，要留就自己複製走。同類配色工具常見的註冊牆與 Pro 版限制，這個頁面目前都沒有。對一次性任務這夠用，要團隊共享色板，那就是付費產品或你自己版控的事。

色階均勻不等於通過 WCAG

OKLCH 的感知亮度讓色階的明度遞進比較均勻，這對視覺品質是好事，但均勻的明度階梯不保證通過 WCAG 對比標準。一般文字要求 4.5:1 起跳，大字 3:1，按鈕、輸入框邊框這類非文字的介面元件也有 3:1 的門檻，而工具裡沒有對比檢查器，前景配背景實際落在哪個數字，要自己拿產出的色去另外驗。務實的做法是色階產出後，把打算搭配的前景背景組合丟進任何對比檢查工具，瀏覽器開發者工具裡就有，過了再寫進 token。把它想成色階產生器而非無障礙檢查工具，這條界線畫清楚，使用上就不會誤期待。

介面全英文，沒有中文切換。匯出區還有 SVG 和 SVG/Figma 兩個按鈕，把色階輸出成向量檔，或直接送進 Figma；這兩條路的入口在網頁版，後續體驗在 Figma 那一端。

一個色進，一組檔案出

手上常有品牌色要落地的前端工程師，和要跟工程端交接 token 的設計師，這個免費產生器是我看過把單一色展開成工程檔案最省事的路徑之一：十一階、四種格式、九套色階曲線，全部免登入。它的輸出是標準格式、標準命名，不綁帳號也不綁生態，今天用它產的檔案，明天不想用了直接刪掉，沒有搬遷成本。反過來說，還在挑色階段的人先去 Coolors 繞一圈，要整套現成元件庫的人看的則是它 75 美元起的那份 Figma 檔。一個色進，一組檔案出，這扇免費前門就做這一件事，也把這一件事做好了。