返回
颜色转换
HEX / RGB / HSL 互转、随机取色与渐变预览
使用说明
用途HEX / RGB / HSL 颜色互转，附取色器、随机颜色与渐变色生成。
怎么用输入任意格式颜色（如 #ff375f、rgb(255,55,95)、hsl(348,100%,61%)）回车转换；下方可生成两色渐变并复制 CSS 代码。
什么时候用设计稿取色、写 CSS 时互转格式、生成渐变。
注意HSL 百分比取整可能导致往返转换有 ±1 的通道误差。
颜色转换 使用指南
颜色格式转换是前端开发与设计的高频需求。本工具支持 HEX、RGB、HSL 三种格式互转，附带取色器、随机颜色与渐变色代码生成。
使用示例
HEX 转 RGB输入：#ff0000
输出：rgb(255, 0, 0)
输出：rgb(255, 0, 0)
RGB 转 HSL输入：rgb(255, 0, 0)
输出：hsl(0, 100%, 50%)
输出：hsl(0, 100%, 50%)
渐变生成输入：选起始色与结束色
输出：直接复制 CSS 渐变代码
输出：直接复制 CSS 渐变代码
常见问题
Q：HSL 和 RGB 有什么区别？
RGB 直接描述三原色分量，HSL 用色相/饱和度/亮度描述，调「亮一点/灰一点」时 HSL 更直观。
Q：支持透明度吗？
可在 HEX 后追加两位表示透明度（如 #ff000080），或使用 rgba/hsla 形式。
使用提示
- 设计稿取色后直接转成 CSS 变量，统一管理主题色。