Tailwind CSS 色彩參考

搜尋色彩或色碼

什麼是 Tailwind CSS 色彩系統？

Tailwind CSS 提供了一套完整的色彩調色盤，包含 22 個色彩族系，每個族系擁有 11 個色階（從 50 到 950）。這個工具讓你輕鬆瀏覽所有色彩、查看 HEX 色碼，並直接複製 Tailwind CSS 類別名稱。

如何使用

1. 在搜尋框中輸入色彩名稱（如「blue」）、色階（如「500」）或 HEX 色碼
2. 點擊任何色塊來複製 Tailwind CSS 類別名稱（如 bg-blue-500）
3. 複製的內容會顯示在色塊下方，同時頁面會彈出提示
4. 使用搜尋功能快速篩選需要的色彩

應用場景

• 網頁設計：快速找到配色方案中需要的確切色碼
• 開發效率：無需查文件即可複製類別名稱，加速開發流程
• 色彩參考：檢查 Tailwind 中所有可用的色彩變體
• 跨專案協作：與設計師和開發人員分享標準色碼

常見問題

為什麼要使用 Tailwind CSS 色彩？

Tailwind CSS 的色彩系統經過精心設計，確保一致性和可訪問性。每個色級都經過優化，以提供良好的對比度和視覺層次。

我可以在其他 CSS 框架中使用這些色碼嗎？

當然可以。雖然這些色碼來自 Tailwind CSS，但 HEX 值可以用於任何 CSS 框架或自訂樣式表中。只需複製 HEX 色碼部分。

如何快速複製 Tailwind 類別名稱？

只需點擊任何色塊即可複製對應的 Tailwind 類別名稱（如 text-red-500）。系統會自動複製到剪貼簿，並顯示成功提示。

這個工具支援哪些搜尋方式？

支援按色彩名稱（如「purple」）、色階（如「700」）或完整 HEX 色碼（如「#a855f7」）搜尋。搜尋不區分大小寫。

為什麼我的搜尋沒有結果？

請檢查拼寫。色彩名稱應使用英文（如 blue、red、emerald）。HEX 色碼應包含 # 符號。清除搜尋框可查看所有色彩。

這些色彩是 Tailwind CSS 的官方色盤嗎？

是的。此工具基於 Tailwind CSS v3 官方色彩配置，確保 100% 準確性。