颜色转换工具支持HEX、RGB、HSL、RGBA四种主流颜色格式的实时互转。通过可视化取色器选取颜色,或直接输入颜色代码,所有格式自动同步更新。内置HSL调节器可精确调整色相、饱和度和亮度,调色板提供常用颜色快速取用,一键复制颜色代码到CSS样式中使用。
HEX和RGB本质上表示相同的颜色信息。HEX使用十六进制表示(如#206BC4),更简洁;RGB使用十进制表示(如rgb(32,107,196)),更直观。在CSS中两者效果完全一致,HEX写法更短,RGB写法可读性更好。
HSL(色相、饱和度、亮度)更符合人类对颜色的直觉认知。调整色相可以切换颜色种类,调整饱和度可以控制颜色鲜艳程度,调整亮度可以获得同色系的深浅变化。在需要生成同色系配色方案时,HSL格式特别方便。
RGBA中的A代表Alpha通道,取值范围0到1。0表示完全透明,1表示完全不透明。例如rgba(32,107,196,0.5)表示50%透明度的蓝色。透明度常用于遮罩层、半透明背景、悬浮效果等场景。
CSS支持148种预定义颜色名称,如red、blue、tomato、cornflowerblue等。颜色名称便于记忆但数量有限,精确配色时建议使用HEX或RGB。本工具的调色板中包含了常用的基础颜色供快速选用。
点击颜色预览区下方的取色器控件,浏览器会弹出系统级颜色选择面板。在面板中可以自由选取颜色,选择后所有格式的颜色值会自动同步更新。也可以直接在输入框中粘贴已知的颜色代码。
推荐使用HSL格式:选定主色后,保持色相不变,通过调整饱和度和亮度生成同色系的深浅变化;或保持饱和度和亮度不变,等距调整色相(如间隔120度)生成三色配色方案。调色板中的颜色也可作为配色起点。