MUTools

色彩與設計工具

關於色彩與設計工具

協助配色與設計工作的免費工具集，包含選色器、色碼轉換、對比度檢查、調色盤產生等。全部在瀏覽器中執行，免註冊、免安裝。

適合用於決定 UI 配色、檢查符合無障礙（WCAG）的對比度、挑選品牌色等情境。適合設計師、網頁開發者、前端工程師等所有處理顏色的人。

色彩與設計工具一覽

色彩選擇器

從圖片中擷取顏色並取得色碼的免費色彩選擇器，可用放大鏡依像素精準拾取，支援 HEX / RGB / HSL 切換與調色盤匯出。免費、免註冊。

  • 設計與配色
  • 效率

圖片配色擷取

線上圖片取色工具，上傳圖片即可自動從圖片擷取主要配色（代表色／主色）並產生調色盤。支援 HEX/RGB/HSL 三種格式、顯示各顏色占比、可調整 4–12 種顏色，並能匯出 JSON、CSS 變數、SCSS 或 Tailwind 設定。圖片不上傳伺服器，全程在瀏覽器中完成，免費且無需註冊。

  • 擷取
  • 設計與配色

配色產生器

只要選一個基準色，就能依配色理論自動產生互補色、類似色、三角配色等配色方案的免費配色產生器。可輸出 CSS 變數、Tailwind、SCSS、JSON 格式，並提供對比度參考，全程在瀏覽器中完成。

  • 產生器
  • 設計與配色

色碼轉換

在 HEX、RGB、HSL、HSV、OKLCH 色碼之間互相轉換的免費工具，支援透明度（RGBA、8 位 HEX）與 CMYK 參考值，一鍵複製任意格式，全程在瀏覽器中完成。

  • 轉換
  • 設計與配色

對比度檢查

即時計算前景色與背景色對比度的免費對比度檢查工具，依 WCAG 2.1/2.2 判定 AA、AAA 是否合格，並支援合格色建議、色覺（色盲）模擬與 APCA，全程在瀏覽器中完成。

  • 檢查
  • 設計與配色
  • 無障礙

CSS 漸層產生

以 GUI 操作顏色、方向與色彩停駐點,即可自動產生 CSS 漸層程式碼的免費漸層產生器。支援線性、放射、圓錐（conic）漸層,可調整不透明度,並輸出 CSS 變數、Tailwind、SCSS 格式與分享 URL。複製即可使用,全程在瀏覽器中完成。

  • 產生器
  • 開發
  • 設計與配色

CSS 陰影產生器

box-shadow 產生器，可用滑桿即時調整 CSS 陰影（box-shadow、drop-shadow）。支援多圖層、inset 內陰影、新擬態（Neumorphism）、長陰影、發光等預設，並能輸出 CSS、CSS 變數、Tailwind、SCSS 與分享 URL。免費、免註冊，全程在瀏覽器中完成。

  • 產生器
  • 設計與配色

顏色名稱與相近色查詢

免費的顏色名稱查詢工具：輸入 HEX 或 RGB 即可找出最相近的 CSS / Web 顏色名稱，也能用顏色名稱反查 HEX、RGB。適合查詢十六進位顏色名稱、相近顏色與 CSS 顏色名稱。全程在瀏覽器中完成。

  • 檢查
  • 設計與配色

Tailwind 色階產生器

只要指定一個基準色，就能自動產生 Tailwind 風格 50-950（11 階）色階的免費 Tailwind 調色盤工具。可輸出 Tailwind v4 的 @theme（OKLCH）、v3 的 config、CSS 變數與 JSON，並支援 HEX／OKLCH／HSL／RGB 顯示切換與對比度參考，全程在瀏覽器中完成。

  • 產生器
  • 開發
  • 設計與配色

其他分類