颜色明暗生成器 - 免费在线设计创意工具

← ToolBox / 颜色明暗生成器

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

🎨 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 是混入黑色得到更暗的色；按固定步长生成整组明暗色卡，用于按钮、背景与边框的层次设计。

基色 HEX（如 #6366F1）

每侧档数

⚠️ 使用说明与注意事项

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 算出对比度值与等级，未达标会标红提醒，便于及时换色或调深。
会保存或上传我的内容吗？: 结果以浏览器实时计算为准，纯前端本地处理、数据不上传；生成的样式与代码仅作快速产出参考，正式项目请以设计系统、规范与浏览器实测为准。