中 | EN

Color Playground -

快速生成和諧色彩，
輕鬆打造品牌配色。

Color Master hero 1

問題

平面設計師在生成品牌的配色方案，或 UI 設計師在生成介面配色時，需要同時檢查 WCAG 對比度，有時會遇到現有工具分散且操作繁瑣的問題， 因為現有工作流程需要使用多個工具並手動計算，這可能會造成最後生成配色時無法達到無障礙標準，或是缺乏和諧度，耗時又容易出錯。

使用者流程

  1. 輸入或選擇主色。
  2. 選擇配色規則和階數。
  3. 點擊「生成」來建立色彩表格。
  4. 查看色彩調色盤，檢查對比度，並預覽 UI 元件。
  5. 下載 CSS/JSON 程式碼或直接分享連結。
User Flow Diagram

解決方案

我設計了 Color Playground，一個簡化色彩調色盤生成的工具，同時確保可用性與無障礙標準。

1. 配色規則

為了不同的配色用途，Color Playground 提供了四種配色規則：

  • 單色 – 同色系的深淺變化。
  • 類似色 – 色輪上相鄰的色彩。
  • 互補色 – 色輪上高對比的色彩。
  • 三色 – 色輪上均勻分布的三色。

確保設計師可以在大膽探索的同時建立安全的組合。

2. 自動擴展調色盤

選擇配色規則並點擊生成後，工具會自動生成完整調色盤，其中包括：

  • 主色
  • 中性色調 (灰色、背景、邊框)
  • 語意色彩 (成功、警告、錯誤)
  • 互動狀態 (懸停、激活、禁用)

可以節省設計師手動建立 UI 配色方案的時間。

3. 無障礙整合

系統會檢查 WCAG 對比度，並標示是否符合 AA 或 AAA 標準。這可以減少在設計過程中無法達到無障礙標準的問題。

使用者流程

  1. 輸入或選擇主色。
  2. 選擇配色規則和階數。
  3. 點擊「生成」來建立色彩表格。
  4. 查看色彩調色盤，檢查對比度，並預覽 UI 元件。
  5. 下載 CSS/JSON 程式碼或直接分享連結。
User Flow Diagram
Color Palette Design Pen

關鍵功能

試用 Color Playground!