tools.color-shade-tint.shades
#3b82f6
tools.color-shade-tint.tints
:root {
--shade-10: #050c16;
--shade-9: #0b182d;
--shade-8: #102343;
--shade-7: #152f59;
--shade-6: #1b3b70;
--shade-5: #204786;
--shade-4: #26539d;
--shade-3: #2b5fb3;
--shade-2: #306ac9;
--shade-1: #3676e0;
--base: #3b82f6;
--tint-1: #4d8df7;
--tint-2: #5f99f8;
--tint-3: #70a4f8;
--tint-4: #82aff9;
--tint-5: #94bbfa;
--tint-6: #a6c6fb;
--tint-7: #b8d2fc;
--tint-8: #caddfd;
--tint-9: #dbe8fd;
--tint-10: #edf4fe;
}工具说明
在线色彩明暗生成器，选取一个基础颜色自动生成 10 级亮色（Tint）和 10 级暗色（Shade），点击复制色值，一键导出 CSS 变量，适合设计系统配色。
colorshadetint色彩明暗色阶palette
常见问题
- 色彩明暗生成 是什么？
- 在线色彩明暗生成器，选取一个基础颜色自动生成 10 级亮色（Tint）和 10 级暗色（Shade），点击复制色值，一键导出 CSS 变量，适合设计系统配色。 本工具属于 ToolNext 在线工具箱的设计工具分类。
- 如何使用 色彩明暗生成？
- 使用可视化控件调整参数，实时预览效果。满意后点击复制按钮获取生成的代码或下载结果。
- 色彩明暗生成 生成的结果可以直接用在项目中吗？
- 可以。色彩明暗生成 生成的代码和样式完全符合 Web 标准，可以直接复制粘贴到你的 CSS、HTML 或设计项目中使用，无需额外修改。
- 色彩明暗生成 支持实时预览效果吗？
- 支持。色彩明暗生成 提供实时可视化预览，当你调整参数时效果会即时更新。这种所见即所得的体验能帮你快速找到最佳的设计方案。
- 使用 {name} 需要注册账号吗？
- 不需要。ToolNext 上所有工具无需登录或注册即可直接使用，打开就能用。
- 色彩明暗生成 支持手机使用吗？
- 支持。色彩明暗生成 采用响应式设计，在手机、平板和电脑上均可正常使用。