CSS颜色格式完全指南：HEX、RGB、HSL深度解析

🎨 CSS颜色格式概览

CSS支持多种颜色表示方法，每种格式都有其特定的应用场景。了解它们的区别和转换方法，能让你的开发和设计工作更加高效。

主流颜色格式对比

🔢 HEX颜色格式详解

基本结构

#RRGGBB  /* 标准6位 */
#RGB     /* 简写3位 */
#RRGGBBAA /* 8位（含透明度）*/
#RGBA    /* 简写4位（含透明度）*/

转换规则

HEX: #FF5733
│││││└└─ BB (蓝色) = 51  → 0x33 = 51
│││└└─── GG (绿色) = 87  → 0x57 = 87
││└───── RR (红色) = 255 → 0xFF = 255
│└────── # 前缀

简写规则：
#F00 = #FF0000  (每个字符重复一次)
#F0F = #FF00FF

实际应用

/* 基础用法 */
.header {
  background-color: #3498db;  /* 蓝色 */
  color: #ffffff;              /* 白色 */
}

/* 带透明度 */
.overlay {
  background-color: #00000080;  /* 半透明黑色，80 = 50% */
}

/* 简写形式 */
.error {
  color: #f00;  /* 等同于 #ff0000 */
}

HEX颜色技巧

/* 常用灰度值 */
#000000  /* 纯黑 */
#333333  /* 深灰 */
#666666  /* 中灰 */
#999999  /* 浅灰 */
#cccccc  /* 更浅灰 */
#ffffff  /* 纯白 */

/* 透明度对照表（8位HEX）*/
100% = FF
90%  = E6
80%  = CC
70%  = B3
60%  = 99
50%  = 80
40%  = 66
30%  = 4D
20%  = 33
10%  = 1A
0%   = 00

🌈 RGB/RGBA颜色详解

基本语法

/* RGB（不透明）*/
rgb(red, green, blue)
rgb(255, 87, 51)           /* 传统语法 */
rgb(100% 34% 20%)          /* CSS Color 4 百分比 */

/* RGBA（带透明度）*/
rgba(red, green, blue, alpha)
rgba(255, 87, 51, 0.8)     /* alpha: 0-1 */
rgba(255 87 51 / 80%)      /* CSS Color 4 新语法 */

取值范围

R (红色): 0-255 或 0%-100%
G (绿色): 0-255 或 0%-100%
B (蓝色): 0-255 或 0%-100%
A (透明度): 0-1 或 0%-100%

实用示例

/* 纯色 */
.primary {
  color: rgb(52, 152, 219);  /* 蓝色 */
}

/* 半透明背景 */
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.5);  /* 50%透明黑色 */
}

/* 渐变透明度 */
.gradient {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 1),    /* 顶部完全不透明 */
    rgba(255, 255, 255, 0)     /* 底部完全透明 */
  );
}

/* 悬停效果 */
.button {
  background-color: rgb(52, 152, 219);
  transition: background-color 0.3s;
}

.button:hover {
  background-color: rgb(41, 128, 185);  /* 深一点的蓝色 */
}

RGB动态计算

// 动态生成颜色
function adjustBrightness(rgb, percent) {
  const [r, g, b] = rgb.match(/\d+/g).map(Number);
  const adjust = (val) => Math.min(255, Math.max(0, val + percent));
  
  return `rgb(${adjust(r)}, ${adjust(g)}, ${adjust(b)})`;
}

// 使用
const baseColor = 'rgb(52, 152, 219)';
const lighter = adjustBrightness(baseColor, 30);   // 变亮
const darker = adjustBrightness(baseColor, -30);   // 变暗

🎨 HSL/HSLA颜色详解

什么是HSL？

HSL代表：

• Hue（色相）：0-360度，色轮上的角度
• Saturation（饱和度）：0%-100%，颜色的纯度
• Lightness（亮度）：0%-100%，颜色的明暗

hsl(hue, saturation, lightness)
hsl(9, 100%, 60%)

hsla(hue, saturation, lightness, alpha)
hsla(9, 100%, 60%, 0.8)

色相环对照表

0° / 360° = 红色 (Red)
30°       = 橙色 (Orange)
60°       = 黄色 (Yellow)
120°      = 绿色 (Green)
180°      = 青色 (Cyan)
240°      = 蓝色 (Blue)
280°      = 紫色 (Purple)
300°      = 品红 (Magenta)

HSL的优势

/* 相同色相，不同亮度（配色系统）*/
.primary {
  background: hsl(220, 90%, 50%);  /* 基础蓝色 */
}

.primary-light {
  background: hsl(220, 90%, 70%);  /* 浅蓝色 */
}

.primary-dark {
  background: hsl(220, 90%, 30%);  /* 深蓝色 */
}

