颜色转换器(HEX / RGB / HSL)

工作原理

设计师通常使用 HEX 代码工作(例如从 Figma 或设计软件复制的代码),而现代 CSS 常常利用 HSL 格式来轻松调整颜色的色相(hue)、饱和度或亮度,而无需手动重新计算 HEX 代码 —— 这对于为悬停、禁用状态或深色主题生成同一品牌色的更浅或更深变体很有用。此工具会自动检测您粘贴的是 HEX、RGB 还是 HSL 代码,并将其转换为您需要的格式。

HEX、RGB 和 HSL 有什么区别?

HEX( #rrggbb )和 RGB( rgb(r, g, b) )都是通过红、绿、蓝三个分量来描述颜色——HEX 使用十六进制,RGB 使用十进制——两者表示的是完全相同的信息,只是记法不同。HSL (hsl(h, s%, l%))以另一种方式描述同一颜色:通过色相(色轮上的一个角度)、饱和度和亮度,这使得「保持相同颜色但调亮」或「保持相同亮度但改变色相」变得更加直观。

为什么在 CSS 中使用 HSL 而不是 HEX?

因为只需修改亮度分量(例如 hsl(217, 91%, 60%) 作为基础颜色, hsl(217, 91%, 40%) 作为更深的悬停状态),就能轻松派生出一致的颜色变体,而无需每次都重新计算新的 HEX 代码,也无需凭肉眼判断色相是否保持一致。

100% 本地处理:转换直接通过 WebAssembly 在您的浏览器中完成,不涉及任何外部服务器调用。