颜色转换器
在HEX、RGB和HSL之间实时转换。
网页设计用HEX、RGB和HSL颜色转换器
在网页设计和前端开发中，颜色根据场景使用不同的模型表示。HEX格式（#RRGGBB）因简洁而在CSS样式表中最为常用。RGB模型（红、绿、蓝）通过混合红、绿、蓝三原色（值0到255）定义颜色，是数字屏幕的原生模型。HSL（色相、饱和度、明度）以对设计师更直观的方式组织颜色，允许独立调整色相、饱和度和明度。
我们的转换器可在这三种格式之间实时转换任何颜色。当你使用Figma或Adobe XD等设计工具导出HEX颜色但需要RGB值用于JavaScript动画，或者想通过仅调整HSL明度来创建颜色变体时，这特别有用。实时预览让你在复制之前准确看到颜色的效果。
你可以在三种格式中的任何一种手动输入值，或使用浏览器原生颜色选择器直观选取。每种格式都有复制按钮，将值放入剪贴板，可直接在CSS、JavaScript或任何设计工具中使用。
常见问题
HEX和RGB有什么区别？
两者表示完全相同的颜色，只是表示方式不同。HEX使用十六进制数字，格式为#RRGGBB，而RGB使用0到255的十进制数字表示每个通道。例如，白色在HEX中是#FFFFFF，在RGB中是rgb(255, 255, 255)。HEX在CSS中更简洁，而RGB在程序化操作中更方便。
什么时候使用HSL？
HSL非常适合创建和谐的调色板或同一色调的变体。通过将色相（H）与饱和度（S）和明度（L）分开，你可以仅调整明度来创建更亮或更暗的颜色，或仅改变饱和度来创建更鲜艳或更柔和的版本，而不影响基础色调。
浏览器使用什么颜色模型？
网页浏览器支持三种格式：CSS中的HEX、RGB和HSL。屏幕内部以RGB工作，因为每个像素由红、绿、蓝子像素组成。现代CSS还支持oklch和display-p3等更先进的颜色模型，用于HDR显示器上更广的色域。
想了解更多？ 阅读我们的完整指南 →