Tailwind 色彩生成
從 1 個 Hex 色碼生成 Tailwind CSS 的 50～950 共 11 階調調色盤與設定程式碼
特色
從 1 色自動生成 11 階調
將輸入色設為 500，計算 50～950 的明暗度
支援 v3 與 v4 兩種格式
以標籤頁切換 config 與 @theme 的寫法
逐階調複製 Hex 色碼
透過各色樣按鈕逐色複製色彩代碼
同步更新調色盤
無需執行按鈕，邊試色邊比較
使用方法
輸入基準色的 Hex 色碼
輸入 Hex 色碼，或點擊左側色樣以顏色選擇器選取
視需要輸入色名
以英小寫輸入程式碼中使用的色名。空欄時使用 primary
確認 11 階調色樣
確認 50～950 的色樣與 Hex 色碼，透過色樣複製按鈕逐色複製
選擇輸出格式後複製
選擇 v3 或 v4，點擊「複製程式碼」貼入 tailwind.config.js 或 CSS 檔案
使用情境
建立品牌色的明暗變化
從品牌色 1 色統一生成按鈕懸停與背景所需的明暗度
新增標準調色盤外的色彩
將 Tailwind 標準色中沒有的專案獨特色彩以 11 階調新增至設定檔
建立 v4 的 @theme 設定
從網站主色彩一次寫出 Tailwind v4 的 CSS 變數
設計稿實裝前準備
從稿件指定色準備實裝用 11 階調程式碼，並轉錄至設計工具
基礎知識
Tailwind 的 50～950 代表意義
Tailwind CSS 的色彩以 50 最淡、950 最深的 11 級數字表示明亮度，其中 500 為該色的基準。數字以「bg-primary-500」或「text-primary-700」的形式附在類別名稱末尾使用。
- 50～300 階段：50～300 階段常用於背景色或淡色填充，是明亮色彩，深色文字重疊其上仍易於閱讀。
- 600～950 階段：600～950 階段常用於按鈕懸停或標題文字色，是暗色彩，在白色背景上也清晰可見。
v3 與 v4 的色彩定義方法差異
Tailwind CSS v3 在 tailwind.config.js 的 JavaScript 中定義色彩，v4 則在 CSS 檔案的 @theme 內以 CSS 變數定義。無論哪種寫法，定義的色彩都能以「bg-primary-500」等相同的類別名使用。
- v3 的寫法：v3 的寫法是在 theme.extend.colors 內以「primary: { 500: '#3B82F6' }」的形式巢狀入色名與階段。
- v4 的寫法：v4 的寫法是在 @theme 內以「--color-primary-500: #3B82F6;」的形式以連字號連接色名與階段的變數名。
安全性與隱私
瀏覽器內完成
輸入的資料僅在您的瀏覽器內處理，不會傳送到外部。
僅在瀏覽器內處理
調色盤計算與程式碼生成完全在您的瀏覽器內進行，輸入資料不會傳送到伺服器。
通訊透過HTTPS加密
頁面載入也透過TLS加密，第三者無法讀取內容。
不傳送給第三方
輸入內容不會傳送給廣告網路、追蹤器等外部服務。
結果不自動保存
輸入的色彩或色名和輸入建議不會保存在伺服器上。
在 Google 搜尋中追蹤 RAKKOTOOLS
187個實用工具，透過 Google 搜尋、AI 搜尋更容易找到！
- 搜尋中找到
- AI 搜尋也會顯示
- 發現新工具
更新資訊
- update #318
新增 Tailwind 色彩生成功能，從 1 種顏色產生 11 階調色彩與設定程式碼