https://benzhub.github.io/tags/%E8%89%B2%E5%BD%A9/Recent content in 色彩 on BenzHubHugozh-TWSat, 15 Aug 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/015-colors/Sat, 15 Aug 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/015-colors/<blockquote> <p>版面搭好了，是時候替它上色。<strong>TailwindCSS</strong> 內建一套精心設計的調色盤：22 種色相、每種從 <strong>50 到 950</strong> 共 11 個明度色階，透過 <code>text-*</code>／<code>bg-*</code>／<code>border-*</code>／<code>ring-*</code> 統一套用，還有一顆斜線就搞定的透明度速記（<code>bg-blue-500/50</code>）。這一篇會帶你認識整套色階系統、v4 預設改用的 <strong>OKLCH</strong> 廣色域、如何用 <code>@theme</code> 打造品牌色，以及對比度與透明度的最佳實踐。這是 <strong>TailwindCSS 完整教學</strong> 系列的第十五篇，也是視覺樣式章（TW-4）的開場。</p> </blockquote>