TechMoon 科技月球
WordPress、SEO 與 AI 工具實測指南
免費配色工具 Colors & Fonts：在編輯器裡生成 Tailwind 色階
Colors & Fonts 是經營七年的免費配色工具站，2026 年推出 MCP server，一行 npx 指令就能讓 Cursor 或 Claude 生成五角色色盤、算 WCAG 與 APCA 對比、直接輸出 Tailwind v4 色階。實測網頁版調色盤產生器免登入可用，12 種匯出格式全開放；側欄導流自家付費產品、原始碼連結失效等結構面觀察一併整理。
用 AI 摘要這篇文章：
我在本機用一行 npx 指令把 Colors & Fonts 的配色工具叫起來，依序丟了三個任務：生一組 vibrant 風格的五角色色盤、檢查白字配深底的對比、把 #3b82f6 展開成完整色階。三個答案都在兩秒內出來，對比那題它給 17.40:1、WCAG 四個等級全過，我自己用相對亮度公式重算了一遍，結果一致。這些輸出來自一個跑在本機的 MCP server，Cursor、Claude 或 VS Code 接上設定檔之後，AI 助手就能直接呼叫，配色不用再切去瀏覽器分頁翻色碼。
Colors & Fonts 本體是設計師 Michael Andreuzza 經營七年的配色網站，2026 年 2 月他把核心功能打包成 npm 套件 @colorsandfonts/mcp，免帳號、免 API 金鑰、MIT 授權。網頁版的調色盤產生器我另外做了匿名實測，五角色編輯、色盲模擬、對比審計一路到匯出，全程不登入都可用，12 種匯出格式沒有一個上鎖。免費的代價不在功能表裡，在網站結構裡：側欄導流作者自己的付費產品，頁面分析器是他的另一個服務，而官網掛的原始碼連結實際上已經失效。
一行 npx 啟動，六個工具攤在終端機
安裝方式是 MCP 的標準配置：在 Cursor、VS Code 或 Claude Desktop 的 MCP 設定檔貼上同樣的 server 定義（npx 跑 @colorsandfonts/mcp），外包裝鍵各編輯器略有差異，重啟編輯器就完成，沒有帳號申請也沒有金鑰要填。用 Cursor 的人還有更短的路：官方頁上有 Add to Cursor 按鈕，點一下寫入設定，連貼 JSON 都省了。我在本機直接以 stdio 協議對它發 JSON-RPC 請求，初始化交握後拿到的工具清單有六件，其中三件我實際呼叫過：
| 工具 | 做什麼 | 我實際得到的輸出 |
|---|---|---|
| generate_palette | 生成 Primary、Secondary、Accent、Neutral、Background 五角色色盤 | vibrant 風格輸出主色 #eb8939 的完整五角色表格，附各角色用途說明 |
| check_contrast | WCAG 2.1 與 APCA 雙算法對比檢查 | #ffffff 配 #1a1a1a 得 17.40:1，四個等級全過，APCA 給 Lc -107 |
| export_palette | 匯出 Tailwind v4、SCSS、CSS 變數、Figma tokens、JSON、SVG、Android、iOS | #3b82f6 展開成 11 階 CSS 變數，可直接貼入專案 |
另外三件 generate_monochromatic（11 階單色色階）、generate_random_palette（隨機和諧色，官方說明採黃金比例色相分布）、parse_color（hex、RGB、HSL、OKLCH、P3、HSV、CMYK 互轉）在清單上規格齊全，對照官方頁的描述也沒有落差，沒有宣稱了卻不存在的功能。
generate_palette 的輸出值得攤開看結構。它給的不只是五個色碼，每個角色還附用途說明：Primary 放按鈕與連結、Secondary 放 hover 狀態與輔助元素、Accent 留給呼叫行動與徽章、Neutral 給文字與邊框、Background 當頁面底色。這套分法對應設計圈常用的 60/30/10 配比經驗法則，六成底色、三成輔助色、一成強調色，等於把配色決策拆成有名字的欄位，AI 助手生成之後你可以逐欄換掉重生成，不用整組重來。我抽到的 vibrant 風格五色是 #eb8939 配 #e4dd5e、#f22933，飽和度整組偏高，走活力路線的產品才撐得住；這組我拿來驗格式，推不推薦看你的產品調性，風格參數換成 muted 或 corporate 會是完全不同的色群。
check_contrast 給的 17.40:1 經得起重算。我用 WCAG 相對亮度公式驗：#1a1a1a 三個色頻線性化後亮度約 0.0103，(1.0+0.05)/(0.0103+0.05) 就是 17.4，數字對得上。它同時給 WCAG 2.1 與 APCA 兩套標準也是實用細節，深色介面上的 WCAG 公式被設計圈詬病多年，APCA 是下一代候選，兩個都給，判斷留給你。
export_palette 的輸出可以直接進專案。把 #3b82f6 命名為 primary、指定 Tailwind v4，得到的是這樣的 11 階 CSS 變數（前後略）：
/* Generated by colorsandfonts.com */
--color-primary-50: #f5f6ff;
--color-primary-100: #e7eafe;
--color-primary-500: #3b82f6;
--color-primary-950: #021b3e;對日常寫 code 的人，這代表配色流程從「開分頁找靈感、複製色碼、手調色階」收斂成一句自然語言：跟 AI 助手說「生一組 muted 色盤，主色 #3b82f6，匯出 Tailwind」，中間的色階計算與格式轉換它包辦。色階的結構在兩件工具之間對得起來：generate_monochromatic 從單一顏色鋪出 50 到 950 的 11 階，export_palette 匯出的正是同樣的 11 階結構，命名也正好對上 Tailwind 的習慣，接進專案不用再改名。輸出區塊開頭會帶一行 Generated by colorsandfonts.com 註解，要刪要留自己決定。
不登入，網頁版產生器照樣做到匯出
網頁端的 Color Palette Builder 我以未登入狀態匿名開啟實測，畫面五個角色色一次到位：Background、Foreground、Primary、Secondary、Accent，預設載入一組米白配寶藍的示例配色，色盤可以在命名輸入框取名，旁邊是隨機重產生、復原、重做與歷史紀錄四顆按鈕，配色過程可以整段試誤再退。工具列上 Harmonies 和諧色、Color blindness 色盲模擬、Contrast audit 對比審計、Image 從圖片取色都能操作，字型區可以直接配 Google Fonts 的標題與內文字型，另有 Share 分享與 Shortcuts 快捷鍵兩個入口。這也是站名裡 Fonts 那一半目前的形態：字型配對織在產生器裡，而不是獨立的字型圖庫。想系統性看字型本體，可以搭配 FontShow 的本地字型預覽、Zeoseven Fonts 的網頁字型庫，或 Freaky Fonts 的特效字產生器。
最關鍵的一步是匯出。按 Export 開出的對話框在未登入狀態完全開放：輸出格式有 Tailwind v4、CSS、SCSS、Figma tokens、JSON、SVG、PNG、PDF、ASE、ACO、Android XML、iOS Swift 共 12 種，色彩格式可選 HEX、RGB、HSL、OKLCH 或 Display P3，Copy 與 Download 按鈕沒有鎖頭，也沒有跳出登入提示。設計師交接給 Photoshop，ASE 與 ACO 正是 Adobe 系軟體吃的色票檔；交接給 Figma 走 Figma tokens；開發者要 CSS 變數或 Tailwind tokens 也在同一個對話框。網站條款確實寫了「部分功能可能需要帳號」與「可能有付費方案」，但以 2026 年 9 月的實測，核心工作流從生成到匯出不需要任何登入。
產生器之外，站上還掛著一整套內容庫：Semantic Theme Builder 一次定調八個語意角色（背景、前景、卡片、次要底色、邊框、主色、副色、強調色），亮暗雙模式，並在真實的儀表板元件上預覽主題效果，存貨長條圖、用電曲線、儲蓄目標這種實際畫面直接吃你的主題色；單色色階、mesh 漸層與 WebGL shader 背景也各自有獨立產生器，shader 頁還能輸出 PNG、錄影或用 iframe 嵌入，mesh 漸層用拖拉色點的方式編輯，成品存在瀏覽器裡並能用連結分享。整個網域的 sitemap 有 639 頁，其中 484 頁是單一色碼頁、94 頁是 CSS 漸層頁、48 頁是命名色盤頁，背後其實養著一座配色資料庫，搜尋流量進來再用產生器承接。
七年前它是收錄站，前後換過三次形態
這個網站值得認識的原因之一，是它活得久而且敢整個打掉重練。Wayback Machine 的快照顯示 2019 年 7 月的 Colors & Fonts 自述為「極度精選的漸層、色盤與字型配對靈感集」，署名 Michael Andreuzza，本質是收錄配好靈感的圖庫，頁面上的色盤一組組掛著 Yepp、Verano、Aston 這種取好名字的靈感卡，點了就複製色碼。2025 年初的快照已經膨脹成工具箱：二十幾套現成色彩系統對照，Tailwind、Material、Radix、iOS、Stripe、Atlassian、Zendesk 都在列，連他自己的 kromatika 色彩系統也列進去，另外還有 OKLCH 與 LAB 選色器和本地字型預覽。2026 年現在的版本又整個換掉，變成產生器加內容庫加 MCP，以 Astro 靜態站重新蓋過。
換血的副作用是網路上的舊介紹會過時。部分早期介紹描述的占位符產生器、clip-path CSS 產生器，在現站的 sitemap 裡已經找不到，色彩系統對照庫也收掉了。引用任何功能清單之前，最好直接開現站確認一次，這也是工具站反覆重練後的通則：介紹文的保存期限比你想的短。
免費背後的生意與追蹤
側欄的商業結構攤開看比較誠實。內容頁與文件頁的側欄掛著三個對外連結：Lexington Themes 是作者自己的付費 Astro 主題品牌，連結帶 utm 追蹤參數；Dabbit 是 Mac 螢幕選色 App，五天試用後收費；Mobbin 是設計靈感庫，連結帶推薦碼。免費配色工具實際扮演流量入口，把設計師導向同一個人的付費產品。這種結構不擋功能，但你要知道自己用的是一條產品線的免費端。
追蹤的部分要分開看。每個頁面載入作者自己的分析器 app.kobbe.io 的 tracker.js，Kobbe 是他的隱私導向分析產品，GitHub 帳號下就有同名 repo；我的一次匿名瀏覽器工作階段還攔到 Cloudflare Insights 的請求。隱私政策寫明不販售個資、帳號走 Google 登入、付款由第三方處理器 Polar 經手，條款與隱私政策都在 2026 年 4 月 2 日更新過，而且開頭就自述是通用模板、非法律意見，這種不假裝背後有法務團隊的坦白反而少見。條款裡有兩條對採用方有實際意義：可接受使用條款禁止「以拖垮服務的方式爬取」，大批抓取內容庫之前要想清楚；賠償上限是過去十二個月付的費用或一百美元取其高，商業糾紛的求償空間因此很小，企業採用前讓法務看過是基本動作。
產品線的深度是另一面。作者的 GitHub 有 41 個公開 repo，與配色相關的還有 kromatika 色彩系統，無障礙元件庫 bearnie 有 352 顆星、UI 區塊庫 oxbow 有 229 顆星（2026-09-25 查詢當下）。一個人養一條設計產品線，配色工具七年三改版，長期維護的機率高於一次性作品，不過所有東西都繫在同一個人身上，這點風險也是真的。
原始碼連結已經 404，採用前自己驗一遍
兩個誠實的減分項要說在前面。MCP 頁面上掛的原始碼連結指向 github.com/michael-andreuzza/colorsandfonts.com，實際打開是 404，這個 repo 也不在作者的公開清單裡，「開源」目前只剩 npm 套件本身可安裝可驗（套件標示 MIT），原始碼倉庫看不了，何時下架、為何下架都沒有交代。另外，npm 下載量還很小：近一週 10 次、近一個月 75 次（2026-09-25 查詢），採用它不等於搭上主流標準，早期採用者最好像這樣先在本機驗幾個輸出，再接進自己的工作流。
減分歸減分，可驗證性把分數補了一些。套件跑在本機，編輯器以 stdio 協議與它溝通；出貨的 bundle 裡找不到對外的請求端點，唯一的對外字串是 SVG 命名空間，輸出的色碼與對比數字也都能用獨立公式複驗，我複驗的結果一致。套件版本也有件事要知道：2026 年 2 月 8 日首發，隔天升到 1.1.0 之後，到 9 月底沒有再發新版，七個月停在原地的工具，要嘛是穩定到不用動，要嘛是注意力移去別的產品，這點就只能持續觀察。
誰該現在裝，誰再等等
我的證據到協議層與網頁前端為止：MCP 沒有實際接進 Cursor 或 Claude Desktop 跑完整開發流程，登入後的儲存與分享功能也未驗，這兩點留給你實裝後判斷。適合的人倒是很明確：以 Tailwind 或 CSS 變數為主的開發者、在 AI 助手裡寫 code 的人、需要在 Figma 與程式之間搬運色彩系統的小團隊，一句話生成可匯出的色彩系統是實實在在的省事。反過來說，需要品牌級配色策略、要考慮產業慣例與競品差異的團隊，工具能給你的是起點和色階數學，品牌判斷它不會替你做。要是你要的其實是影像後製而非配色，稿定線上設計 那類工具才對位。
下一步很輕：打開官網的 palette builder 試一輪匯出，或把 MCP 設定貼進編輯器，對 AI 助手說一句 generate a muted palette based on #3b82f6。五分鐘內你就會知道這個工作流順不順手，而這五分鐘不需要任何註冊或付款。用順了再回頭看它的條款與側欄結構，你會更清楚自己站在免費端的哪個位置。
