🎨 颜色转换器

面向网页设计师和开发者的综合颜色转换工具。实时转换HEX、RGB、HSL等多种颜色格式并即时预览效果。通过颜色选择器和滑块直观地找到想要的颜色，也可以使用预设颜色快速开始工作。

选择颜色

红色 (0-255) — 102

绿色 (0-255) — 126

蓝色 (0-255) — 234

HEX

—

RGB

—

HSL

—

CMYK

—

配色方案

互补色

类似色

三角配色

分裂互补色

指南

颜色代码转换是指在数字设计中使用的各种颜色表示方式（HEX、RGB、HSL）之间相互转换的过程。在网页设计、平面设计、应用开发等领域中都不可或缺。每种颜色代码格式都有各自的优点，根据实际使用场景选择合适的格式非常重要。

HEX：#RRGGBB格式，网页中使用最广泛（例如#FF0000代表红色）。RGB：rgb(255, 0, 0)格式，每个通道取值范围为0至255，支持透明度设置（rgba）。HSL：hsl(0, 100%, 50%)格式，通过色相、饱和度、亮度直观调节颜色，非常适合制作渐变色和主题色。

HEX代码在CSS中最为常用（例如品牌色#3498db），RGB则常用于JavaScript中的动态颜色控制。制作配色主题时HSL尤其方便——只需改变色相（Hue），保持饱和度和亮度不变，就能轻松生成风格一致的调色板。

按照WCAG无障碍设计规范，文本与背景之间的颜色对比度非常关键。普通文本至少需要4.5:1的对比度，大号文本则需要3:1。使用颜色转换器时，可以通过调整HSL的明度（Lightness）值来确保对比度达标，从而提升可读性。

制作和谐调色板的常用方法：单色配色——保持相同色相，只调整饱和度或明度；类似配色——色相相差在30度以内；互补配色——色相相差180度，形成强烈对比；三角配色——将色相依次相隔120度排列（如0度、120度、240度）。

设计阶段建议使用HSL挑选颜色，因为更直观；编写CSS时使用HEX或RGB更方便；制作JavaScript动画时使用RGB/RGBA以便控制透明度；生成调色板时优先用HSL做色相变化；考虑浏览器兼容性时HEX最为稳妥；保存颜色资料时建议同时记录多种格式，方便团队协作。

CSS中应该使用HEX、RGB还是HSL？

三者表示的是同一种颜色，功能上没有区别，可以根据需要选择。固定品牌色常用HEX，需要透明度时用RGBA，只想在保持色相不变的情况下调整明度或饱和度时，HSL会更方便。

转换颜色代码会改变实际颜色吗？

不会，只是改变了同一颜色的书写方式，屏幕上显示的颜色保持一致。不过HSL与RGB相互转换时，四舍五入可能带来极小的数值差异。

互补色是如何计算出来的？

在HSL的色相（Hue）数值上加180度，得到色轮上正对面的颜色。饱和度和明度保持不变，因此得到的对比色与原色调保持协调。

当R、G、B数值相同（例如128,128,128）时是什么颜色？

R、G、B数值相同意味着饱和度为0，也就是灰色（无彩色）。数值为0时是黑色，255时是白色，中间的数值则是不同亮度的灰色。

想检查文字对比度时应该看哪个数值？

可以比较文字颜色与背景颜色的明度（Lightness）差异。一般建议普通文字与背景保持至少4.5:1的对比度，以确保良好的可读性。