色階產生器
給它一個品牌色,它就做出十檔,往淺(tint)和往深(shade)各走一段。輸出直接是 50 · 100 · … · 900 的寫法,Tailwind 和大多數設計系統拿去就能用。
🎨 全部在你的瀏覽器裡執行。不用裝,也不用註冊。
用在哪裡
- · 50~200 背景、淡強調、停用狀態
- · 400~600 按鈕、連結 —— 品牌色的主體
- · 700~900 按下狀態、深色背景上的文字
- 每一行右邊的提示,說的是拿那個顏色當背景時,白字或黑字有沒有過無障礙標準(4.5:1)。
這個工具能做什麼
- 從 50 到 900 共十檔
- 每一檔的 HEX 和 HSL
- 標出白字還是黑字讀得動
- 整套複製成 CSS 變數
其他顏色工具
顏色會因螢幕和色彩描述檔而略有差別。