Tints & Shades Generator

色调/色阶生成器可基于任意基色生成一系列从浅到深的色彩变体，包括 tint（添加白色，变亮）和 shade（添加黑色，变暗）两个方向。该工具通常生成等间距的色阶（如 50-950，共 10 个级别），类似于 Tailwind CSS 或 Material Design 的色彩体系。每个级别的颜色保持相同的色相和饱和度，仅亮度改变。

色调/色阶是设计系统与 UI 开发的核心：Tailwind CSS 和 Material Design 都使用 50-900 色阶定义色彩系统。开发者在创建按钮 hover/active 状态时需要更深色 shade、背景色和卡片需要更浅色 tint、数据可视化需要同一色相不同强度的渐变色、以及渐变效果和多层阴影需要同一颜色的多个强度级别。暗色模式切换时通常也需要从浅色调色板对应到深色调色板。

调色板生成器 可将色阶组合为完整的项目调色板。颜色和谐生成器 可确定色阶的基色。颜色对比度检查器 可验证每个色阶的可访问性。色盲模拟器 可检查不同色阶是否可被区分。

色调变化通过调整颜色的亮度（Lightness）实现。在 HSL 色彩空间中，tint 是通过提高亮度（L）值并可能降低饱和度创建，shade 是通过降低亮度值。高质量的色阶生成不是简单的线性插值，而是考虑了人眼对亮度的非线性感知（使用 LCH 或 OKLCH 色彩空间），确保每个阶梯在视觉上感知为均匀的亮度变化。一些算法还会在极端亮度时自动调整饱和度以保持颜色可辨识性。

• 饱和度下降：过于简单线性插值可能在浅色端产生灰白的颜色，好的生成器会在浅色端自动修正饱和度。
• 级数选择：色阶级数过多导致相邻阶难区分，过少则不足以表达设计需求。通常 10 级（50-950）是比较实用的范围。
• 暗色基色：使用非常暗或非常亮的基色时，可调整的 tint/shade 空间有限，可能需要手动扩展色阶范围。
• 色彩空间差异：在 HSL 与 LCH/OKLCH 空间中生成的色阶视觉感知不同。LCH/OKLCH 提供更均匀的感知亮度，但浏览器支持度较新。

在设计阶段确定品牌色阶、创建设计系统色彩体系或快速评估颜色的可用性时使用此工具。前端开发者可在项目初期用它为 Tailwind 或 CSS 自定义属性生成完整的色阶定义。对于需要在代码中动态生成色阶的场景，推荐使用 color.js、chroma.js 或 Tailwind 的色阶插件，它们提供可编程的色阶生成方法和更精确的色彩空间控制。