跳转到主内容

颜色转换器

颜色转换器是一个在线工具，可以在HEX、RGB、HSL颜色格式之间进行转换。支持实时双向转换和预设颜色选择。

#3498DB

🎨 颜色选择器

HEX

网页上最常用

RGB

HSL

🎨 预设颜色

支持HEX、RGB和HSL颜色格式之间的转换。使用颜色选择器直接选择颜色或手动输入值。

功能​

  • 多格式支持：支持HEX、RGB、HSL格式
  • 实时转换：自动在所有格式之间同步
  • 颜色预览：实时显示选中的颜色
  • 预设颜色：10种常用颜色快速选择
  • 一键复制：快速复制任何格式的颜色值

颜色格式​

HEX（十六进制）​

6位十六进制代码表示颜色：

#RRGGBB
#FF5733 → 红色:255, 绿色:87, 蓝色:51

RGB（红绿蓝）​

使用0-255范围内的三个值：

rgb(255, 87, 51)

HSL（色相、饱和度、亮度）​

  • 色相（H）：0-360度（色轮上的颜色）
  • 饱和度（S）：0-100%（颜色强度）
  • 亮度（L）：0-100%（明暗程度）
hsl(9, 100%, 60%)

编程示例​

JavaScript​

// HEX转RGB
function hexToRgb(hex) {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

console.log(hexToRgb('#FF5733'));
// 输出: {r: 255, g: 87, b: 51}

// RGB转HEX
function rgbToHex(r, g, b) {
  return "#" + [r, g, b].map(x => {
    const hex = x.toString(16);
    return hex.length === 1 ? "0" + hex : hex;
  }).join('');
}

console.log(rgbToHex(255, 87, 51));
// 输出: #ff5733

CSS使用​

/* HEX */
.element {
  color: #FF5733;
}

/* RGB */
.element {
  color: rgb(255, 87, 51);
}

/* RGBA（带透明度） */
.element {
  color: rgba(255, 87, 51, 0.5);
}

/* HSL */
.element {
  color: hsl(9, 100%, 60%);
}

/* HSLA（带透明度） */
.element {
  color: hsla(9, 100%, 60%, 0.5);
}

预设颜色​

颜色名称HEXRGB用途
红色#FF0000rgb(255, 0, 0)错误、警告
蓝色#0000FFrgb(0, 0, 255)链接、信息
绿色#00FF00rgb(0, 255, 0)成功、确认
黄色#FFFF00rgb(255, 255, 0)警告、注意
紫色#800080rgb(128, 0, 128)创意、奢华
橙色#FFA500rgb(255, 165, 0)动作、能量
粉色#FFC0CBrgb(255, 192, 203)浪漫、温柔
青色#00FFFFrgb(0, 255, 255)清新、现代
灰色#808080rgb(128, 128, 128)中性、平衡
黑色#000000rgb(0, 0, 0)对比、优雅

使用场景​

1. Web开发​

CSS中定义颜色：

:root {
  --primary-color: #667eea;
  --secondary-color: rgb(102, 126, 234);
  --accent-color: hsl(232, 75%, 67%);
}

2. 设计系统​

建立一致的颜色调色板：

const colors = {
  primary: {
    hex: '#667eea',
    rgb: 'rgb(102, 126, 234)',
    hsl: 'hsl(232, 75%, 67%)'
  }
};

3. 数据可视化​

在图表和图形中使用颜色代码。

相关工具​