可以开始使用
浏览器本地 · 无需账号 · 结果留在当前页面
试试常见颜色
r
g
b
h
s%
l%
预览
#10B981
HEX
#10B981
RGB
rgb(16, 185, 129)
HSL
hsl(160, 84%, 39%)
CSS 变量
--color-brand: #10B981;
颜色转换是适合 CSS 使用的近似值。最终外观可能因显示设备、色彩配置、主题和设计系统 token 规则而变化。
颜色格式转换器可以把同一个颜色转换成不同 CSS 写法。
它适合前端开发、设计交付、品牌色整理和可访问性检查。
清晰输入
准备好要处理的颜色值或 CSS 颜色格式，避免混入不相关内容。
确认输出用途
先确认结果要用于发布、调试、估算、整理还是交付，再选择合适参数。
复核关键边界
结果适合快速处理和初步判断，重要场景仍应按目标平台、团队规则或业务口径复核。
示例
#10b981 可以转换为对应 RGB 和 HSL 值。
假设
输入是有效的 CSS 颜色或常见颜色值。
限制
不同屏幕和色彩管理环境可能导致视觉感受不同。
先确定目标格式
CSS 变量常用 HEX 或 HSL，设计交付可能需要 RGB，复制前先看目标系统接受哪种格式。
注意透明度表达
HEX、RGB、HSL 都可以表达颜色，但 alpha 通道写法不同，半透明背景要单独检查。
转换后检查对比度
颜色格式转换不代表可读性合格，正文、按钮和标签文字仍应做对比度检查。
适合统一设计 token
把设计师给的 HEX、截图里的 RGB 或 CSS 里的 HSL 统一成团队约定格式，后续维护更轻松。
HSL 更适合调明暗
需要派生 hover、border 或 background 时，HSL 的 hue、saturation、lightness 更方便理解。
颜色转换不等于品牌规范
转换只解决格式问题，品牌色、禁用色和状态色仍要按设计系统规则使用。
前端开发
把设计颜色转换成 CSS 需要的格式。
品牌整理
统一品牌色的 HEX、RGB 和 HSL。
主题调整
用 HSL 调整亮度和饱和度。
可访问性
和对比度检查工具一起确认可读性。
支持 HEX 转 RGB 吗？
支持。输入 HEX 后可以查看 RGB 和 HSL。
RGB 可以转 HEX 吗？
可以。输入有效 RGB 值即可。
HSL 有什么用？
HSL 更适合按色相、饱和度和亮度调整颜色。
颜色数据会上传吗？
不会。转换在浏览器中完成。
HEX、RGB、HSL 哪个更适合 CSS？
都可以。HEX 简洁，RGB 直观，HSL 更适合调整明暗和饱和度。团队最好统一一种主格式。
颜色转换会改变视觉效果吗？
同一颜色在不同格式之间转换通常视觉一致，但透明度、四舍五入和显示设备可能带来细微差异。
支持 HEX 转 RGB 吗？
支持。输入 HEX 后可以查看 RGB 和 HSL。
RGB 可以转 HEX 吗？
可以。输入有效 RGB 值即可。
HSL 有什么用？
HSL 更适合按色相、饱和度和亮度调整颜色。
颜色数据会上传吗？
不会。转换在浏览器中完成。
HEX、RGB、HSL 哪个更适合 CSS？
都可以。HEX 简洁，RGB 直观，HSL 更适合调整明暗和饱和度。团队最好统一一种主格式。
颜色转换会改变视觉效果吗？
同一颜色在不同格式之间转换通常视觉一致，但透明度、四舍五入和显示设备可能带来细微差异。
推荐流程
颜色处理流程
先转换格式，再生成调色板和检查对比度。