Tailwind 色階產生器(50-950)
輸入一個品牌色,自動生成完整 11 階色階(50-950),透過 OKLab 感知色彩空間計算,保留色相與品牌一致性。一鍵輸出 Tailwind v4 @theme / v3 config / CSS variables。
色階預覽 (離原色最近的階差 ΔE = 0.038)
輸出格式
theme
@theme {
--color-brand-50: #dcf7ff;
--color-brand-100: #c3eaff;
--color-brand-200: #9dd2ff;
--color-brand-300: #75b3ff;
--color-brand-400: #4b8ffd;
--color-brand-500: #276ee0;
--color-brand-600: #0251c1;
--color-brand-700: #00369e;
--color-brand-800: #001a75;
--color-brand-900: #000650;
--color-brand-950: #000030;
}
›如何使用
- 上方輸入你的品牌色(hex / rgb / hsl / oklch 都可以)+ 一個名稱(會出現在輸出的 class 名,如
brand-500)。 - 中間色階預覽即時更新,點任一色塊複製 hex;最左淡、最右深,共 11 階。
- 下方四個 tab 切換輸出格式:Tailwind v4
@theme、v3 config、CSS variables、Hex 列表,點右上 Copy 直接複製。 - 整個工具狀態同步進 URL hash,複製網址就能分享配色。
Tips
- 演算法在 OKLab 感知色彩空間 操作 — 色相不漂移、亮度均勻,比傳統 HSL 直接調 L 值的結果好很多。
- Tailwind v4 起內建 OKLCH 支援,
@theme是最推薦的輸出(可享受 v4 的色彩混合功能)。 - 名稱規則:任意輸入會自動清理成
kebab-case(My Brand!→my-brand),空白會 fallback 成brand。 - 想對齊現有 Tailwind 色?把預設的
bg-sky-500(#0ea5e9) 等貼進來看色階差異 — 我們生成的 500 跟原色非常接近,但其他階會略有不同(本工具優先品牌一致性而非匹配官方數字)。