输入
#0d9488
输出
rgb(13, 148, 136) / hsl(174, 84%, 32%) / --color: #0d9488;
设计配色
颜色格式转换 - HEX RGB HSL 在线工具
在浏览器本地将颜色在 HEX、RGB、HSL、HWB、CMYK 与 CSS 变量之间转换，支持取色器与随机色，适合设计稿取色、写样式和对齐品牌色。
颜色HEXRGB
设计配色
颜色转换
文本可读性
白底文本
黑底文本
HEX#3B82F6
已复制 HEX8#3B82F6FF
已复制 RGBrgb(59, 130, 246)
已复制 HSLhsl(217, 91%, 60%)
已复制 HWB-
已复制 CMYK-
已复制 CSS--color: #3B82F6;
已复制 点击任意行即可复制值
使用场景
- 设计稿取色后换成 CSS 可用格式
- 在 HEX、RGB、HSL 之间互转对齐规范
- 导出 CSS 变量供主题配置使用
如何使用
- 用取色器选色或输入 HEX、RGB、HSL 文本
- 查看 HEX、RGB、HSL、HWB、CMYK 等结果
- 点击需要的色值行复制结果
示例输入输出
FAQ
支持哪些输入格式？
支持 #HEX、rgb()、hsl() 文本与取色器；输出包含 HEX、HEX8、RGB、HSL、HWB、CMYK 和 CSS 变量示例。
透明度可以编辑吗？
当前以不透明色值转换为主，HEX8 会附带固定 FF 通道，便于兼容展示，不作为完整 Alpha 编辑器。
工具列表
相关推荐
你可以从这里继续打开相近场景的工具，减少重复搜索。
调色板生成
调色板生成 - 色彩规则配色在线工具
按单色、类似色、互补色、三角色或完全随机规则生成调色板，可锁定个别色块后继续随机，适合 UI 探索与品牌色衍生。
调色板 配色 色彩
CSS 渐变生成
CSS 渐变生成 - 线性径向锥形工具
可视化生成线性、径向与锥形 CSS 渐变，可调节角度、色标位置并添加多个色标，适合背景、按钮和品牌色过渡设计。
CSS 渐变 背景
色彩和谐搭配
色彩和谐搭配 - 经典配色规则工具
选定基准色后，按互补、类似、三角、四角、分裂互补或单色系规则生成配色方案，提供 UI 预览与 CSS 变量，适合品牌与组件配色。
配色 色彩 和谐