色调与明暗生成器

色彩明度与阴影生成器的工作原理

工具功能

明度与阴影生成器可从任意基准色生成更浅的明度（与白色混合）和更深的阴影（与黑色混合）。输入颜色并选择步数，即可生成平滑的渐变变化。每一步都会显示 HEX、RGB 值以及混合百分比，便于为 UI 设计、品牌与数据可视化构建一致的色阶。

常见开发者使用场景

开发者在构建设计令牌色阶（例如 blue-100 到 blue-900）、为交互元素创建悬停与激活状态、设计可访问的颜色层级，以及为浅色与深色主题生成一致的背景与表面颜色时，会使用明度与阴影生成器。该工具对于构建 Tailwind CSS 自定义调色板或 Material Design 颜色系统至关重要。

明度与阴影的工作方式

明度（tint）通过将颜色与白色混合来生成，从而提高明度。阴影（shade）通过与黑色混合来生成，从而降低明度。明度的公式为：new = base + (255 - base) × factor。阴影的公式为：new = base × (1 - factor)。步进会在基准色与纯白（明度）或纯黑（阴影）之间均匀分布，从而产生线性的颜色值渐变。

常见陷阱与边界情况

用白色或黑色进行线性混合，可能会让某些色相的明度显得发白、阴影显得浑浊。黄色在变暗时可能偏绿，蓝色在变亮时可能失去鲜艳度。若需要感知上更均匀的色阶，可考虑使用 OKLCH 或 CIELAB 色彩空间。务必验证最浅的明度与最深的阴影在其目标背景上仍保持足够的对比度。

何时使用此工具而非代码

在设计工作中，使用此浏览器工具快速探索并生成色阶。对于生产级设计系统，可使用 chroma.js 或 culori 等颜色库以编程方式生成明度与阴影，这些库支持感知均匀的色彩空间，并可按任意格式输出设计令牌。