图片渐变色提取器 - 在线分析图片主渐变

这种情况通常有两个原因。第一，图片中存在大面积白色背景、黑色边框或透明区域，这些像素被计入了色彩统计，导致提取结果偏向中性色。解决方案是上传前裁剪掉多余背景，或在工具中调整提取颜色数量后点击"重新分析"。第二，图片本身色彩过于复杂且主色不突出（如风景照），算法难以聚焦到单一主色。建议选择主体清晰、色彩层次分明的图片，或使用快速体验预设来感受工具的提取逻辑。工具会自动过滤亮度高于95%和低于5%的像素以减少干扰，但对于中等亮度的灰色或米色背景仍可能产生影响。

工具支持JPG、PNG、WebP、AVIF、BMP等主流浏览器可渲染的图片格式。文件大小限制为15MB。对于超大图片，工具会在上传时自动压缩缩放至约200像素宽度进行分析，因此即使接近15MB上限的高分辨率图片也能快速处理。所有处理均在浏览器本地完成，图片不会上传到服务器，因此处理速度取决于您的设备性能而与网速无关。

线性渐变（linear-gradient）沿一条直线方向平滑过渡颜色，是最常用的渐变类型。适合用于页面背景、横幅Banner、卡片背景、按钮、进度条等需要方向性色彩过渡的场景。径向渐变（radial-gradient）从中心点向外以圆形或椭圆形辐射扩散，适合创建聚光灯效果、圆形光晕、卡片高光、头像背景等需要中心聚焦感的场景。本工具支持一键切换两种类型，切换后色标配置和颜色会自动保留，只需调整方向或中心位置即可获得全新的渐变效果。

在工具右侧的代码展示区域，您可以看到当前渐变的CSS代码。点击代码区域右上角的"复制"按钮即可将代码复制到系统剪贴板，按钮会变绿并显示"已复制"作为确认。支持三种输出格式：标准CSS（background属性值，可直接粘贴到CSS/SCSS文件中）、Tailwind CSS（工具类名组合，适合使用Tailwind框架的项目）、SCSS变量（将色标颜色定义为Sass变量，便于集中管理）。代码兼容Chrome、Firefox、Safari、Edge等所有现代浏览器。

色标位置是每个颜色在渐变路径上的分布百分比。例如linear-gradient(to right, #ff0000 0%, #00ff00 50%, #0000ff 100%)表示红色从起点开始，绿色出现在正中间，蓝色延伸到终点。位置值越接近，两种颜色之间的过渡区域越窄、变化越剧烈；位置值分散开则过渡更柔和。在本工具中，每个提取出的色标都配有位置滑块，您可以通过拖拽精确调节0%到100%之间的任意位置。调节过程中预览区会实时更新效果，方便您找到最佳的渐变节奏。

可以。通过图片渐变色提取器提取的颜色和生成的CSS代码不涉及任何版权问题——渐变色彩本身不受版权保护，生成的代码是纯文本的CSS声明。但请注意，如果您上传的图片本身受版权保护，提取出的配色方案用于商业项目时仍需确保图片使用已获得授权。建议使用自己拍摄的照片、购买的素材或CC协议图片作为提取来源。

点击"下载渐变图片（PNG）"按钮后，工具会使用Canvas的toDataURL方法将当前预览的渐变效果导出为PNG格式图片。导出的图片分辨率与预览区域的显示尺寸一致，适合用于屏幕显示场景，如PPT背景、社交媒体封面、网页元素等。如果需要更高分辨率的渐变图片用于印刷或大幅面展示，建议通过CSS代码在网页中渲染渐变后使用截图工具获取更高分辨率的版本。

"重新分析"会基于当前设置的颜色数量参数重新运行聚类算法。不同的颜色数量（2至6个）对应不同的聚类粒度，因此提取结果会有显著差异。此外，如果在重新分析前手动修改了某些色标的颜色，重新分析会以原始图片数据为基准重新计算，之前的手动修改会被覆盖。如果您对当前提取结果满意但想微调，建议只调整色标颜色和位置而不点击重新分析。