將任意顏色轉換為設計系統級的 11 階色階（50→950）：以 OKLCH 感知均勻插值，原色會錨定在對應的階段，每個階段都標註對白/對黑的 WCAG 對比度，可一鍵匯出 Tailwind / CSS 變數 / SCSS / JSON。
// tailwind.config.js / @theme
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: "#fff8f3",
100: "#ffe7da",
200: "#ffd0b7",
300: "#ffb690",
400: "#f9935b",
500: "#ef772b",
600: "#dd5500",
700: "#c53200",
800: "#a90600",
900: "#890000",
950: "#630000",
},
},
},
},
};從一個顏色拉出 11 階設計系統色階，全程 OKLCH 感知均勻。
貼一個 HEX，或從任意顏色檔案頁點「拉成完整色階」把值帶進來。
原色自動錨定最接近的一階；每階下面直接標著對白、對黑的 WCAG 對比度。
選 Tailwind / CSS 變數 / SCSS / JSON 四種格式之一，一鍵複製進代碼。
關於色階生成，用戶真會問的四個問題。
從這裡繼續，把顏色用出來。