把任意颜色变成设计系统级的 11 阶色阶（50→950）：OKLCH 感知均匀插值，原色锚定在它该在的档位，每阶标注对白/对黑 WCAG 对比度，一键导出 Tailwind / CSS 变量 / SCSS / JSON。
// tailwind.config.js / @theme
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: "#fff4f3",
100: "#ffe0dd",
200: "#ffc6c2",
300: "#ffa9a6",
400: "#ff8785",
500: "#f86164",
600: "#e53745",
700: "#cc0029",
800: "#af000e",
900: "#8d0000",
950: "#650000",
},
},
},
},
};从一个颜色拉出 11 阶设计系统色阶，全程 OKLCH 感知均匀。
粘一个 HEX，或从任意颜色档案页点「拉成完整色阶」把值带进来。
原色自动锚定最接近的一阶；每阶下面直接标着对白、对黑的 WCAG 对比度。
选 Tailwind / CSS 变量 / SCSS / JSON 四种格式之一，一键复制进代码。
关于色阶生成，用户真会问的四个问题。
从这里继续，把颜色用出来。