公众号头图配色
公众号小编每周要出 4 张封面图,甲方给的主色是 #FF6B35 和 #2C3E50。以往在 PS 里拉渐变,每次都要手动调色阶、记参数,下个月换人做又得重来。用本工具把两个色值输进去,选「径向渐变」模式,直接生成一张 900×383 像素的 PNG 头图,SVG 格式还能存成代码模板,下次改色直接替换色值就行,不用开设计软件。
拖动彩色控制点改变混合 · 空白处点击新增 · 选中点可改色 / 删除 · 3–9 点
设计师在 Figma 里调了半天渐变色,导出时发现背景色被压黑、切图边缘有锯齿。这个工具直接在浏览器里生成纯色到任意颜色的渐变,支持 PNG 和 SVG 两种格式:PNG 保留像素级平滑过渡,SVG 输出矢量代码可直接嵌入网页或图标。所有计算在本地完成,图片不经过服务器。
公众号小编每周要出 4 张封面图,甲方给的主色是 #FF6B35 和 #2C3E50。以往在 PS 里拉渐变,每次都要手动调色阶、记参数,下个月换人做又得重来。用本工具把两个色值输进去,选「径向渐变」模式,直接生成一张 900×383 像素的 PNG 头图,SVG 格式还能存成代码模板,下次改色直接替换色值就行,不用开设计软件。
公司年中汇报,8 个部门各交了一套 PPT,背景色深浅不一。行政要求统一成蓝紫渐变。逐个改幻灯片母版太慢,用本工具生成一张 1920×1080 的 SVG 渐变背景,SVG 文件只有 2KB,直接拖进 PPT 做母版背景,所有页面一次性替换,且 SVG 放大到投屏 4K 分辨率不模糊。
设计师给开发切图标时,需要在图标底部加一条 45° 渐变阴影。以前在 Sketch 里加阴影导出,每次都得调透明度、角度、距离。用本工具把图标底部的矩形选区填上线性渐变,色值从 #000000(20% 透明度)到 #000000(0% 透明度),导出 2x 倍率的 PNG,开发直接按这个切图标注的阴影参数写代码,不用反复沟通。
电商运营要上架一款新手机壳,详情页需要一个从手机主色(#E8D5B7)到浅灰(#F5F5F5)的渐变背景。在 PS 里做要新建图层、拉渐变、裁切,每款手机壳颜色不同就得重做一遍。用本工具把两个色值输入,选「线性渐变」方向为从上到下,生成 750×1334 像素的 PNG,直接作为详情页背景图上传,5 款手机壳 10 分钟搞定。
B 站 up 主做教程视频,字幕底部需要一条半透明渐变条,防止白字被浅色背景吃掉。以前用 Pr 做字幕模板,每次要新建颜色遮罩、拉渐变、调透明度。用本工具生成一条从 #000000(60% 透明度)渐变到 #000000(0% 透明度)的 PNG 底条,宽 1920 像素、高 120 像素,保存为素材,每次剪辑直接拖到字幕轨道上,不用再调参数。
创业公司印 200 张名片,设计稿要求从深蓝到浅蓝的渐变底纹。印刷厂要求提供 300 DPI 的 CMYK 模式文件。在 PS 里新建文档、转色彩模式、拉渐变、调网点,流程繁琐。用本工具直接输入 CMYK 色值(C:100 M:60 → C:60 M:20),选择「线性渐变」方向为从左到右,导出 300 DPI 的 PNG,发印刷厂直接印,不用再担心色彩模式转换导致色差。
| 输入 | 输出 | 说明 |
|---|---|---|
| 颜色1:#FF0000,颜色2:#0000FF,方向:水平 | 生成水平渐变 PNG(左红右蓝)和 SVG(<linearGradient> 标签) | 常规:最典型的两色水平渐变,验证基础功能是否正常 |
| 颜色1:#FFFFFF,颜色2:#000000,方向:对角(45°) | 生成对角渐变 PNG(左上白→右下黑)和 SVG(<linearGradient x1='0' y1='0' x2='1' y2='1'>) | 常规:黑白极色 + 非标准方向,验证角度参数解析正确性 |
| 颜色1:#FF0000,颜色2:#00FF00,颜色3:#0000FF,方向:径向 | 生成径向渐变 PNG(中心红→中环绿→外环蓝)和 SVG(<radialGradient> 标签) | 常规:三色径向渐变,验证多色停靠点(stop)生成逻辑 |
| 颜色1:#000000,颜色2:#000000,方向:水平 | 生成纯色 PNG 和 SVG(两色相同,渐变退化为纯色) | 边界:输入相同颜色,验证工具是否仍输出合法渐变(应输出纯色而非报错) |
| 颜色1:#123456,颜色2:#ABCDEF,方向:垂直,尺寸:10×10 像素 | 生成 10×10 像素垂直渐变 PNG 和 SVG | 边界:极小尺寸,验证像素级渲染是否正确(无锯齿或失真) |
| 颜色1:#000000,颜色2:#FFFFFF,方向:无(仅输入两色) | 默认生成水平渐变(方向缺省时的兜底行为) | 易错:用户可能不填方向,需明确工具默认行为(水平) |
| 颜色1:#GGG,颜色2:#000000,方向:水平 | 提示「颜色格式错误,请输入 6 位十六进制颜色码」 | 易错:非标准颜色码(#GGG)应被校验并给出明确错误提示 |
| 颜色1:#FF0000,颜色2:#0000FF,方向:水平,格式:SVG 仅导出 | 仅生成 SVG 文件(不生成 PNG) | 易错:用户可能误以为格式选择仅影响预览,实际控制导出文件类型 |
1.颜色值用了非十六进制格式
#ff00#ff0000十六进制颜色必须为 3 位或 6 位(如 #f00 或 #ff0000),4 位会被解析器忽略或报错。
2.颜色值包含空格或特殊字符
#ff 0000#ff0000十六进制颜色值内不允许有空格、逗号或括号,浏览器和 Canvas API 会直接丢弃无效值。
3.渐变方向写成了 CSS 函数
linear-gradient(to right, #f00, #00f)90deg本工具方向字段只接受角度(如 0deg、90deg)或关键词(top、bottom),不接受完整 CSS 渐变函数。
4.角度值带单位但写错
90rad90deg角度单位只支持 deg(度),rad(弧度)或 grad(百分度)会被解析为 0。
5.颜色数量少于 2 个
#ff0000#ff0000, #0000ff渐变至少需要两个颜色点,单个颜色无法形成过渡,工具会提示颜色不足。
6.颜色值使用了 CSS 命名色
red, blue#ff0000, #0000ff本工具仅支持十六进制颜色值,CSS 命名色(如 red、blue)会被视为无效输入。
7.颜色值大小写混用
#FF00ff#ff00ff虽然大小写不敏感,但建议统一小写以避免复制粘贴时因字体混淆(如 O 和 0)。
8.输出格式选了 SVG 但颜色值用了透明通道
#ff000080#ff0000SVG 标准不支持 8 位十六进制(含 alpha 通道),透明色必须用 rgba() 或 opacity 属性,本工具仅输出纯色。
C(r, g, b, a) = (1 - α) × C_bg + α × C_fg
C(r,g,b,a)最终像素颜色,含 RGBA 通道α前景透明度,0~1 浮点数C_bg背景色,RGB 值 0~255C_fg前景色,RGB 值 0~255生成从#FF0000(红)到#0000FF(蓝)的渐变,取中间点α=0.5:C_r = (1-0.5)×255 + 0.5×0 = 127.5,C_g = (1-0.5)×0 + 0.5×0 = 0,C_b = (1-0.5)×0 + 0.5×255 = 127.5,最终颜色为(128,0,128)即紫色。
在颜色设置区域,点击「添加色标」按钮(通常是 + 号),默认会新增一个色标,拖动色标到滑块中间位置,然后点击该色标,在颜色选择器里选白色即可。最多支持添加 10 个色标,每个色标的位置可以通过滑块微调,实现任意颜色序列的渐变效果。
PNG 是位图,导出后是固定尺寸的像素图,适合直接用于网页、PPT 等不需要缩放的地方;文件较小,但放大后会有锯齿。SVG 是矢量图,导出后是代码描述,可以无限放大不模糊,适合用于 Logo、图标或需要后续编辑的场景;但文件可能稍大,且某些老旧浏览器不完全支持。本工具两种格式都支持,根据最终用途选择即可。
通常是因为导出 PNG 时颜色空间或色深设置导致的。本工具预览使用浏览器渲染,导出时也基于浏览器,但如果你在颜色选择器中使用了超出 sRGB 色域的颜色(如某些高饱和度亮色),导出后颜色会被压缩到 sRGB 范围内,导致视觉上变暗。建议在颜色选择器里选择「安全色」或 sRGB 色域内的颜色,导出效果与预览基本一致。
本工具不内置取色器,但可以用以下方法:在浏览器中按 F12 打开开发者工具,使用「取色器」工具(吸管图标)点击页面背景,会显示该颜色的十六进制值(如 #f0f0f0)或 RGB 值。然后回到本工具的颜色选择器中,手动输入该十六进制值即可精确匹配。
SVG 文件中的颜色定义是标准的,但不同软件对 SVG 的解析可能存在差异。本工具导出的 SVG 使用 `linearGradient` 或 `radialGradient` 标签,颜色值以十六进制或 RGB 形式存储。如果颜色不对,检查导入软件是否支持 SVG 1.1 标准;另外,某些软件(如旧版 AI)对渐变角度或色标位置的解析可能有偏差,建议在软件中手动微调渐变角度。
在渐变设置区域找到「角度」或「方向」选项,默认可能是 0°(从上到下)或 90°(从左到右)。输入 90 即可得到水平渐变(从左到右),输入 180 得到从下到上,输入 45 得到对角线渐变。也可以直接在预览区域拖动渐变控制线来直观调整方向。
本工具不需要上传任何文件,所有操作都在浏览器本地完成。它不是一个图片处理工具,而是一个「生成器」——你通过设置颜色、方向、形状等参数,工具直接生成新的渐变图并导出。如果你电脑上已经有渐变图片想修改,需要先用其他工具(如 PS)提取颜色值,再回到本工具重新创建。
锯齿通常出现在渐变边界或图像边缘。本工具导出 PNG 时默认使用抗锯齿渲染,但如果导出尺寸较小(如 100x100),锯齿会较明显。建议增大导出尺寸(如 1000x1000),然后在其他软件中缩放到所需大小。另外,如果渐变是硬边(如两种颜色直接切换),边缘锯齿会更明显,可尝试增加中间色标使过渡更平滑。
可以。在导出设置中,找到「背景」选项,选择「透明」即可。导出的 PNG 会包含 Alpha 通道,SVG 默认就是透明背景(除非在设置中指定了背景色)。注意:如果浏览器预览时显示白色背景,那是预览区域的默认底色,实际导出文件是透明的,可以下载后用 PS 或直接放在深色背景页面上验证。
颜色输入框支持多种格式(十六进制、RGB、HSL),但需要确保格式正确。例如 `#FF0000` 是标准六位十六进制,如果粘贴后多了空格或引号(如 `"#FF0000"` 或 `# FF0000`),工具无法解析,会回退到默认颜色。建议直接粘贴纯十六进制值(如 #FF0000),不要带任何额外字符。如果仍然有问题,尝试在颜色选择器中手动选取。
隐私保证所有计算与处理均在你的浏览器本地完成,输入数据不会上传服务器,也不会保存或共享。