設計 / 顏色
Tailwind 色階產生器
將一種品牌色彩轉換成從50到950的完整Tailwind CSS色盤，使用與Tailwind自有色彩相同的OKLCH方式建立，並可複製為Tailwind 4主題CSS、Tailwind 3設定檔或CSS變數。
Tailwind 色階產生器: 每個色階都會採用Tailwind自有色盤在該步驟中的明度、彩度與些微色相偏移，這些特性是在OKLCH色彩空間中測量，再進行調整，讓你的色彩準確落在指定色階。灰色則會改用Tailwind的灰色系列。如果sRGB色域無法顯示某些色彩，工具會像瀏覽器一樣使用CSS Color 4的色域映射方法處理；Tailwind 4輸出會保留OKLCH值，其他格式則使用十六進位色碼。 全程在瀏覽器中於本機執行，檔案不會上傳至伺服器。
- 分類
- 日常工具
- 使用次數
- 在瀏覽器中
- 費用
- 免費・免註冊
- 可用狀態
- 可立即使用
全程在瀏覽器中執行
#f2f8ffoklch(97.6% 0.012 250.3)#dfecffoklch(93.9% 0.029 258.1)#bcd9ffoklch(87.6% 0.061 255.8)#8fbeffoklch(79.3% 0.106 256.6)#5e9cffoklch(69.6% 0.16 259.5)#3b82f6oklch(62.3% 0.188 259.8)#2668daoklch(54.2% 0.187 260.6)#1f57b6oklch(47.7% 0.163 260.6)#1f4997oklch(42.3% 0.137 261.4)#20417coklch(38.4% 0.109 261.4)#15274coklch(27.9% 0.073 263.2)CSS (@theme)
@theme {
--color-brand-50: oklch(97.6% 0.012 250.3);
--color-brand-100: oklch(93.9% 0.029 258.1);
--color-brand-200: oklch(87.6% 0.061 255.8);
--color-brand-300: oklch(79.3% 0.106 256.6);
--color-brand-400: oklch(69.6% 0.16 259.5);
--color-brand-500: oklch(62.3% 0.188 259.8);
--color-brand-600: oklch(54.2% 0.187 260.6);
--color-brand-700: oklch(47.7% 0.163 260.6);
--color-brand-800: oklch(42.3% 0.137 261.4);
--color-brand-900: oklch(38.4% 0.109 261.4);
--color-brand-950: oklch(27.9% 0.073 263.2);
}
各色階會依照Tailwind自有調色盤在OKLCH中的明度、彩度與色相變化製作，因此使用Tailwind的blue-500建立的色階，與Tailwind的藍色之間僅有幾個幾乎無法察覺的色差。超出sRGB範圍的顏色會使用CSS Color 4的色域對映方法納入。
使用色階
常見的用法是以50–100作為頁面和卡片背景、200–300作為邊框、500–600作為按鈕和連結、700作為滑鼠懸停狀態，以及800–950作為淺色背景上的文字。請使用色彩對比檢查工具檢查文字與背景的搭配。
Tailwind 4與OKLCH
Tailwind CSS 4以OKLCH定義色彩，可在廣色域螢幕上描述超出sRGB範圍的色彩。這裡產生的Tailwind 4輸出會維持在sRGB範圍內，因此在每個螢幕上看起來都相同。
使用方式
- 選擇色彩，或貼上其十六進位色碼。
- 選擇它應該對應的色階，通常是500；也可以讓產生器自動配置。
- 複製Tailwind 4、Tailwind 3或純CSS變數的程式碼。
隱私與限制
所有內容都會在你的瀏覽器中產生。
相關工具
常見問題
為什麼使用OKLCH？
OKLCH的等距明度步階，無論色相為何，看起來都像是等距的步階。因此，以相同方式建立的黃色與藍色色階，在對比度上會相互一致；HSL則無法做到這一點。
我的品牌色彩應該對應哪個色階？
通常是500或600，Tailwind會在這些色階保留最鮮明的色彩。非常明亮的色彩，例如粉彩色，較適合放在200或300；選擇「自動」則會依明度配置。
這些色階上的文字容易閱讀嗎？
一般來說，白色文字需要搭配600或更深的色階，深色文字則需要搭配400或更淺的色階，但請使用對比度檢查工具確認每一組搭配。
免費工具・使用在瀏覽器中次・免註冊