首頁·顏色工具·色階產生器

色階產生器

給它一個品牌色,它就做出十檔,往淺(tint)和往深(shade)各走一段。輸出直接是 50 · 100 · … · 900 的寫法,Tailwind 和大多數設計系統拿去就能用。

🎨 全部在你的瀏覽器裡執行。不用裝,也不用註冊。

用在哪裡

  • · 50~200 背景、淡強調、停用狀態
  • · 400~600 按鈕、連結 —— 品牌色的主體
  • · 700~900 按下狀態、深色背景上的文字
  • 每一行右邊的提示,說的是拿那個顏色當背景時,白字或黑字有沒有過無障礙標準(4.5:1)。

這個工具能做什麼

  • 從 50 到 900 共十檔
  • 每一檔的 HEX 和 HSL
  • 標出白字還是黑字讀得動
  • 整套複製成 CSS 變數

其他顏色工具

顏色會因螢幕和色彩描述檔而略有差別。