/* 互补色（色相相差180度）*/
.color-1 {
  color: hsl(0, 100%, 50%);    /* 红色 */
}

.color-2 {
  color: hsl(180, 100%, 50%);  /* 青色（互补色）*/
}

/* 三角配色（色相间隔120度）*/
.triad-1 { color: hsl(0, 100%, 50%);    } /* 红 */
.triad-2 { color: hsl(120, 100%, 50%);  } /* 绿 */
.triad-3 { color: hsl(240, 100%, 50%);  } /* 蓝 */

HSL动画

/* 色相旋转动画 */
@keyframes rainbow {
  0%   { background: hsl(0, 100%, 50%);   }
  16%  { background: hsl(60, 100%, 50%);  }
  33%  { background: hsl(120, 100%, 50%); }
  50%  { background: hsl(180, 100%, 50%); }
  66%  { background: hsl(240, 100%, 50%); }
  83%  { background: hsl(300, 100%, 50%); }
  100% { background: hsl(360, 100%, 50%); }
}

.rainbow-bg {
  animation: rainbow 10s infinite;
}

/* 渐变饱和度 */
.saturation-fade {
  background: linear-gradient(
    to right,
    hsl(220, 0%, 50%),    /* 灰色（无饱和度）*/
    hsl(220, 100%, 50%)   /* 纯蓝色 */
  );
}

🔄 颜色格式转换

HEX ↔ RGB

// 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;
}

hexToRgb('#FF5733');  // { r: 255, g: 87, b: 51 }

// RGB → HEX
function rgbToHex(r, g, b) {
  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b)
    .toString(16)
    .slice(1)
    .toUpperCase();
}

rgbToHex(255, 87, 51);  // "#FF5733"

RGB ↔ HSL

// RGB → HSL
function rgbToHsl(r, g, b) {
  r /= 255; g /= 255; b /= 255;
  
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  let h, s, l = (max + min) / 2;

  if (max === min) {
    h = s = 0; // 灰色
  } else {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    
    switch (max) {
      case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
      case g: h = ((b - r) / d + 2) / 6; break;
      case b: h = ((r - g) / d + 4) / 6; break;
    }
  }

  return {
    h: Math.round(h * 360),
    s: Math.round(s * 100),
    l: Math.round(l * 100)
  };
}

// HSL → RGB
function hslToRgb(h, s, l) {
  h /= 360; s /= 100; l /= 100;
  
  let r, g, b;

  if (s === 0) {
    r = g = b = l; // 灰色
  } else {
    const hue2rgb = (p, q, t) => {
      if (t < 0) t += 1;
      if (t > 1) t -= 1;
      if (t < 1/6) return p + (q - p) * 6 * t;
      if (t < 1/2) return q;
      if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
      return p;
    };

    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
    const p = 2 * l - q;
    
    r = hue2rgb(p, q, h + 1/3);
    g = hue2rgb(p, q, h);
    b = hue2rgb(p, q, h - 1/3);
  }

  return {
    r: Math.round(r * 255),
    g: Math.round(g * 255),
    b: Math.round(b * 255)
  };
}

🎯 实战应用场景

1. 主题色系统

:root {
  /* 基础色（HSL便于调整）*/
  --primary-h: 220;
  --primary-s: 90%;
  --primary-l: 50%;
  
  /* 自动生成色阶 */
  --primary-50:  hsl(var(--primary-h), var(--primary-s), 95%);
  --primary-100: hsl(var(--primary-h), var(--primary-s), 90%);
  --primary-200: hsl(var(--primary-h), var(--primary-s), 80%);
  --primary-300: hsl(var(--primary-h), var(--primary-s), 70%);
  --primary-400: hsl(var(--primary-h), var(--primary-s), 60%);
  --primary-500: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
  --primary-600: hsl(var(--primary-h), var(--primary-s), 40%);
  --primary-700: hsl(var(--primary-h), var(--primary-s), 30%);
  --primary-800: hsl(var(--primary-h), var(--primary-s), 20%);
  --primary-900: hsl(var(--primary-h), var(--primary-s), 10%);
}

.button-primary {
  background: var(--primary-500);
}

.button-primary:hover {
  background: var(--primary-600);
}

2. 暗黑模式

:root {
  --bg: hsl(0, 0%, 100%);
  --text: hsl(0, 0%, 0%);
}

[data-theme="dark"] {
  --bg: hsl(0, 0%, 10%);
  --text: hsl(0, 0%, 95%);
}

body {
  background-color: var(--bg);
  color: var(--text);
  transition: background-color 0.3s, color 0.3s;
}

3. 动态配色

