颜色选择器指南：HEX、RGB、HSL 互转

快速回答

快速回答： 打开 颜色选择器，可视化选色或直接输入 HEX/RGB/HSL，三种格式即时同步——不会上传任何数据。

为什么要转换颜色格式？

• 设计交接 — 从 Figma 复制 HEX，粘贴到 CSS 变量
• 无障碍调整 — 在 HSL 中改亮度而不破坏色相
• 调试主题 — 验证同一颜色在不同语法下的表达

支持的格式

开发者小贴士

• 3 位 HEX — #abc 会展开为 #aabbcc
• 无效输入 — 显示明确错误，不会重置其他字段
• 一键复制 — 任意字段可复制到样式表或设计 token

亲自试试

用免费 颜色选择器 转换颜色 →

常见问题

转换是否准确？

对 0–255 范围内的 sRGB 值准确。极端 HSL 输入会钳制到有效百分比。

能替代完整设计系统工具吗？

适合格式转换与快速取色。调色板与对比度评分请配合你的设计工具链。

CSS 变量用 HEX 还是 HSL？

HEX 更紧凑；HSL 便于以编程方式调整亮度与饱和度。