本文目录导读：
我来为您全面介绍颜色值的转换与使用方法。
常见颜色格式
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() // 降低饱和度
最佳实践
-
使用语义化颜色变量
- 避免硬编码颜色值
- 使用 CSS 自定义属性管理颜色
-
考虑无障碍性
- 确保足够的颜色对比度
- 不要仅依赖颜色传递信息
-
颜色模式选择
- HEX：适合静态颜色定义
- HSL：适合动态颜色计算
- RGBA：需要透明度控制时使用
-
性能优化
- 减少不必要的颜色转换
- 使用浏览器原生颜色函数提升性能
这些是颜色值转换与使用的主要方法,您可以根据具体需求选择合适的方案。
