//
由单一主色计算符合感知亮度的 11 级平滑色阶,一键导出 Tailwind v4、v3 与 CSS 变量
@theme {
--color-primary-50: #f3f3fc;
--color-primary-100: #dddef8;
--color-primary-200: #b8b9f4;
--color-primary-300: #898bf1;
--color-primary-400: #4f52ed;
--color-primary-500: #151aea;
--color-primary-600: #1215c5;
--color-primary-700: #11149c;
--color-primary-800: #0f1275;
--color-primary-900: #0c0e50;
--color-primary-950: #090a2f;
}// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: {
50: '#f3f3fc',
100: '#dddef8',
200: '#b8b9f4',
300: '#898bf1',
400: '#4f52ed',
500: '#151aea',
600: '#1215c5',
700: '#11149c',
800: '#0f1275',
900: '#0c0e50',
950: '#090a2f',
}
}
}
}
}:root {
--primary-50: #f3f3fc;
--primary-100: #dddef8;
--primary-200: #b8b9f4;
--primary-300: #898bf1;
--primary-400: #4f52ed;
--primary-500: #151aea;
--primary-600: #1215c5;
--primary-700: #11149c;
--primary-800: #0f1275;
--primary-900: #0c0e50;
--primary-950: #090a2f;
}Tailwind 色阶生成器 (50-950) 是一款专为开发者设计的高性能在线小工具。由单一主色计算符合感知亮度的 11 级平滑色阶,一键导出 Tailwind v4、v3 与 CSS 变量
所有代码逻辑与文本处理全部在您的本地浏览器中完成,数据 100% 纯客户端安全运算。
基于现代前端算法实现,支持键盘快捷键与即时计算,大幅缩短日常开发调试时间。
完全免费且无需注册登录,支持跨平台主流浏览器无缝运行,随开随用。
本工具经过轻量化算法优化,多数常规体量任务在数毫秒内完成。对于超大输入,浏览器可能会短暂占用计算资源,建议分批次处理以获最佳体验。
本工具所有运算逻辑全部在您的本地浏览器中完成,数据 100% 纯客户端处理,确保研发数据安全。