颜色明暗生成器
在基色上按比例混入白色得到更亮的 tint、混入黑色得到更暗的 shade，指定档数生成协调的明暗色卡。
🎨 Color Shade & Tint Generator
Mix a base colour with white for lighter tints and with black for darker shades to build a coordinated ladder for buttons and backgrounds.
📐 工作原理与说明
tint = C·(1−t) + 255·t；shade = C·(1−t) + 0·t（t 为混合比例，0 ≤ t ≤ 1）
按线性混色：tint 是在基色上按比例混入白色得到更亮的色，shade 是混入黑色得到更暗的色；按固定步长生成整组明暗色卡，用于按钮、背景与边框的层次设计。
⚠️ 使用说明与注意事项
- tint 是基色混入白色（t→1 越亮），shade 是基色混入黑色（越暗），线性混合即可获得平滑过渡。
- HEX 支持 3 位简写（如 #F60）与 6 位标准写法，工具会自动展开。
- 无障碍配色建议保证文字与背景的对比度（WCAG AA 至少 4.5:1），不要只看美观。
📋 说明
左→右为由浅（tint）到基色再到深（shade）的渐变；每侧档数即混入白/黑的比例步数。
设计系统（如 Tailwind 的 50–900）常用这种按明度分档的色板组织方式。
📚 深度解析：Color Shade Generator
💡 常见使用场景
- 生成组件的 state 色阶。
- 做图表序列色。
- 补设计系统的 shade。
生成橙色彩阶 50~900
<p><strong>输入：</strong>基色 #FF6B35。</p><p><strong>处理：</strong>在 OKLCH/HSL 上推明度梯度。</p><p><strong>输出：</strong>50/100/…/900 共 10 档 HEX。</p>
❓ 常见问题（FAQ）
- 为什么不用固定加减？
- 人眼对亮度的感知非线性，按感知均匀色彩空间推更自然。结果以浏览器实时计算为准，纯前端本地处理、数据不上传；生成的样式与代码仅作快速产出参考，正式项目请以设计系统、规范与浏览器实测为准。
- 两种色对比度不够会提示吗？
- 会按 WCAG 算出对比度值与等级，未达标会标红提醒，便于及时换色或调深。
- 会保存或上传我的内容吗？
- 结果以浏览器实时计算为准，纯前端本地处理、数据不上传；生成的样式与代码仅作快速产出参考，正式项目请以设计系统、规范与浏览器实测为准。