颜色转换工具
颜色预览
输入颜色后点击「转换」
在线 HEX、RGB、HSL、HSV 颜色互转，实时预览并生成明暗色阶。
使用说明与常见问题
颜色转换工具
在线 HEX、RGB、HSL、HSV 颜色互转，实时预览并生成明暗色阶。
使用说明
- 输入颜色支持 #rgb、#rrggbb、rgb(...)、hsl(...) 等，或点击「随机颜色」获取灵感。
- 点击「转换」得到 HEX / RGB / HSL / HSV 等格式结果，并实时预览颜色。
- 查看色阶复制明暗色阶里的某一阶，用于背景、边框或 hover 态。
- 复制所需格式按框架要求选择 HEX 或 rgb()/hsl()，一键复制。
- 校验一致性把转换结果再贴回输入框，确认能还原成同一颜色，避免抄错。
相关工具
相关阅读
常见问题
支持哪些颜色格式？
支持 #rgb、#rrggbb、rgb(r,g,b)、hsl(h,s%,l%) 等常见格式的相互转换，并在结果区实时预览颜色本身。
HEX 和 RGB 有什么区别？
两者表示同一种颜色：HEX 是十六进制写法（#rrggbb），RGB 是十进制三元组（rgb(r,g,b)），可无损互相转换。选哪种通常看团队规范或框架要求。
HSL 和 HSV 有什么用途？
它们更贴近人对颜色的直观感受：H 是色相（红到紫绕一圈）、S 是饱和度、L/V 是明度。调色、生成同色系色阶与配色方案时比 RGB 更顺手。
如何生成深浅色阶？
工具会基于输入色自动生成一组明暗色阶，适合做背景层次、hover 状态、按钮按下态等，可直接取用各阶色值。
颜色看起来和预期不一致？
HEX/RGB 属于 sRGB 显示值，不同屏幕、亮度与色彩配置下观感会略有差异；另外请确认是否包含透明度（alpha），半透明色叠在不同背景上颜色会变化。
支持透明度（alpha）吗？
当前以不透明颜色为主。若需要透明效果，可在结果基础上手动添加 alpha，例如使用 rgba(r,g,b,a) 或 8 位 HEX（#rrggbbaa）。
设计稿里的颜色和我写出来不一样？
常见原因有：① 设计稿用了 Display P3 等广色域，而网页只显示 sRGB；② 忘了加 alpha；③ 把 HSL 的亮度百分比写成了 0-255。先核对格式与色域再排查。
怎么选一组协调的配色？
简单做法：固定一个色相，只调整明度/饱和度得到「同色系」；或用互补、三角等色相间隔。本工具生成明暗色阶后，再手动调一下色相就能快速得到协调方案。