English
广告位 top
广告代码未配置 · 在后台「广告位」里粘贴联盟代码即可
首页›开发工具›颜色转换

颜色转换

HEX、RGB、HSL 互转,带取色器,顺手生成深浅色阶。

同色系色阶

点击色块可复制对应的 HEX 值。

广告位 in_content
广告代码未配置 · 在后台「广告位」里粘贴联盟代码即可

怎么用

  1. 取色 —— 用取色器选一个颜色,或在 HEX、RGB 输入框里直接粘贴色值。
  2. 查看多格式 —— 面板会同步显示这个颜色的 RGB、HSL 写法,点复制即可用。
  3. 生成色阶 —— 下方自动生成从深到浅的一整套色阶,做按钮的 hover、边框色很方便。

关于 颜色转换

同一个颜色可以有多种写法:#0F6E56、rgb(15,110,86)、hsl(164,76%,24%) 描述的是同一个颜色。HEX 和 RGB 直观但不好调明暗;HSL 让你通过调整亮度和饱和度来做出一整套同色系配色,做设计系统时几乎都用 HSL 推导。

常见问题

HSL 里的三个数字分别是什么?

依次是色相(0-360 度,对应色环上的角度)、饱和度(0%-100%,越高越鲜艳)、亮度(0%-100%,0 是黑、100 是白)。

为什么我粘贴的 RGB 不生效?

请包含 rgb 前缀或直接写三个数字,例如 15,110,86。本工具支持 rgb(15,110,86)、15,110,86、#0f6e56 三种写法。

色阶是怎么算出来的?

在 HSL 空间里固定色相和饱和度,把亮度按等间距取值,这样得到的颜色视觉上属于同一个色系。