js 颜色十六进制转换器

在JavaScript中，将颜色从十六进制（Hex）格式转换为RGB或其他格式，或者反过来转换，是常见的需求。以下是一些基础概念、优势、类型、应用场景，以及如何实现这些转换的方法。

基础概念

十六进制颜色代码是一种表示颜色的方式，通常由一个井号（#）后跟六个数字或字母组成，例如#FF5733。这六个字符分别代表红色、绿色和蓝色的强度，每两个字符代表一个颜色通道，范围从00（最低强度）到FF（最高强度）。

优势

简洁性：十六进制颜色代码比RGB或RGBA格式更短，更易于书写和记忆。
兼容性：几乎所有浏览器和系统都支持十六进制颜色代码。
直观性：通过颜色代码可以直接看出颜色的大致组成。

类型

标准十六进制：#RRGGBB
简写形式：#RGB（仅当R、G、B的值相同时使用，例如#F53等同于#FF5533）

应用场景

网页设计：在CSS中设置元素的颜色。
图形设计：在设计软件中指定颜色。
数据可视化：在图表或图形中使用特定的颜色编码。

实现转换的方法

十六进制转RGB

function hexToRgb(hex) {
    // 移除可能的#
    hex = hex.replace(/^#/, '');
    
    // 支持简写形式
    if (hex.length === 3) {
        hex = hex.split('').map(char => char + char).join('');
    }
    
    const bigint = parseInt(hex, 16);
    const r = (bigint >> 16) & 255;
    const g = (bigint >> 8) & 255;
    const b = bigint & 255;
    
    return { r, g, b };
}

// 使用示例
console.log(hexToRgb('#FF5733')); // { r: 255, g: 87, b: 51 }

RGB转十六进制

function rgbToHex(r, g, b) {
    // 确保每个颜色通道的值在0-255之间
    [r, g, b] = [r, g, b].map(channel => {
        const value = channel.toString(16);
        return value.length === 1 ? '0' + value : value;
    });
    
    return `#${r}${g}${b}`;
}

// 使用示例
console.log(rgbToHex(255, 87, 51)); // #FF5733