跳至正文

颜色转换器

支持 HEX、RGB、HSL 颜色格式之间转换的免费在线工具。

#3498DB

🎨 색상 선택

HEX

웹에서 가장 많이 사용

RGB

HSL

🎨 미리 설정된 색상

HEX, RGB, HSL 색상 형식 간 변환을 지원합니다. 색상 피커로 직접 색상을 선택하거나, 값을 직접 입력할 수 있습니다.

什么是颜色格式？​

在数字环境中有多种表示颜色的方法。每种格式都有特定的用途和优点，应根据情况选择合适的格式。

主要功能​

  • 支持 3 种格式：HEX、RGB、HSL
  • 实时转换：更改一种格式时所有格式自动更新
  • 颜色选择器：可视化选择颜色
  • 大型预览：大幅显示选定的颜色
  • 即时复制：一键复制每种格式
  • 预设颜色：提供 10 种流行颜色

颜色格式说明​

HEX（Hexadecimal）- 十六进制​

网络上最常用的格式。

格式：

#RRGGBB

示例：

#3498db  /* 蓝色 */
#e74c3c  /* 红色 */
#2ecc71  /* 绿色 */

结构：

  • #：前缀
  • RR：红色（00-FF）
  • GG：绿色（00-FF）
  • BB：蓝色（00-FF）

3 位缩写形式：

#f00  /* 与 #ff0000 相同 */
#abc  /* 与 #aabbcc 相同 */

优点：

  • 简洁
  • CSS 中的基本格式
  • 易于复制

缺点：

  • 难以理解
  • 调整颜色不直观

RGB（Red, Green, Blue）​

使用光的三原色的格式。

格式：

rgb(R, G, B)

示例：

rgb(52, 152, 219)   /* 蓝色 */
rgb(231, 76, 60)    /* 红色 */
rgb(46, 204, 113)   /* 绿色 */

值范围：

  • 每个通道：0-255
  • 0 = 暗，255 = 亮

RGBA（含透明度）：

rgba(52, 152, 219, 0.5)  /* 50% 透明度 */

优点：

  • 易于理解
  • 可以独立调整每个颜色通道
  • 编程中直观

缺点：

  • 比 HEX 长
  • 调整亮度不直观

HSL（Hue, Saturation, Lightness）​

使用色调、饱和度、亮度的格式。

格式：

hsl(H, S%, L%)

示例：

hsl(204, 70%, 53%)   /* 蓝色 */
hsl(6, 78%, 57%)     /* 红色 */
hsl(145, 63%, 49%)   /* 绿色 */

值范围：

  • H（Hue）：0-360°（色调轮）
    • 0° = 红色
    • 120° = 绿色
    • 240° = 蓝色
  • S（Saturation）：0-100%（饱和度）
    • 0% = 灰色
    • 100% = 纯色
  • L（Lightness）：0-100%（亮度）
    • 0% = 黑色
    • 50% = 纯色
    • 100% = 白色

HSLA（含透明度）：

hsla(204, 70%, 53%, 0.5)  /* 50% 透明度 */

优点：

  • 颜色调整非常直观
  • 易于调整亮度/饱和度
  • 对生成颜色面板很有用

缺点：

  • 比 HEX/RGB 不太直观
  • 某些旧浏览器不支持

颜色格式比较​

特性HEXRGBHSL
简洁性⭐⭐⭐⭐⭐⭐⭐
可读性⭐⭐⭐⭐⭐⭐
CSS 支持⭐⭐⭐⭐⭐⭐⭐⭐⭐
调整便利性⭐⭐⭐⭐⭐⭐
透明度✗✓✓

使用场景​

1. CSS 样式​

/* HEX */
.button {
  background-color: #3498db;
}

/* RGB */
.button {
  background-color: rgb(52, 152, 219);
}

/* HSL */
.button {
  background-color: hsl(204, 70%, 53%);
}

2. 生成颜色面板​

/* 用 HSL 轻松生成相似颜色 */
.primary   { color: hsl(204, 70%, 53%); }
.lighter   { color: hsl(204, 70%, 70%); }  /* 增加 L */
.darker    { color: hsl(204, 70%, 35%); }  /* 减少 L */
.desaturate{ color: hsl(204, 40%, 53%); }  /* 减少 S */

3. JavaScript 动态颜色​

