线性渐变提取

线性渐变是一种颜色过渡方式，颜色沿着一条直线方向平滑变化。在CSS中，使用 linear-gradient() 函数定义。 它由渐变角度（或方向）和多个色标（color stops）组成。双色渐变是最基础也最常用的渐变形式，仅包含起始色和结束色， 广泛应用于网页背景、按钮、卡片、Logo设计等场景。渐变角度决定了颜色过渡的方向：0deg从下到上，90deg从左到右，180deg从上到下。

工具使用 Canvas API 读取图片像素数据，然后通过 K-means聚类算法（K=2） 将图片中的所有颜色归纳为两个最具代表性的颜色簇。智能提取模式会在整张图片上运行聚类分析； 上下分区模式分别提取图片上半部和下半部的主色；左右分区模式则分别提取左半部和右半部的主色。 提取完成后自动生成对应的CSS渐变代码，同时也支持手动微调颜色。

如果自动提取的颜色与预期不符，可以尝试以下方法：
① 切换提取模式：尝试「上下分区」或「左右分区」模式，有时分区提取比全图智能提取更精准；
② 手动调整：点击颜色卡片即可打开系统取色器，手动选择理想的颜色；
③ 裁剪图片：如果图片包含太多杂色，建议先用裁剪工具保留核心配色区域再上传；
④ 交换颜色：点击两个颜色之间的交换按钮，调整渐变起始色和结束色的位置。

工具支持常见的图片格式：JPG / JPEG、PNG、WebP、SVG 等浏览器支持的图片格式。 建议文件大小不超过 20MB，过大的图片会自动缩放采样以确保快速处理。 对于包含透明通道的PNG图片，透明像素在颜色提取时会被自动忽略，确保提取结果准确。 所有图片处理均在本地浏览器中完成，不会上传到任何服务器，保障您的隐私安全。

使用角度滑块或快捷角度按钮即可调整。CSS渐变角度规则：
• 0deg：从下到上（bottom → top）
• 90deg：从左到右（left → right）
• 180deg：从上到下（top → bottom）
• 270deg：从右到左（right → left）
• 45deg / 135deg / 225deg / 315deg：对角线方向，其中135deg（左上→右下）在设计中最常用。 您也可以直接拖动滑块微调任意角度（0-360度之间），预览会实时更新。

点击「复制」按钮即可将CSS代码复制到剪贴板，然后粘贴到样式表中。典型用法：
background: linear-gradient(180deg, #6366F1 0%, #EC4899 100%);
可应用于任何支持CSS渐变的属性，如 background、background-image、 甚至 border-image（需配合相关属性）。在现代网页开发中，渐变背景广泛用于Hero区域、 卡片装饰、按钮悬停效果、页面分割线等。配合 background-size 和 background-position 还可实现更丰富的视觉效果。

双色渐变是现代UI设计中非常流行的视觉元素，常见应用包括：
• 网页背景：营造层次感和品牌氛围
• 按钮设计：增加立体感和交互吸引力
• 图标和Logo：赋予图形丰富的色彩表现
• 卡片和容器：作为装饰边框或背景
• 文字效果：配合 background-clip: text 实现渐变文字
• 数据可视化：图表中的渐变填充
从优秀的设计作品中提取渐变配色，可以帮助您快速建立和谐的配色方案。