Tints & Shades Generator

Base Color

Tints (lighter)

#5090f7Tint 10%

#639cf8Tint 20%

#77a8f9Tint 30%

#8ab5f9Tint 40%

#9ec1faTint 50%

#b1cefbTint 60%

#c5dafcTint 70%

#d8e6fdTint 80%

#ecf3feTint 90%

#ffffffTint 100%

Shades (darker)

#1f71f4Shade 10%

#0b60eaShade 20%

#0a54cdShade 30%

#0848afShade 40%

#073c92Shade 50%

#063075Shade 60%

#042458Shade 70%

#03183aShade 80%

#010c1dShade 90%

#000000Shade 100%

技术详情

色调/色阶生成器的工作原理

工具功能

色调/色阶生成器可基于任意基色生成一系列从浅到深的色彩变体，包括 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 的色阶插件，它们提供可编程的色阶生成方法和更精确的色彩空间控制。