选择一种颜色或以任意格式输入数值。即时在 HEX、RGB 和 HSL 之间转换，并提供实时预览样本和一键复制。
颜色是网页上最强大的设计元素之一，选择合适的 CSS 颜色格式可以显著提升工作流效率。三种最常用的颜色格式——HEX、RGB 和 HSL——都能表示超过 1600 万种颜色的相同色谱，但在可读性和可操作性上差异显著。HEX 代码如 #3b82f6 结构紧凑且在 CSS 中随处可见，而 RGB 值如 rgb(59, 130, 246) 则直接映射到屏幕用于呈现颜色的红、绿、蓝光通道。
HSL（色相、饱和度、亮度）越来越受到设计师青睐，因为它符合人类对颜色的自然认知方式。无需混合抽象的通道数值，只需在色轮上选择一个色相（0-360 度），用饱和度（0-100%）设定强度，用亮度（0-100%）控制明暗。这使得创建和谐配色方案变得轻而易举：保持色相不变，仅调节饱和度和亮度即可生成同色系的色调、暗度和明度。现代 CSS 自定义属性与 HSL 配合尤佳，您可以定义基础色相并从中派生完整调色板。
选择好看的颜色只是问题的一半——它们还必须具备可访问性。Web 内容可访问性指南（WCAG 2.1）要求普通文本的对比度至少为 4.5:1，大字号文本为 3:1。约有 8% 的男性和 0.5% 的女性存在不同程度的色盲，因此仅凭颜色传递信息是常见的可访问性陷阱。务必使用对比度检查工具配合颜色选择，并考虑在模拟色盲过滤器下的视觉效果。此转换器帮助您快速迭代颜色值，以测试不同组合，找到美观与可读性之间的最佳平衡。