FREE TOOL
颜色值转换
输入HEX、RGB或HSL色值，实时互转并预览颜色效果。纯本地运行，数据不上传，保护隐私。
输入HEX、RGB或HSL色值，实时互转并预览颜色效果。纯本地运行，数据不上传，保护隐私。
UI设计师在Figma里标注的色值是#3B82F6，你拿到CSS里直接用没问题。但产品突然说要做深色模式，需要把这个蓝色调暗20%——用HEX算亮度变化得掰手指头数十六进制，用RGB算也一样费劲。这时候换成HSL格式就舒服了：H是色相角度，S是饱和度百分比，L是亮度百分比，把L值从62%降到42%就行，调完再换回HEX贴进CSS。这就是颜色值转换工具的价值：不同格式各有各的强项，HEX写起来短，RGB方便程序里算通道值，HSL调亮度饱和度最直观，RGBA和HSLA能带透明度。你在任意一个格式里输入值，其余格式自动算好，不用再开脑里的进制换算器。
设计师给的Figma标注是HEX色值，做深色模式时需要转成HSL调亮度。CSS渐变里需要给某个颜色加半透明效果，从HEX转成RGBA。定义设计系统的颜色变量时用HSL，以后换主题色只改H值就行。从截图里取色后需要拿到RGB值写进Canvas代码。
在任意一个输入框里填入颜色值，比如在HEX框里打#3B82F6，下方的RGB、HSL框自动算出对应结果。点击颜色预览区域会弹出系统取色器，拖动十字线选色，选完所有格式同步更新。需要透明度就拖Alpha滑块，RGBA和HSLA框里的第四个参数跟着变。每种格式右侧都有复制按钮，点一下直接拷贝到剪贴板。
看你的使用场景。HEX写起来短，#3B82F6六个字符搞定，在CSS文件里视觉上更干净，设计师标注也常用HEX。RGB的好处是可以用CSS的calc()函数动态算通道值，比如rgb(calc(255 - var(--r)), 0, 0)这种写法HEX做不到。两种格式可以无损互转，选你团队习惯的就行。
因为HSL的三个参数跟人眼感知颜色的方式一致：色相是"什么颜色"，饱和度是"多鲜艳"，亮度是"多亮"。想把一个蓝色变暗一点，L值从62改到42就行。换成RGB你得同时调三个通道的数值，还不知道该减多少。做深色模式、主题切换、配色方案时HSL的效率远高于RGB。
两种写法：rgba(59, 130, 246, 0.5)或者hsla(217, 91%, 60%, 0.5)，第四个参数是Alpha值，0全透明、1不透明。注意别用CSS的opacity属性来实现单元素半透明，因为opacity会让元素内部所有子元素和文字一起变淡，而RGBA只影响背景色。
CSS内置了140多个命名颜色，red、blue、teal、coral这些都能直接写。但在实际项目中不推荐用，因为名字不直观——你看到"coral"不知道它具体是什么颜色，而#FF7F50一眼就知道是珊瑚色。团队协作时还是用HEX或RGB更精确可控。