Bloom Picker · 雅色 不只是一個色碼查詢工具，而是把「東亞傳統色」與「現代工作流程」接軌的橋樑。它提供了 250 款具文化脈絡的色名與色碼，方便品牌、視覺與 UI 設計師快速取用，並可輕鬆匯出至設計系統。
色名以「傳統色名 · 台灣口語 · 高貴優雅」為原則，沿用東亞傳統色名並統一為台灣慣用繁體中文（如 桜→櫻、黒→黑），保留傳統色感同時提升在地辨識度。
👉 線上 Demo： www.bloss0m.com/bloom-picker/
1. 核心特色與應用場景
- 設計與品牌應用：提供 CMYK / RGB / HSL / HEX 完整色碼，點擊 HEX 即可複製。支援收藏喜愛色、拖拉排序，並匯出為 CSS 變數或 JSON。
- 無障礙設計合規：內建 WCAG 2.1 對比度計算，自動評估與黑／白文字的對比比率，顯示 AA / AAA 狀態，幫助在美觀與可讀性間取得平衡。
- 靈感探索與推薦：內建「今日之色」與「隨機一色」功能。系統會依據色距與色相演算法推薦搭配色票，降低配色門檻。
2. 介面與預覽
專案採用全螢幕色塊體驗：點選側邊色名即可切換整頁背景色，過場平滑且無按鈕閃爍感；搭配 Hash 路由（如 #color-name），可直接連到指定色，方便跨分頁操作。
2.1 主畫面視覺
| 初櫻 | 群青 | 若竹 |
|---|---|---|
 |  |  |
2.2 推薦色票與概念
| 創意配色 | 蒼穹萬里 | 新綠萌芽 |
|---|---|---|
 |  |  |
 |  |  |
3. 架構與技術棧
專案以 React 與 TypeScript 打造，確保型別安全與元件可重用性。
- 框架與建置：React + TypeScript + Vite
- 動畫與互動：Framer Motion 處理平滑換色過場
- 圖示：Lucide React
- 色彩邏輯：自訂色距與推薦演算法、WCAG 2.1 對比度計算模組
專案結構劃分清晰：
src/
├── components/ # 側邊欄、細節頁、推薦色板、收藏清單
├── data/ # 250 色與推薦色票靜態資料
└── utils/ # 色彩轉換、WCAG 計算、匯出工具4. 開發與授權說明
- 本地開發：執行
npm install與npm run dev即可啟動開發伺服器。 - 部署方式：建置後的
dist可輕鬆部署至 GitHub Pages（透過 Settings → Pages 設定分支路徑）。 - 授權規範：本專案採用 Apache License 2.0。網頁結構與程式為專案原創；色碼資料改寫自公開之日本傳統色資料，僅作轉寫與在地化，非商業用途。