颜色转换器

使用方法

网页上的颜色通常以三种格式之一书写：HEX、RGB或HSL。HEX将一种颜色压缩成一个字符串——一个#号后跟六个十六进制数字，两两成对分别代表红、绿、蓝，每对的取值范围从00（无）到FF（满值）。RGB用普通数字而非十六进制对来表达同样的三个通道，红、绿、蓝各自的取值范围是0到255。HSL则采用了不同的思路：它不描述通道强度，而是将色相描述为360°色轮上的一个位置，再用百分比表示饱和度和明度，这更贴近人们实际感知颜色的方式。 每种格式之所以延续下来，是因为它更适合不同的用途，而不是因为某一种取代了其他格式。HEX紧凑，便于粘贴进CSS或设计工具——六个字符就能毫无歧义地表达精确的颜色。RGB直接映射屏幕实际产生颜色的方式，在像素级别混合红、绿、蓝光，并且可以通过增加第四个透明度（alpha）通道，简洁地扩展为rgba()。HSL则是人们在调整颜色（而非从零开始指定颜色）时最常用的格式：提高或降低明度会得到可预测的更浅或更深的色调，而滑动色相则能在色轮上平滑移动，从而构建出协调的调色板。 一个具体的例子能让这种关系一目了然。以一种中蓝色为例：以HEX表示为 #3B82F6。拆分成三对后，3B、82和F6从十六进制转换为十进制分别是59、130和246——正是同一颜色写成 rgb(59, 130, 246) 的形式。将这些红、绿、蓝数值转换为色相、饱和度和明度，你会得到 hsl(217°, 91%, 60%)：217°的色相落在色轮的蓝色区段，91%的饱和度意味着这是一种鲜艳、未被冲淡的蓝色，而60%的明度将其大致置于从黑到白明度范围的中段。这三个字符串描述的是完全相同的像素颜色。 要使用此转换器，只需在输入框中以三种格式之一——HEX代码、rgb()值或hsl()值——输入一种颜色，或者点击取色器进行可视化选择。一旦识别出有效颜色，另外两种格式会立即更新，并同步显示实时预览色块，让你在复制之前确认结果符合预期。点击任意数值旁的复制图标，即可以该确切格式获取它，用于粘贴到CSS、设计工具或代码中。 在实际工作中，格式转换的需求随处可见：当客户提供了一个HEX代码，而你的设计工具需要HSL滑块时，用它来精确匹配品牌色；构建CSS主题时，需要为rgba()叠加层准备一致的RGB数值；将基础颜色的明度微调几个百分点，营造出令人信服的悬停或激活状态；以及通过比较文字和背景颜色的明度值，检查它们是否具备足够的对比度以满足无障碍要求。

常见问题

什么是HEX颜色代码？

HEX颜色代码是一个井号后跟六个十六进制数字，例如 #3B82F6。这六个数字组成三对，每对分别设定红、绿、蓝的强度，范围从00（无）到FF（满值，十进制为255）。由于紧凑且不含歧义，HEX是CSS和设计工具中指定精确颜色最常用的方式。

RGB和HSL有什么区别？

RGB将颜色描述为三个通道的强度——红、绿、蓝，各自从0到255——对应屏幕混合光线生成颜色的方式。HSL将同一颜色描述为色相（在360°色轮上的位置）、饱和度（鲜艳或柔和的程度）和明度（接近黑色或白色的程度）。RGB对屏幕而言更精确；HSL则更便于人们直观地调整。

如何将HEX转换为RGB？

将六个HEX数字拆分成三对——第一对代表红色，第二对代表绿色，第三对代表蓝色——再将每对从十六进制转换为十进制，得到一个0到255之间的数字。例如，#3B82F6 拆分为 3B、82和F6，转换后为59、130和246，即 rgb(59, 130, 246)。此转换器会在你输入时立即完成计算。

透明度（alpha）通道的作用是什么？

透明度通道用于控制透明程度，作为rgba()或hsla()中红、绿、蓝之外新增的第四个数值，范围从0（完全透明）到1（完全不透明）。它可以让一种颜色与其背后的任何内容混合——适用于叠加层、细微边框，或在不改变元素底色的情况下使其变暗。HEX也支持它，作为可选的第4对或第8对数字。