色调与色度生成器 - 明暗渐变色卡制作

步骤一：选择基础颜色

打开色调与色度生成器页面后，首先需要确定渐变色卡的基础颜色。您有两种方式可以选择：

• 使用颜色选择器：点击颜色选择器控件，在弹出的色相环和明度/饱和度面板中拖动选择器，直观地找到您想要的基础颜色。这种方式适合还在探索阶段、没有确定目标颜色的用户。
• 直接输入HEX代码：如果您已经确定了品牌色或主题色的精确HEX值，可以直接在输入框中键入颜色代码（如 #2563EB），按回车确认后即可立即生成对应的渐变色卡。这种方式更加精确高效。

您也可以从预设颜色库中快速选择常用颜色，点击预设色块即可一键切换基础颜色，无需手动输入或调节，非常适合快速测试不同颜色的渐变效果。

步骤二：调整Tint和Shade数量

在基础颜色确定后，接下来需要设置浅色（Tint）和深色（Shade）的生成数量。默认情况下，Tint和Shade各生成4个色阶，总共8个变体加上1个基础色，共形成9级渐变。

根据您的实际需求进行调整：

• 如果只需要少量的浅色背景变体（如按钮的悬停状态），可以将Tint数量减少到2-3个。
• 如果需要构建完整的设计系统色彩层级，可以将Tint和Shade各增加到6-8个，获得更丰富的渐变选择。
• 如果只需要深色变体（如文字颜色层级），可以将Tint数量设为0或1，专注于Shade系列的生成。

Tint和Shade数量支持独立调节，这种灵活的设计让您能够根据项目的具体需求定制色卡结构，避免生成不必要的色阶，保持色卡的精简和实用。

步骤三：设置步长百分比

步长是控制渐变色阶之间变化幅度的关键参数。步长数值越大，相邻色阶之间的明度差异越明显；步长数值越小，过渡越平滑细腻。

推荐设置参考：

• 10%（默认推荐）：适合大多数常规设计场景，色阶过渡自然，视觉层次分明。
• 20-25%（强烈对比）：适合需要醒目视觉效果的场景，如营销页面的按钮状态变化、数据可视化的强度分级等。
• 5-8%（细腻过渡）：适合高端品牌设计、精致UI界面等需要微妙色彩变化的场景。
• 15%（中等强度）：在默认和强烈之间的折中选择，适合中等复杂度的设计项目。

您可以根据实际预览效果反复微调步长参数，直到获得满意的渐变坡度。步长的调整会即时反映在色卡预览中，方便您直观判断效果。

步骤四：选择输出格式

色卡生成后，通过工具提供的格式切换按钮选择您需要的颜色输出格式：

• HEX格式（如 #5DADE2）：最常用的网页颜色表示法，适合直接嵌入CSS样式表。6位十六进制数表示RGB三个通道的值，简洁直观。
• RGB格式（如 rgb(93,173,226)）：分别显示红（R）、绿（G）、蓝（B）三个通道的十进制数值（0-255），便于理解颜色的组成成分，也适合在需要透明度时扩展为RGBA格式。
• HSL格式（如 hsl(204,70%,63%)）：以色相（Hue, 0-360°）、饱和度（Saturation, 0-100%）、亮度（Lightness, 0-100%）三个维度描述颜色，更符合人类对颜色的直觉认知，特别适合在HSL色彩空间中进行进一步的微调。

三种格式之间可以随时切换，色卡上的所有颜色值会同步更新，无需重新生成。

步骤五：复制和使用颜色值

当色卡调整到满意的效果后，就可以将颜色值复制到您的项目中使用：

• 单个复制：点击色卡中的任意色块，工具会自动将该颜色的当前格式值复制到系统剪贴板，并显示"已复制"的视觉提示。您可以直接粘贴到CSS代码、设计工具或任何需要颜色值的地方。
• 批量复制：点击"复制全部"按钮，工具会将所有色阶的颜色值以列表形式一次性复制到剪贴板，方便您批量导入到设计系统或样式表中。

复制后的颜色值可以直接用于CSS变量定义、Tailwind配置、设计工具的色板导入等多种场景。例如，将色卡中的颜色值定义为CSS自定义属性，构建完整的色彩令牌体系。

步骤六：构建完整的CSS色彩体系

将生成的颜色值整合到您的项目中，构建专业级的CSS色彩管理体系。以下是推荐的实践方法：

定义CSS变量：在:root选择器中定义所有色阶的CSS自定义属性，建立全局可用的色彩令牌（Design Tokens）。这样整个项目中的所有组件都可以引用统一的颜色变量，确保色彩一致性。

语义化命名：为颜色变量赋予语义化的名称（如 --color-primary-light、--color-danger-dark），使代码更易理解和维护。不要仅使用色阶编号命名，而要表达颜色的用途和意图。

暗色模式适配：利用Shade变体为暗色模式定义替代配色方案。在@media (prefers-color-scheme: dark)媒体查询中重新映射颜色变量，实现一键切换明暗主题。

组件级应用：在具体组件的样式中引用颜色变量，如按钮的背景色使用主色、悬停状态使用Shade变体、禁用状态使用Tint变体。这种基于变量的配色方式让主题修改变得极其简单——只需在根级改变一个变量值，所有引用该变量的组件都会自动更新。