×
📱 手机扫码访问
用手机浏览器或微信扫一扫，即可在手机上访问当前页面
扫描后可直接在手机上使用该工具
×
📱 分享「颜色转换」
颜色转换
输入颜色值，在 HEX、RGB、HSL 等格式间快速互转。
https://www.toolwan.cn/tool/Color-conversion/
ToolWan · 在线工具
长按上方二维码即可保存，分享给微信 / QQ 好友
颜色转换工具
HEX · RGB · HSL · HSV · CMYK 自由互转，色值精准对应，设计与开发无缝衔接
#1E88E5
支持 3/6/8 位 HEX（可带 #）、rgb()/rgba()、hsl()/hsla()、hsv()/hsb() 及逗号分隔数值，支持透明度，输入即转换。
无法识别该色值，请检查格式后重试。
HEX
RGB
HSL
HSV
CMYK
配色方案
明暗色阶
点击色块设为当前颜色
批量转换每行一个色值，多种格式可混用
最近使用
操作说明
- 在输入框粘贴任意格式色值，自动识别并实时显示 HEX、RGB、HSL、HSV、CMYK，点「复制」取用；点击左侧大色块可快速复制 HEX。
- 需要精确选色：点选色面板调整颜色；浏览器支持时可用「屏幕取色」吸取屏幕任意位置的颜色。
- 「配色方案」「明暗色阶」基于当前颜色自动生成，点击色块即可设为当前颜色继续转换。
- 批量转换：每行粘贴一个色值，点「批量转换」生成对照表，结果可一键复制（可粘贴进 Excel）或导出 CSV。
- 本工具全程在浏览器本地运行，不上传任何数据；历史记录仅保存在本机，可随时清空。
颜色转换工具，输入颜色值即可在 HEX、RGB、HSL 等格式间快速互转，纯本地运行。
- 支持 HEX、RGB、HSL 等格式互转
- 纯原生 JavaScript，无外部依赖
- 全程本地运行，无需联网
- 所有逻辑限定在 #cvt-app 容器内
- 输入颜色值即时得到转换结果
相关问法：
颜色格式转换
· HEX转RGB
· RGB转HSL
· 在线颜色转换器
· 颜色代码转换工具
· HEX RGB HSL 互转
· 颜色值转换
· 网页颜色转换工具
📖 功能介绍
工具简介
颜色转换工具用于在 HEX、RGB、HSL 等颜色格式之间快速互转。输入任意一种颜色值，即可得到对应的其他格式，方便前端开发和设计取色。 ### 适用场景
拿到设计稿上的 HEX 色值，需要转成 RGB 写进 CSS 或 Canvas 代码。
在浏览器调试时看到 RGB 颜色，想换成 HEX 填进配置文件。
调整颜色明暗或饱和度时，需要 HSL 数值来做计算。
核对不同格式的颜色是否为同一个颜色，避免手抄出错。
做主题配色时，把一组颜色统一转成同一种格式方便管理。 ### 使用步骤
1. 在输入框中填入颜色值，支持 HEX（如 #3b82f6）、RGB（如 rgb(59,130,246)）或 HSL 格式。
2. 也可以用取色器直接选一个颜色，输入框会自动填入对应色值。
3. 工具会实时显示颜色预览，并同时列出 HEX、RGB、HSL 等格式的转换结果。
4. 点击需要的结果即可复制，粘贴到代码或设计软件中使用。
5. 如果输入格式有误，下方会给出提示，按提示修正后重新输入即可。
📋 常见问题FAQ
-
这个工具支持哪些颜色格式之间的转换？支持 HEX、RGB、HSL 三种格式之间的互相转换。
-
输入颜色值后需要点击按钮才能转换吗？不需要，输入后会自动转换并显示结果。
-
可以输入哪些形式的 HEX 值？支持带 # 号和不带 # 号的 HEX 值，如 #ff0000 或 ff0000。
-
RGB 值应该怎么输入？按 r,g,b 的格式输入三个 0 到 255 之间的数字，如 255,0,0。
-
HSL 值应该怎么输入？按 h,s%,l% 的格式输入，如 0,100%,50%。
-
转换结果会自动复制到剪贴板吗？不会自动复制，需要手动选中结果后复制。
-
输入的颜色值格式不正确时会怎样？会提示输入无效，不会显示转换结果。
-
这个工具需要联网或安装吗？不需要，全部在本地运行，无外部依赖。
友情链接