Color颜色值转换与使用

wen java案例 2026-07-26 172

本文目录导读：

Color颜色值转换与使用

常见颜色格式
颜色值转换
颜色工具库推荐
CSS 颜色函数
实际应用场景
最佳实践

我来为您全面介绍颜色值的转换与使用方法。

常见颜色格式

RGB/RGBA

/* RGB */
rgb(255, 0, 0)        /* 纯红色 */
rgb(0, 255, 0)        /* 纯绿色 */
rgb(0, 0, 255)        /* 纯蓝色 */
/* RGBA（带透明度）*/
rgba(255, 0, 0, 0.5)  /* 50%透明度的红色 */

HEX（十六进制）

/* 6位格式 */
#FF0000    /* 红色 */
#00FF00    /* 绿色 */
#0000FF    /* 蓝色 */
/* 3位简写格式 */
#F00       /* 等同于 #FF0000 */
#0F0       /* 等同于 #00FF00 */
/* 8位格式（带透明度） */
#FF0000FF  /* 完全不透明红色 */
#FF000080  /* 50%透明度红色 */

HSL/HSLA

/* HSL */
hsl(0, 100%, 50%)      /* 红色 */
hsl(120, 100%, 50%)    /* 绿色 */
/* HSLA */
hsla(0, 100%, 50%, 0.5)  /* 50%透明度的红色 */
/* H: 色相 0-360
   S: 饱和度 0%-100%
   L: 亮度 0%-100% */

颜色值转换

RGB ↔ HEX 转换

// 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('');
}
// 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;
}

RGB ↔ HSL 转换

// RGB 转 HSL
function rgbToHsl(r, g, b) {
  r /= 255, g /= 255, b /= 255;
  const max = Math.max(r, g, b), min = Math.min(r, g, b);
  let h, s, l = (max + min) / 2;
  if (max === min) {
    h = s = 0; // achromatic
  } 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); break;
      case g: h = (b - r) / d + 2; break;
      case b: h = (r - g) / d + 4; break;
    }
    h /= 6;
  }
  return [h * 360, s * 100, 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; // achromatic
  } 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 * 255, g * 255, b * 255];
}

颜色工具库推荐

chroma.js

// 安装
npm install chroma-js
// 使用
const chroma = require('chroma-js');
// 颜色转换
chroma('red').hex()              // '#ff0000'
chroma('#ff0000').rgb()          // [255, 0, 0]
chroma('rgb(255,0,0)').hsl()     // [0, 1, 0.5]
// 颜色操作
chroma('red').brighten(1).hex()  // 变亮
chroma('red').darken(1).hex()    // 变暗
chroma('red').saturate(1).hex()  // 增加饱和度

Color.js

// 安装
npm install color
// 使用
const Color = require('color');
const color = Color('rgb(255, 0, 0)');
color.hex()                      // '#FF0000'
color.hsl().string()             // 'hsl(0, 100%, 50%)'
// 颜色混合
Color('red').mix(Color('blue'))  // 混合颜色
Color('red').fade(0.5)           // 设置透明度

CSS 颜色函数

现代 CSS 颜色函数

/* color-mix() 颜色混合 */
color-mix(in srgb, red, blue)           /* 混合红色和蓝色 */
color-mix(in srgb, red 30%, blue)       /* 比例混合 */
/* color-contrast() 对比度 */
color-contrast(red vs blue, green)      /* 选择最佳对比色 */
/* relative color syntax */
:root {
  --color: red;
  --color-light: rgb(from var(--color) calc(r + 100) g b);
}

颜色修改函数

/* 使用 CSS 自定义属性实现颜色变体 */
:root {
  --primary: #3498db;
  --primary-light: color-mix(in srgb, var(--primary), white 20%);
  --primary-dark: color-mix(in srgb, var(--primary), black 20%);
}

实际应用场景

主题颜色生成

/* 使用 HSL 生成色调系列 */
:root {
  --hue-primary: 200;
  --primary-50: hsl(var(--hue-primary), 95%, 95%);
  --primary-100: hsl(var(--hue-primary), 90%, 90%);
  --primary-200: hsl(var(--hue-primary), 80%, 80%);
  --primary-300: hsl(var(--hue-primary), 70%, 70%);
  --primary-400: hsl(var(--hue-primary), 60%, 60%);
  --primary-500: hsl(var(--hue-primary), 50%, 50%);
  --primary-600: hsl(var(--hue-primary), 45%, 45%);
  --primary-700: hsl(var(--hue-primary), 40%, 40%);
  --primary-800: hsl(var(--hue-primary), 35%, 35%);
  --primary-900: hsl(var(--hue-primary), 30%, 30%);
}

颜色对比度检查

// 计算相对亮度
function getLuminance(r, g, b) {
  const [rs, gs, bs] = [r, g, b].map(c => {
    c = c / 255;
    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
  });
  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
}
// 计算对比度
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);
}
// WCAG AA 标准要求 4.5:1

JavaScript 动态颜色处理

// 使用第三方库处理
import tinycolor from 'tinycolor2';
// 创建颜色
const color = tinycolor('red');
// 检查颜色是否有效
tinycolor('not a color').isValid()  // false
// 获取补色
color.complement().toHexString()    // 补色
// 获取类似色
color.analogous().map(c => c.toHexString())
// 获取单色系
color.monochromatic().map(c => c.toHexString())
// 调整亮度
color.lighten(20).toHexString()     // 变亮20%
color.darken(20).toHexString()      // 变暗20%
// 调整饱和度
color.saturate(20).toHexString()    // 增加饱和度
color.desaturate(20).toHexString()  // 降低饱和度