Elysia Tools
导航
Design
在多种颜色之间生成平滑的颜色渐变，支持自定义步数和格式
执行
填写表单、运行工具，并在同一页面查看结果。
案例
相关内容
等待运行
工具使用指南
颜色梯度生成器是一款高效的在线设计工具，旨在帮助设计师和开发者在两种颜色之间快速创建平滑的过渡效果。通过自定义步数、渐变类型及输出格式，您可以轻松获取符合项目需求的配色方案及对应的 CSS 代码。
背景
需要为网站的“立即购买”按钮设计一个从深蓝到浅蓝的平滑过渡效果。
问题
手动计算颜色过渡值非常繁琐，且难以保证在不同浏览器下的兼容性。
如何使用
设置起始颜色为 #0000FF，结束颜色为 #ADD8E6，选择线性渐变并勾选包含 CSS 代码。
startColor: #0000FF, endColor: #ADD8E6, steps: 5, format: hex, direction: linear, includeCSS: true结果
获得了一组平滑的颜色值以及可直接粘贴到 CSS 文件中的 linear-gradient 代码。
背景
正在制作一张热力图，需要 10 个从黄色到红色的过渡颜色来表示数据密度。
问题
需要精确的颜色数值列表以便在图表库中调用。
如何使用
设置起始颜色为黄色，结束颜色为红色，将步数设为 10，并选择 JavaScript Array 格式。
startColor: #FFFF00, endColor: #FF0000, steps: 10, format: array结果
生成了一个包含 10 个颜色值的数组，可直接复制到代码中用于渲染图表。
支持 HEX、RGB、RGBA、HSL 以及 JavaScript 数组格式。
可以，您可以设置 2 到 50 之间的任意步数来控制颜色的过渡密度。
是的，勾选“包含 CSS 代码”选项后，工具会自动生成可直接应用于网页样式的 CSS 代码。
目前支持线性渐变（Linear）、径向渐变（Radial）和圆锥渐变（Conic）。
是的，该工具完全免费，无需注册即可直接使用。