色彩明度生成器是一款为设计师和开发者打造的在线配色辅助工具。它的核心功能是接收一个基础颜色，自动生成该颜色的浅色系列（Tint）和深色系列（Shade），帮助用户快速构建和谐统一的色彩体系。
输入颜色：您可以通过三种方式指定基础颜色。第一种是使用页面顶部的颜色选择器，直接点击色块选取颜色。第二种是在文本框中输入HEX格式的颜色值，例如#FF5733。第三种是输入RGB或HSL格式的颜色值，例如rgb(255,87,51)或hsl(14,100%,60%)。工具会自动识别您输入的格式。
生成配色：点击「生成配色」按钮后，工具会在浅色区域生成10个逐渐变亮的颜色样本，在深色区域生成10个逐渐变暗的颜色样本。每个色块上标注了对应的HEX色值，鼠标悬停时色值会更加清晰。点击任意色块即可将色值复制到剪贴板，方便您在Photoshop、Figma、VS Code等设计或开发工具中直接粘贴使用。
应用场景：浅色系列非常适合用于按钮hover状态、背景色、边框色等需要降低饱和度的场景；深色系列则适合用于文字颜色、强调色、阴影色等需要增加视觉重量的场景。通过合理搭配Tint和Shade，您可以轻松创建出层次分明、视觉和谐的设计作品。
色彩明度生成器在网页设计、UI设计和品牌设计等领域有广泛的应用价值。以下是几个典型的使用场景：
网页按钮设计：在设计网页按钮时，通常需要一个主色以及对应的hover状态和active状态。使用本工具生成主色的Tint和Shade系列，可以快速选出hover时的浅色高亮色和active时的深色按下色。例如，主色为#2563EB时，选择Tint 20%作为hover色，选择Shade 30%作为active色，即可构建完整的按钮交互色彩体系。
渐变背景制作：现代网页设计大量使用渐变背景来增强视觉层次感。通过选取一个基础颜色的不同Tint和Shade组合，可以生成从浅到深、从左到右或从上到下的渐变效果。相比随机选取颜色，基于同一色相的明度渐变更加和谐自然，能够提升整体设计的专业度。
数据可视化配色：在制作图表和数据可视化内容时，同一色系的不同明度常被用来表示数据的不同级别或分类。例如，在热力图中，深色表示高强度，浅色表示低强度。使用本工具可以快速生成一组明度递进的配色，确保图表既美观又具有良好的可读性。
色彩模型基础：在计算机图形学中，颜色通常使用RGB（红绿蓝）模型表示。每个颜色通道取值范围为0到255，通过不同比例的三原色混合可以得到数百万种颜色。HEX格式是RGB的十六进制表示法，例如#FF5733表示红色通道255、绿色通道87、蓝色通道51。HSL（色相、饱和度、明度）模型则更符合人类感知颜色的方式，其中H代表色相（0-360度），S代表饱和度（0%-100%），L代表明度（0%-100%）。
Tint与Shade的区别：Tint和Shade是色彩理论中的两个基本概念。Tint是在原色中添加白色（在RGB中即同时增加R、G、B值）形成的较浅颜色，它保持了原色的色相但降低了饱和度。Shade是在原色中添加黑色（在RGB中即同时减少R、G、B值）形成的较深颜色，它同样保持了原色的色相但降低了明度。与之相对的是Tone（色调），即在原色中添加灰色。理解这三者的区别对于专业配色至关重要。
配色原则：在进行配色设计时，建议遵循60-30-10法则：主色占60%，辅助色占30%，强调色占10%。使用本工具生成的主色Tint和Shade系列可以作为辅助色和强调色的来源。此外，注意色彩的可访问性，确保文字与背景色的对比度满足WCAG标准，这对视力障碍用户非常重要。
Tint（色调）是指在原色中加入白色形成的较浅颜色；Shade（阴影色）是指在原色中加入黑色形成的较深颜色。两者都是色彩明度变化的体现，Tint让颜色更明亮柔和，Shade让颜色更深沉有力。
目前支持HEX（如#FF5733）、RGB（如rgb(255,87,51)）和HSL（如hsl(14,100%,60%)）三种格式输入。点击色卡即可自动复制对应的HEX色值到剪贴板。
可以。本工具生成的所有配色方案完全免费，无任何版权限制，可用于个人或商业项目。工具本身为纯前端应用，所有计算均在本地浏览器完成，数据不上传服务器。
本工具使用简单的线性插值算法生成Tint和Shade。如果需要更自然的色彩过渡，建议在HSL色彩空间中进行微调，或使用更专业的色彩管理工具。
建议使用本工具生成配色后，配合对比度检测工具（如WCAG对比度检查器）验证文字与背景色的对比度是否满足可访问性标准。一般要求正文对比度至少达到4.5:1。