色彩生成小工具

總是給我找事情！

他說想學做網站，沒寫三五行程式碼，一天都不到呢，就告訴我說顏色選擇太困難了。別人的網站配色都好漂亮。讓我想想辦法。要那種可以輸入一種顏色後，就能生成好多好多顏色的應用。

然後，他說有重要的事情要出去，讓我自由發揮，做好了告訴他。

我做好了，你倒是給我回個信啊ヽ(`Д´)ﾉ

結果他凌晨才回來躺下就睡。回復我時，已經過去了17小時37分49秒。

他說挺好用的，問我能不能分享到 gitbob 上，讓大家都能用到。又說他昨天和朋友探討人生，酒喝大了，要去外面吃東西。

喂，是 github 啊。真是什麼都不懂！估計以後的維護事情也都是我的事情了。恩，至少在他學會之前。

—— coco 碎碎唸

簡介

輸入一個 HEX 顏色，生成 Tailwind 風格色階、配色方案與 OKLCH light/dark 主題色板，並提供 WCAG 對比度自檢。

輸入的顏色會即時套用到整個應用，也能在預覽面板切換 balanced、pastel、vintage 三種風格。預覽支援 LIGHT / DARK / BOTH，滿意後可複製 CSS 變數。

技術棧

• React 19 + TypeScript
• Vite 8 + Tailwind CSS 4
• culori for OKLCH conversion and contrast calculation
• Electron desktop shell

開發指令

指令	作用
pnpm dev	啟動 Vite 開發伺服器
pnpm build	型別檢查並建立 production bundle
pnpm preview	預覽 dist/
pnpm test	執行 node:test 測試
pnpm lint	執行 ESLint
pnpm verify:theme	執行瀏覽器回歸檢查
pnpm electron:dev	Electron + Vite HMR
pnpm electron:prod	建置後啟動 Electron
pnpm electron:build	建立 Linux AppImage

主題色怎麼改

node scripts/generate-palette.mjs "#新種子色"

把輸出的 @theme、:root、:root.light、:root.dark 貼進 src/index.css，或直接使用預覽面板的「複製 CSS 變數」。執行期預覽會由 src/palette.ts 依種子色即時生成。

專案結構 | Project structure

• src/colors.ts — 一般色階與色彩方案
• src/palette.ts — 主題 token、風格 preset、OKLCH 與 WCAG
• src/components/ — React UI 與主題預覽
• scripts/ — 色板產生器與瀏覽器回歸檢查
• electron/ — Electron 主程序與取色器

不使用 Docker

這是本機前端／Electron 小工具，不需要常駐服務、資料庫或容器；使用 pnpm 即可開發與建置。