RGB渐变色板生成器
在两种端点颜色之间生成2至100个RGB插值色块,预览渐变并复制HEX值;不导出CSS代码。此工具无需安装,所有处理均在当前浏览器本地完成,不会上传输入内容或本地文件。
开始使用
RGB渐变色板生成器
在两种端点颜色之间生成2至100个RGB插值色块,预览渐变并复制HEX值;不导出CSS代码。
此工具可帮助您完成的工作
在两种端点颜色之间生成2至100个RGB插值色块,预览渐变并复制HEX值;不导出CSS代码。
示例
#2563EB → #EC4899,5 种颜色
#2563EB, #575CD7, #8956C2, #BA4FAE, #EC4899
结果生成方式
每种中间颜色通过对红色、绿色和蓝色通道进行线性插值创建。保留端点,其余颜色以等间隔放置。
实用工作流
- 创建有序图表颜色或热力图渐变
- 在两个设计变量之间构建悬停和状态颜色
- 为背景渐变生成紧凑调色板
重要限制
- 某些互补色之间的 RGB 插值可能看起来更暗或更浑浊。
- 平滑的调色板并不自动具有色盲可访问性。
- 此生成器产生均匀间隔的 RGB 颜色;不声称感知均匀性。
常见问题
为什么中点可能看起来灰色或浑浊?
对立的 RGB 通道可能平均为中性色。需要鲜艳效果时,在多步 CSS 工作流中添加合适的中间色。
我应该生成多少种颜色?
使用与所需不同状态或数据带匹配的最小数量;连续背景可以使用更多步数。
具体示例
假设您需要为图表创建 5 个数据系列的渐变色。输入起始颜色 #2563EB(蓝色)和结束颜色 #EC4899(粉色),设置步数为 5,工具将生成中间颜色序列:#2563EB, #575CD7, #8956C2, #BA4FAE, #EC4899。您可以直接复制这些 HEX 值用于 CSS 或设计变量。
常见问题
为什么中间颜色看起来发灰?
当两个颜色在 RGB 通道上对立时,线性插值可能产生中性色。若需要更鲜艳的中间色,建议在 CSS 中使用多段渐变或手动添加中间色标。
生成的渐变是否适合色盲用户?
均匀间隔的 RGB 渐变并不自动具有色盲可访问性。建议使用专业工具检查对比度,并考虑使用色盲安全调色板。
如何确保颜色在不同设备上显示一致?
不同显示器的色彩配置文件可能导致显示差异。建议在目标设备上预览,并参考 sRGB 标准。
颜色总数包含两个端点,默认10;小数截去小数部分后限制到2—100。两组端点可用HEX、RGB、HSV、HSL编辑,但插值始终按编码后的RGB通道计算并舍入为整数。大预览方向固定90°,不随颜色数量变成分段图;没有额外色标、透明度或色彩空间选项。输出每行一个HEX值,不是CSS代码或图片下载。
此工具无需安装,所有处理均在当前浏览器本地完成,不会上传输入内容或本地文件。