Color Shade Generator - ToolBox

← ToolBox / 颜色明暗生成器

📖 查看「颜色明暗生成器使用指南」

🎨 颜色明暗生成器

在基色上按比例混入白色得到 tint（更亮），混入黑色得到 shade（更暗）。指定档数即可生成一组协调的明暗色卡，方便做按钮、背景层次。

📐 工作原理与说明

本设计工具基于通用设计规范与算法，纯前端处理，数据不上传。工具名称：颜色明暗生成器。

基色 HEX（如 #6366F1）

每侧档数

⚠️ 使用说明与注意事项

tint 是基色混入白色（t→1 越亮），shade 是基色混入黑色（越暗），线性混合即可获得平滑过渡。
HEX 支持 3 位简写（如 #F60）与 6 位标准写法，工具会自动展开。
无障碍配色建议保证文字与背景的对比度（WCAG AA 至少 4.5:1），不要只看美观。

📋 说明

左→右为由浅（tint）到基色再到深（shade）的渐变；每侧档数即混入白/黑的比例步数。

设计系统（如 Tailwind 的 50–900）常用这种按明度分档的色板组织方式。

📚 深度解析：Color Shade Generator

💡 常见使用场景

快速核对Color Shade Generator：优先统一输入单位、口径和参数范围，再对典型样例做一遍手工验算。
教学与复核：建议固定其余参数，只变动一个输入变量，确认输出变化趋势，避免“算式正确但口径错位”。
常见场景：颜色明暗生成器

快速复核「Color Shade Generator」

先输入一组典型参数跑基准值，再做 ±10%、±20% 调参演算，检查输出是否沿业务常识方向变化。

❓ 常见问题（FAQ）

Color Shade Generator 结果可直接用于决策吗？: Color Shade Generator 适合用于预估与复核，正式决策请结合完整数据口径说明（口径定义、时间区间、边界条件）。
结果偏离预期很大怎么办？: 先核对输入单位与是否存在“% 与小数”混用，再确认分母与分子定义是否同口径，最后替换一组可复现实例复测。