UD5工具箱
图片渐变色提取器提供了一套完整的从图片分析到代码输出的工作流，以下逐一介绍各核心功能模块的设计思路与技术细节。
多格式图片上传与智能预处理：工具支持JPG、PNG、WebP、AVIF等主流图片格式，最大文件体积限制为15MB。上传方式灵活，支持拖拽上传和点击选择两种交互模式。图片加载后，工具会自动将其缩放至约200像素宽度进行分析，这一尺寸在保证色彩提取精度的同时大幅降低了内存占用和计算耗时。缩放采用双线性插值算法，确保色彩过渡区域的像素值不会因降采样而产生严重失真。
快速体验预设：为了帮助用户快速理解工具的工作方式，内置了四组精心挑选的预设渐变：日落暖橙（呈现从暖黄到深橙的自然渐变）、海洋蓝色（从浅蓝到深蓝的水波色调）、森林绿色（层次丰富的绿色系过渡）和紫罗兰（优雅的紫调渐变）。点击任意预设即可立即加载对应的色标配置，用户可以在预设基础上进行微调，快速进入创作状态。
可调节的提取颜色数量：用户可在2至6个色标之间自由选择。较少的色标适合创建简洁明快的渐变效果，而较多的色标则能还原图片中更丰富的色彩层次。这一参数直接影响算法的聚类粒度——选择2个颜色时，算法会将全图像素归纳为两大色群；选择6个颜色时则会保留更精细的色彩划分。用户可以根据实际应用场景灵活调整，在简洁性与丰富度之间找到最佳平衡。
线性渐变与径向渐变双模式：线性渐变（linear-gradient）沿指定方向在颜色之间进行平滑过渡，是最常用的渐变类型，适合用于横幅背景、分割区域等场景。径向渐变（radial-gradient）从中心点向外辐射扩散，适合创建聚光灯效果、圆形高光或卡片背景。工具支持在两种类型间一键切换，自动生成对应的CSS语法。
8个预设方向与自定义角度：对于线性渐变，提供从上到下、从左到右、对角线等8个常用方向的预设按钮，用户也可以通过滑块或直接输入数值来设定0°至360°之间的任意自定义角度。对于径向渐变，则支持设置中心位置，提供居中、左上、上方、右上、左侧、右侧、左下、下方、右下共9个预设锚点，覆盖了常见的设计需求。
色标位置拖拽调节：每个提取出的颜色都是一个独立的色标，用户可以通过拖拽位置滑块精确控制每个色标在渐变中的位置百分比（0%至100%）。这一功能对于微调渐变节奏至关重要——例如，将某个颜色的色标位置向一端压缩，可以制造出更剧烈的色彩过渡效果；而均匀分布色标则能获得柔和自然的渐变。位置调节会实时反映在渐变预览区域，所见即所得。
多格式代码输出：工具支持三种输出格式——标准CSS、Tailwind CSS和SCSS变量。标准CSS格式直接输出background属性值，可粘贴到任意样式表中使用；Tailwind格式生成bg-gradient-to-r等工具类名，适合使用Tailwind CSS框架的项目；SCSS变量格式则将每个色标定义为独立的变量，便于在大型项目中进行统一管理和复用。点击复制按钮即可将代码复制到剪贴板，按钮状态会变色提示复制成功。
渐变图片下载：除了CSS代码，工具还支持将当前渐变配置导出为PNG图片文件。这一功能特别适用于需要在非Web环境中使用渐变的场景，如PPT背景、社交媒体封面图、桌面壁纸或印刷品设计。下载的图片分辨率足以满足屏幕显示需求。
实时渐变预览：整个编辑过程中，右侧预览区域会实时渲染当前的渐变效果，用户可以直观地看到每次调整色标颜色、位置或渐变参数后的最终效果，无需在代码和视觉之间反复切换确认。