CSS 渐变生成器
构建可复现的颜色渐变，预览每个生成的色标，并复制用于 CSS、图表或设计令牌的精确 HEX 序列. 此工具无需安装，所有处理均在当前浏览器本地完成，不会上传输入内容或本地文件。
开始使用
此工具可帮助您完成的工作
构建可复现的颜色渐变，预览每个生成的色标，并复制用于 CSS、图表或设计令牌的精确 HEX 序列。
示例
输入
#2563EB → #EC4899，5 种颜色
结果
#2563EB, #584EC0, #8A39A2, #BB2585, #EC4899
结果生成方式
每种中间颜色通过对红色、绿色和蓝色通道进行线性插值创建。保留端点，其余颜色以等间隔放置。
实用工作流
- 创建有序图表颜色或热力图渐变
- 在两个设计令牌之间构建悬停和状态颜色
- 为背景渐变生成紧凑调色板
重要限制
- 某些互补色之间的 RGB 插值可能看起来更暗或更浑浊。
- 平滑的调色板并不自动具有色盲可访问性。
- 此生成器产生均匀间隔的 RGB 颜色；不声称感知均匀性。
常见问题
为什么中点可能看起来灰色或浑浊？
对立的 RGB 通道可能平均为中性色。当视觉活力重要时，在多步 CSS 工作流中添加合适的中间色。
我应该生成多少种颜色？
使用与所需不同状态或数据带匹配的最小数量；连续背景可以使用更多步数。
具体示例
假设您需要为图表创建 5 个数据系列的渐变色。输入起始颜色 #2563EB（蓝色）和结束颜色 #EC4899（粉色），设置步数为 5，工具将生成中间颜色序列：#2563EB, #584EC0, #8A39A2, #BB2585, #EC4899。您可以直接复制这些 HEX 值用于 CSS 或设计令牌。
常见问题
为什么中间颜色看起来发灰？
当两个颜色在 RGB 通道上对立时，线性插值可能产生中性色。若需要更鲜艳的中间色，建议在 CSS 中使用多段渐变或手动添加中间色标。
生成的渐变是否适合色盲用户？
均匀间隔的 RGB 渐变并不自动具有色盲可访问性。建议使用专业工具检查对比度，并考虑使用色盲安全调色板。
如何确保颜色在不同设备上显示一致？
不同显示器的色彩配置文件可能导致显示差异。建议在目标设备上预览，并参考 sRGB 标准。
此工具无需安装，所有处理均在当前浏览器本地完成，不会上传输入内容或本地文件。