什么是颜色转换器？
颜色转换器是网页开发人员、图形设计师和所有处理数字颜色的人员不可或缺的工具。它在三种最广泛使用的颜色格式之间提供即时、准确的转换：HEX（十六进制）、RGB（红-绿-蓝）和 HSL（色相-饱和度-明度）。HEX 表示法以 # 后跟六个十六进制数字书写，如 #FF5733，是 CSS 和网页设计的标准格式，提供紧凑且无歧义的颜色表示。RGB 格式以 rgb(255, 87, 51) 表示，通过指定红、绿、蓝光通道的强度（各 0-255）来定义颜色，是基于屏幕的应用程序的自然选择。HSL 格式以 hsl(11, 100%, 60%) 书写，以色相（颜色轮角度 0-360 度）、饱和度（鲜艳程度 0%-100%）和明度（亮度 0%-100%）来描述颜色，是人类最直观的颜色理解方式。此转换器还包括实时颜色预览色板、WCAG 对比度比率检查（验证 AA 和 AAA 标准的无障碍合规性）和转换历史记录功能。无论您是将 Figma 或 Sketch 中的设计规范转换为 CSS、构建具有一致颜色令牌的设计系统、通过调整色相创建和谐调色板，还是调试 CSS 颜色问题，此工具都能提供所需的精度和便利。
何时使用此计算器
- 将设计师的颜色规格转换为 CSS 兼容值时。
- 构建设计系统时。
- 使用 HSL 创建调色板时。
- 检查 WCAG AA 和 AAA 合规性的颜色对比度时。
- 转换现有代码中的旧颜色值时。
- 调试 CSS 颜色问题时。
步骤:
- 以任何格式输入颜色值。
- 选择输入格式。
- 查看三种格式中的转换值。
- 复制结果。
- 检查 WCAG 对比度徽章。
公式
HEX → RGB：将#RRGGBB拆分为十进制值
RGB → HSL：归一化RGB → 计算色相/饱和度/明度
HSL → RGB：通过彩度公式转换
HEX：#RRGGBB（各通道0-255）
RGB：rgb(R, G, B)（0-255）
HSL：hsl(H°, S%, L%)（H：0-360，S/L：0-100）
使用场景
- 转换 CSS 颜色值
- 从基础颜色创建配色方案
- 匹配设计系统中的颜色
- 通过HSL理解颜色关系
主要优势
- 即时在HEX、RGB、HSL格式之间转换颜色
- 精确转换算法确保可靠性
- 完全在浏览器中运行，保护隐私
- 支持WCAG对比度检查
- 直观的色彩选择器易于使用
- 简单易用的界面适合初学者
专业提示
- 创建颜色变体时使用 HSL。
- CSS 和 HTML 始终使用 HEX。
- 根据 WCAG 对比度要求验证颜色选择。
- 构建设计系统时在 HSL 中定义基础调色板。
- HEX 值不区分大小写。
需要避免的常见错误
- 输入 HEX 颜色时忘记 # 前缀。
- 使用超过 255 或低于 0 的 RGB 值。
- 混淆 HSL 色相范围（0-360）和 RGB（0-255）。
- 假设 HSL 明度和 RGB 亮度等效。
关键术语解释
- HEX: 用于 CSS 和网页设计的十六进制颜色表示法。
- RGB: 红-绿-蓝颜色模型。
- HSL: 色相-饱和度-明度颜色模型。
- 颜色空间: 组织和表示颜色的数学模型。
- WCAG 对比度: 文本和背景之间亮度差异的数值度量。
相关概念
示例
输入：#FF5733（HEX）→ RGB：rgb(255, 87, 51) → HSL：hsl(11, 100%, 60%)。输入：hsl(200, 50%, 50%) → RGB：rgb(64, 149, 191) → HEX：#4095BF。
解读您的结果
转换器同时以三种格式显示您的颜色。HEX 是 Web 开发中最常见的格式。RGB 让您直接控制各个颜色通道。HSL 是人类理解最直观的格式。