// 用 RGB 生成渐变
for (let i = 0; i < 255; i++) {
  const color = `rgb(${i}, 100, 200)`;
  // 使用
}

// 用 HSL 生成彩虹颜色
for (let h = 0; h < 360; h += 30) {
  const color = `hsl(${h}, 100%, 50%)`;
  // 使用
}

4. 设计系统​

/* 用变量管理颜色 */
:root {
  --primary-h: 204;
  --primary-s: 70%;
  --primary-l: 53%;

  --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
  --primary-light: hsl(var(--primary-h), var(--primary-s), 70%);
  --primary-dark: hsl(var(--primary-h), var(--primary-s), 35%);
}

5. 改善可访问性​

// 根据亮度决定文本颜色
function getTextColor(bgColor) {
  const [h, s, l] = parseHSL(bgColor);
  return l > 50 ? '#000000' : '#ffffff';
}

预设颜色​

此工具提供 10 种流行颜色：

颜色HEX名称
🔴#e74c3c红色
🔵#3498db蓝色
🟢#2ecc71绿色
🟠#f39c12橙色
🟣#9b59b6紫色
🔷#1abc9c青绿色
⚫#34495e深灰色
🟤#e67e22棕色
⚪#95a5a6浅灰色
🟧#d35400深橙色

实用技巧​

1. 使颜色变亮/变暗​

/* 原始 */
.button { background: hsl(204, 70%, 53%); }

/* 亮 10% */
.button-light { background: hsl(204, 70%, 63%); }

/* 暗 10% */
.button-dark { background: hsl(204, 70%, 43%); }

2. 添加透明度​

/* HEX 添加透明度（8 位） */
#3498db80  /* 50% 透明度 */

/* RGB/HSL */
rgba(52, 152, 219, 0.5)
hsla(204, 70%, 53%, 0.5)

3. 查找互补色​

// HSL 中 H + 180度
function getComplementary(h, s, l) {
  return `hsl(${(h + 180) % 360}, ${s}%, ${l}%)`;
}

4. 灰度转换​

/* 将饱和度设为 0 */
.grayscale {
  filter: grayscale(100%);
  /* 或 */
  background: hsl(204, 0%, 53%);
}

5. 颜色可访问性检查​

// 计算 WCAG 对比度
function getContrastRatio(color1, color2) {
  const l1 = getLuminance(color1);
  const l2 = getLuminance(color2);
  const lighter = Math.max(l1, l2);
  const darker = Math.min(l1, l2);
  return (lighter + 0.05) / (darker + 0.05);
}

// 建议 4.5:1 以上（普通文本）
// 建议 3:1 以上（大文本）

常见问题​

Q：应该使用哪种格式？​

  • HEX：CSS 中简洁使用，易于复制
  • RGB：编程，需要调整每个通道时
  • HSL：生成颜色面板，调整亮度/饱和度时

一般建议使用 HEX！

Q：HEX 的 3 位和 6 位有什么区别？​

3 位是 6 位的缩写形式：

  • #f00 = #ff0000
  • #abc = #aabbcc

需要精确颜色时使用 6 位！

Q：RGB 的最大值为什么是 255？​

8 位 = 2^8 = 256 种值（0-255） 总颜色数 = 256 × 256 × 256 = 16,777,216 种颜色

Q：HSL 的 H 为什么是 360 度？​

因为色调轮是圆（circle）。360 度 = 一圈

Q：如何表示透明度？​

  • HEX：8 位（#RRGGBBAA）
  • RGB：使用 RGBA
  • HSL：使用 HSLA

Q：有针对色盲用户的提示吗？​

  • 禁止仅用颜色传达信息
  • 添加文本标签
  • 保持足够的对比度（4.5:1 以上）
  • 用色盲模拟器测试

相关工具​

性能​

  • 转换速度：小于毫秒
  • 实时更新：即时
  • 内存使用：最小
  • 离线运行：完全支持

浏览器兼容性​

格式ChromeFirefoxSafariEdge
HEX✓✓✓✓
RGB✓✓✓✓
RGBA✓✓✓✓
HSL✓✓✓✓
HSLA✓✓✓✓

隐私保护​

此工具完全在客户端运行。您选择的颜色信息不会发送到服务器，仅在浏览器中处理。

💬 这个工具对您有帮助吗？​

如有任何疑问或改进建议，欢迎随时提供反馈！