UD5工具箱
以下将详细介绍如何使用图片渐变色提取器完成从图片上传到CSS代码输出的完整工作流程，并分享一些实用技巧帮助您获得最佳效果。
第一步：上传图片。打开工具页面后，您可以看到一个带有虚线边框的上传区域。将图片文件直接拖拽到该区域即可完成上传，也可以点击区域触发文件选择对话框。支持JPG、PNG、WebP、AVIF格式，文件大小不超过15MB。如果暂时没有合适的图片，可以直接点击下方的快速体验预设（日落暖橙、海洋蓝色、森林绿色、紫罗兰）来体验工具功能。
第二步：自动分析与色标调整。图片加载完成后，工具会立即执行色彩分析，通常耗时不到1秒。分析完成后，界面左侧会显示提取出的色标列表，每个色标包含颜色值和位置百分比。您可以点击任意色标的手动修改颜色——通过颜色选择器输入HEX值或在色盘上点击选择。位置滑块支持0%到100%的精确调节。如果对自动提取的结果不满意，也可以点击"添加色标"手动添加新的颜色点。调整提取颜色数量参数（2-6个）后点击"重新分析"，可以获取不同精细度的提取结果。
第三步：选择渐变类型与方向。在"渐变设置"区域，首先选择渐变类型：线性渐变或径向渐变。选择线性渐变后，可以通过8个方向预设按钮快速选择，或在"自定义角度"输入框中填入精确的角度值。选择径向渐变后，可以从9个中心位置预设中选择一个。每次切换都会实时更新右侧预览区的渐变效果。
第四步：选择输出格式并复制。在预览区域下方，点击切换输出格式按钮在CSS、Tailwind和SCSS变量三种格式之间切换。选择需要的格式后，点击代码区域右上角的"复制"按钮，代码即被复制到系统剪贴板。按钮会变为绿色并显示"已复制"状态，持续约2秒后恢复。
第五步：下载渐变图片（可选）。如果需要将渐变保存为图片文件，点击"下载渐变图片（PNG）"按钮即可。文件会以当前渐变的描述性名称自动命名并保存到默认下载目录。
最佳实践建议：选择图片时，优先使用主体明确、色彩饱和度适中的图片。纯色背景的图片或色彩过于复杂的图片可能无法提取到理想的渐变。如果原图有大面积白色或黑色背景，建议先用图片编辑工具裁剪掉多余区域。在调整色标时，尝试将2-3个相邻色标的距离拉近以制造更剧烈的色彩过渡，或将色标均匀分布以获得柔和自然的效果。对于品牌配色场景，建议先提取基础渐变，再通过手动微调色标的HEX值来匹配品牌色值。使用SCSS变量格式输出时，可以将色标变量定义在主题文件中，实现全局渐变配色的统一管理。导出PNG图片时，建议在浅色模式和深色模式下分别生成渐变，以适配不同的用户偏好设置。
关联工具推荐：UD5工具箱中还有多款与渐变设计相关的工具可以配合使用。互动渐变探索器允许您在色带上拖拽添加和移动色标，直观感受渐变变化；CSS3渐变色库收录了数百款精选渐变方案，适合寻找灵感；渐变边框生成器可以将渐变应用到元素边框上；渐变色标数据表工具支持通过CSV格式批量定义复杂渐变。这些工具与图片渐变色提取器形成了完整的渐变设计工具链，覆盖从灵感获取到代码输出的全流程。