js实现颜色
颜色表示方法
在JavaScript中，颜色可以通过多种方式表示，包括十六进制、RGB、RGBA、HSL和HSLA格式。每种格式适用于不同场景，选择合适的方式取决于具体需求。
十六进制格式以#开头，后跟6位或3位十六进制数字。例如#FF0000表示红色，#F00是其简写形式。
RGB格式使用rgb(red, green, blue)函数，参数为0-255的整数。rgb(255, 0, 0)同样表示红色。
RGBA在RGB基础上增加透明度通道，范围0-1。rgba(255, 0, 0, 0.5)表示半透明红色。
HSL格式使用hsl(hue, saturation, lightness)，色相为0-360角度，饱和度和明度为百分比。hsl(0, 100%, 50%)对应红色。
HSLA类似RGBA，增加透明度参数。hsla(0, 100%, 50%, 0.5)是半透明红色。
颜色转换函数
实现颜色格式间的转换能提高开发灵活性。以下函数展示十六进制到RGB的转换：
function hexToRgb(hex) {
hex = hex.replace(/^#/, '');
const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);
return `rgb(${r}, ${g}, ${b})`;
}RGB到十六进制的转换示例：
function rgbToHex(r, g, b) {
return `#${[r, g, b].map(x => x.toString(16).padStart(2, '0')).join('')}`;
}颜色操作与处理
调整颜色明暗可通过HSL模型实现。以下函数演示颜色变亮效果：
function lightenColor(hsl, percent) {
const [h, s, l] = hsl.match(/\d+/g).map(Number);
const newLightness = Math.min(100, l + percent);
return `hsl(${h}, ${s}%, ${newLightness}%)`;
}生成随机颜色在数据可视化中很有用：
function getRandomColor() {
return `#${Math.floor(Math.random()*16777215).toString(16)}`;
}浏览器API应用
现代浏览器提供颜色相关API。CanvasRenderingContext2D的fillStyle和strokeStyle属性接受各种颜色格式：
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
ctx.fillRect(10, 10, 100, 100);CSSOM允许动态修改样式：
element.style.backgroundColor = 'hsl(120, 100%, 50%)';颜色库推荐
对于复杂项目，颜色处理库能提供更多功能：
- chroma.js：提供颜色转换、插值和缩放功能
- tinycolor：轻量级颜色操作和转换工具
- color：支持多种颜色空间转换
这些库通常包含颜色解析、格式验证、对比度计算等高级功能，适合专业级应用开发。
