UD5工具箱
功能概览
色调与色度生成器提供了一套完整的色彩渐变生成解决方案，涵盖颜色选择、参数调节、格式输出、交互操作等多个维度。以下将详细介绍每一项核心功能的设计意图和使用方法。
基础颜色选择
工具提供灵活的基础颜色输入方式，支持用户通过颜色选择器（Color Picker）直观地选取任意颜色，也可以直接输入HEX颜色代码（如 #3498DB）进行精确定位。颜色选择器提供可视化的色相环和明度/饱和度调节面板，让用户能够直观地找到目标颜色。选择的基础颜色将作为渐变色卡的中心点，所有Tint和Shade变体都将基于此颜色进行计算生成。无论您是正在探索配色方向还是已经有明确的目标色值，都能快速上手完成颜色选择。
预设颜色库
内置一组常用的预设基础颜色，涵盖设计领域中最常见的品牌色和主题色。用户只需点击预设色块即可快速切换基础颜色，无需手动输入代码或使用颜色选择器。预设颜色库的设计参考了主流设计系统和品牌色彩规范，包括经典蓝、活力橙、自然绿、优雅紫等不同色调方向，方便用户快速开始配色探索。预设颜色也可以作为自定义颜色的起点，用户在此基础上微调即可获得理想的渐变色卡。
Tint/Shade数量独立调节
用户可以分别设置Tint（浅色）和Shade（深色）的生成数量，两者互不影响。默认各生成4个色阶，但用户可以根据实际需求在合理范围内自由调整。例如，在需要更丰富的浅色层级时（如构建卡片背景色系），可以增加Tint数量；在需要更深的暗色用于文字或边框时，可以增加Shade数量。这种独立调节的设计赋予了用户更大的灵活性，能够根据不同项目的实际需求定制渐变色卡的结构，避免生成不必要的色阶。
步长百分比调节
步长参数控制每个色阶之间的白色/黑色混合比例，是影响渐变色卡视觉效果的关键参数。步长越大（如20%-25%），相邻色阶之间的明度差异越明显，生成的色卡具有较强的对比度，适合需要醒目层次感的设计场景；步长越小（如5%-8%），色阶过渡更加细腻平滑，适合需要微妙渐变的高端设计项目。推荐使用默认的10%步长，能够在视觉上获得均衡自然的4-5级色阶。步长的灵活调节让用户能够根据具体的设计需求，精确控制渐变的变化幅度，获得最理想的色彩过渡效果。
三种颜色格式输出
工具同时支持三种主流颜色格式的输出：HEX（如 #3498DB）、RGB（如 rgb(52,152,219)）和 HSL（如 hsl(207,70%,53%)）。用户可以通过格式切换按钮在三种格式之间自由切换，所有色块的颜色值将同步更新为所选格式。HEX格式是最简洁的网页颜色表示法，广泛用于CSS样式表和设计工具中；RGB格式直观显示红绿蓝三个通道的数值，便于理解颜色的组成；HSL格式以色相、饱和度、亮度三个维度描述颜色，更符合人类对颜色的直觉认知，特别适合在HSL色彩空间中进行微调。三种格式的并行支持让用户无需使用额外的格式转换工具，一次操作即可获得所有需要的颜色代码。
一键复制功能
色卡中每个色块都支持点击复制功能——用户只需单击任意色块，即可将该颜色的当前格式值复制到系统剪贴板，同时工具会显示复制成功的视觉反馈。此外，还提供"复制全部"按钮，一键将所有色阶的颜色值以列表形式复制到剪贴板，方便批量导入到样式表或设计工具中。复制功能极大提升了工作效率，避免了手动逐个选取和复制颜色值的繁琐操作，特别适合需要快速构建设计系统色彩层级的场景。
实时可视化预览
色卡采用左右分区布局，左侧展示Tint浅色系列（从浅到深排列），右侧展示Shade深色系列（从浅到深排列），中间为基础色。每个色阶以大面积色块形式展示，用户可以直观地看到整个渐变体系的视觉效果。调整任何参数（颜色、数量、步长、格式）后，色卡都会即时更新，实现真正的所见即所得。这种实时反馈机制让用户能够快速迭代配色方案，直到找到最满意的效果，无需反复刷新页面或等待计算。
响应式布局适配
工具界面采用Bootstrap 5响应式框架构建，在桌面端以双栏布局展示Tint和Shade色卡，在移动端自动切换为单栏纵向排列，确保在各种屏幕尺寸下都能获得良好的浏览和操作体验。色块的大小和间距会根据屏幕宽度自动调整，保证颜色值文字在小屏设备上依然清晰可读。响应式设计确保了设计师在桌面端精确配色后，也能在手机或平板上方便地查看和使用色卡，满足随时随地的设计工作需求。
纯前端本地运算
所有颜色计算和色卡生成逻辑完全在用户浏览器中执行，无需将任何数据上传到远程服务器。这意味着用户的设计颜色、配色方案等敏感信息始终保持在本地，不会存在数据泄露的风险。同时，纯前端架构也意味着工具可以在离线环境下正常使用（首次加载后），不受网络状况的影响，使用体验更加稳定可靠。对于注重数据隐私和安全的企业用户而言，这是一个重要的优势特性。