// React示例：根据用户输入生成配色
function ColorTheme({ baseColor }) {
  const [h, s, l] = parseHsl(baseColor);
  
  return (
    <div>
      <div style={{ backgroundColor: `hsl(${h}, ${s}%, ${l}%)` }}>
        主色
      </div>
      <div style={{ backgroundColor: `hsl(${h}, ${s}%, ${l + 20}%)` }}>
        浅色
      </div>
      <div style={{ backgroundColor: `hsl(${h}, ${s}%, ${l - 20}%)` }}>
        深色
      </div>
      <div style={{ backgroundColor: `hsl(${(h + 180) % 360}, ${s}%, ${l}%)` }}>
        互补色
      </div>
    </div>
  );
}

4. 渐变效果

/* 多色渐变 */
.rainbow-gradient {
  background: linear-gradient(
    to right,
    hsl(0, 100%, 50%),      /* 红 */
    hsl(60, 100%, 50%),     /* 黄 */
    hsl(120, 100%, 50%),    /* 绿 */
    hsl(180, 100%, 50%),    /* 青 */
    hsl(240, 100%, 50%),    /* 蓝 */
    hsl(300, 100%, 50%),    /* 品红 */
    hsl(360, 100%, 50%)     /* 红 */
  );
}

/* 透明渐变 */
.fade-out {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 1),
    rgba(255, 255, 255, 0)
  );
}

🛠️ 颜色工具函数库

class ColorUtils {
  // 颜色加深
  static darken(color, percent) {
    const { h, s, l } = this.parseHsl(color);
    return `hsl(${h}, ${s}%, ${Math.max(0, l - percent)}%)`;
  }
  
  // 颜色变浅
  static lighten(color, percent) {
    const { h, s, l } = this.parseHsl(color);
    return `hsl(${h}, ${s}%, ${Math.min(100, l + percent)}%)`;
  }
  
  // 增加饱和度
  static saturate(color, percent) {
    const { h, s, l } = this.parseHsl(color);
    return `hsl(${h}, ${Math.min(100, s + percent)}%, ${l}%)`;
  }
  
  // 降低饱和度
  static desaturate(color, percent) {
    const { h, s, l } = this.parseHsl(color);
    return `hsl(${h}, ${Math.max(0, s - percent)}%, ${l}%)`;
  }
  
  // 获取互补色
  static complement(color) {
    const { h, s, l } = this.parseHsl(color);
    return `hsl(${(h + 180) % 360}, ${s}%, ${l}%)`;
  }
  
  // 混合两个颜色
  static mix(color1, color2, weight = 50) {
    const rgb1 = this.toRgb(color1);
    const rgb2 = this.toRgb(color2);
    const w = weight / 100;
    
    return `rgb(${
      Math.round(rgb1.r * w + rgb2.r * (1 - w))
    }, ${
      Math.round(rgb1.g * w + rgb2.g * (1 - w))
    }, ${
      Math.round(rgb1.b * w + rgb2.b * (1 - w))
    })`;
  }
}

// 使用示例
const primary = '#3498db';
const lighter = ColorUtils.lighten(primary, 20);
const darker = ColorUtils.darken(primary, 20);
const complementary = ColorUtils.complement(primary);

📊 颜色选择最佳实践

✅ 推荐做法

1. 使用CSS变量管理颜色系统
2. HSL格式构建主题色阶
3. 语义化命名（--color-primary而非--color-blue）
4. 考虑无障碍（WCAG对比度标准）
5. 保持一致性（限制调色板规模）

❌ 避免的做法

1. ❌ 硬编码颜色值（不便维护）
2. ❌ 使用过多颜色（破坏视觉一致性）
3. ❌ 忽视对比度（可访问性问题）
4. ❌ 不考虑暗黑模式
5. ❌ 重复定义相似颜色

对比度检查

// WCAG对比度计算
function getContrast(rgb1, rgb2) {
  const luminance = (rgb) => {
    const [r, g, b] = [rgb.r, rgb.g, rgb.b].map(val => {
      val /= 255;
      return val <= 0.03928 
        ? val / 12.92 
        : Math.pow((val + 0.055) / 1.055, 2.4);
    });
    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
  };
  
  const lum1 = luminance(rgb1);
  const lum2 = luminance(rgb2);
  const brightest = Math.max(lum1, lum2);
  const darkest = Math.min(lum1, lum2);
  
  return (brightest + 0.05) / (darkest + 0.05);
}

// WCAG AA标准：
// 普通文本: 4.5:1
// 大文本: 3:1
// WCAG AAA标准：
// 普通文本: 7:1
// 大文本: 4.5:1

🔗 相关工具

需要快速转换颜色格式？试试我们的 CSS颜色转换工具，支持：

• 🎨 HEX、RGB、HSL等多格式互转
• 🖌️ 可视化颜色选择器
• 📋 一键复制所有格式
• 🔬 支持Lab、OKLab等专业色彩空间

推荐阅读

• CSS Color Module Level 4规范
• 色彩理论基础
• 设计系统中的颜色应用
• Web无障碍颜色对比度指南