跳到正文
馬克工具箱

↑ ↓ 選擇，回車開啟，Esc 關閉。

配色方案產生器

點「生成配色」或按空格鍵，馬上得到一組新配色。喜歡的顏色鎖定，再選鄰近色、互補色等規則繼續生成；下面的對比度表一眼看出哪種顏色可以寫在哪種顏色上。結果可以複製成 CSS 變數、Tailwind 主題色或 HEX 色值，也能下載成圖片。

在瀏覽器本地執行，輸入的內容和檔案都不會上傳

  • 🎨

    #22333B

    白字 13.1:1 AAA

  • 🎨

    #3D6B72

    白字 5.9:1 AA

  • 🎨

    #7FB3A8

    黑字 8.9:1 AAA

  • 🎨

    #E6D3A3

    黑字 14.2:1 AAA

  • 🎨

    #F4EFE6

    黑字 18.3:1 AAA

匯出

:root {
  --color-1: #22333b;
  --color-2: #3d6b72;
  --color-3: #7fb3a8;
  --color-4: #e6d3a3;
  --color-5: #f4efe6;
}

效果預覽

用這組顏色做的標題

正文用最深的顏色寫在最淺的顏色上，可以直觀看出用這組配色做的頁面讀起來是否清楚。

按鈕連結文字

文字與背景 11.4:1 · 連結與背景 5.2:1

哪些顏色可以搭配成文字和背景

每格是「行的顏色做文字、列的顏色做背景」。AA（4.5:1）是 WCAG 對正文的最低要求，AAA 是 7:1；「AA 大字」（3:1）只適合大號或加粗的標題。

文字 ↓ / 背景 →#22333b#3d6b72#7fb3a8#e6d3a3#f4efe6
#22333b2.2✗5.6AA8.9AAA11.4AAA
#3d6b722.2✗2.5✗4AA 大字5.2AA
#7fb3a85.6AA2.5✗1.6✗2.1✗
#e6d3a38.9AAA4AA 大字1.6✗1.3✗
#f4efe611.4AAA5.2AA2.1✗1.3✗
這個工具好用嗎？

使用步驟

  1. 點「生成配色」或按空格鍵，直到出現喜歡的顏色。
  2. 點 🔒 鎖定要保留的顏色，也可以直接輸入色值或用 🎨 選色；再生成時，其他顏色會圍繞鎖定的顏色搭配。
  3. 看一下對比度表，再按需要的格式複製，或下載 PNG 圖片。

引數說明

配色規則
鄰近色用相鄰的色相；單色只用一個色相、深淺不同；互補色用相對的兩個色相；三角色用間隔 120° 的三個色相；分裂互補色用一個色相加上它對面兩側的色相。「隨機」每次隨機選一種規則。
鎖定的顏色
原樣保留。第一個鎖定的彩色（不是灰色）同時作為其他顏色的基準色相。
對比度表
每格是一種顏色做文字、另一種做背景的對比度。AA（4.5:1）是 WCAG 2 對正文的最低要求，AAA 是 7:1，3:1 只適合大號或加粗的文字。
分享連結
配色會記在網址裡（#22333b-3d6b72-…），收藏或發給別人，開啟就是同一組顏色。

幾種配色規則怎麼選

規則 效果 適合
單色 同一個色相從深到淺 安靜的介面、品牌色深淺、單系列圖表
鄰近色 色相相鄰，比如青到藍 自然、柔和，配照片和插畫
互補色 兩個相對的色相 需要一個特別醒目的強調色
三角色 三個間隔 120° 的色相 活潑、色彩豐富的設計
分裂互補色 一個色相加上它對面兩側的色相 有對比，又比互補色溫和

用在網頁上的小建議

  1. 最淺的顏色做頁面背景、最深的做正文文字，頁面上的「效果預覽」就是這樣搭的。
  2. 最鮮豔的顏色留給按鈕和連結。注意它和背景的對比度，連結文字要到 4.5:1 才算達到 AA。
  3. 中間的幾種顏色用在邊框、卡片底色、標籤和插圖上，這些地方對對比度要求沒那麼高。

常見問題

顏色是怎麼選出來的？

在 OKLCH 色彩空間裡計算，它的亮度和人眼感覺一致。色相按選擇的規則排列，亮度從深到淺鋪開，飽和度限制在普通 sRGB 螢幕能顯示的範圍內。

怎麼用公司的品牌色做一套配色？

在任意一格輸入品牌色並鎖定，選「單色」或「鄰近色」後點生成，其他顏色會圍繞它的色相搭配。

文字該用什麼顏色？

每個色塊上標了放黑字還是白字更清楚，以及對比度。要用配色裡的顏色寫字，看對比度表，標 AA 或 AAA 的組合才適合正文。

Tailwind 匯出怎麼用？

匯出的是 Tailwind CSS v4 的 @theme 程式碼塊，貼上到主 CSS 檔案裡，就能用 bg-palette-1、text-palette-3 這樣的類名。

隱私說明

本工具完全在瀏覽器中執行，檔案和文字都在你的裝置上處理，不會上傳到我們的伺服器。

相關工具