前端调色时RGB与Hex互转代码如何实现？

Question

在前端开发中，RGB与Hex颜色格式互转是一个常见需求。如何实现这两种格式的相互转换？以下是常见的技术问题：当将RGB转为Hex时，若单通道值小于16（如RGB(0, 9, 255)中的绿色值9），未进行补零处理会导致生成的Hex颜色值不完整。而Hex转RGB时，需注意输入字符串是否带有“#”号以及长度是否为3或6位。如果长度为3，需要扩展为6位才能正确解析。此外，开发者还需考虑输入校验，避免非法字符或越界数值引发错误。解决这些问题的关键在于合理使用JavaScript内置函数如`toString(16)`和`parseInt()`，并结合条件判断与字符串操作方法完成精准转换。

Answer 1

1. RGB与Hex颜色格式互转的基本概念

在前端开发中，RGB和Hex是两种常见的颜色表示方式。RGB使用红、绿、蓝三个通道的数值来定义颜色，而Hex则用十六进制字符串表示颜色。两者之间的转换是日常工作中常见的需求。

• RGB格式：由三个0到255之间的整数组成，如RGB(255, 0, 0)。
• Hex格式：以“#”开头，后接6位或3位十六进制字符，如#FF0000。

例如，RGB(255, 0, 0)对应的Hex值为#FF0000。但在实际转换过程中，存在一些需要注意的技术问题。

2. 常见技术问题分析

在实现RGB与Hex颜色格式互转时，开发者可能会遇到以下问题：

1. RGB转Hex时的补零问题：当单个RGB通道值小于16时，直接转换为十六进制会导致结果不完整。例如，RGB(0, 9, 255)中的绿色值9会转换为"9"而非"09"。
2. Hex转RGB时的输入校验：需要检查输入是否带有“#”，长度是否为3或6位，以及字符是否合法（仅包含0-9和A-F）。
3. 三字符Hex扩展问题：如果Hex值为3位（如#F00），需要将其扩展为6位（如#FF0000）才能正确解析。

以下是针对这些问题的具体解决方案。

3. 解决方案：JavaScript实现RGB与Hex互转

通过合理使用JavaScript内置函数`toString(16)`和`parseInt()`，结合条件判断与字符串操作方法，可以完成精准转换。

    // RGB转Hex
    function rgbToHex(r, g, b) {
        return `#${[r, g, b].map(x => x.toString(16).padStart(2, '0')).join('')}`;
    }

    // Hex转RGB
    function hexToRgb(hex) {
        if (hex.startsWith('#')) hex = hex.slice(1);
        if (hex.length === 3) hex = hex.split('').map(x => x + x).join('');
        const num = parseInt(hex, 16);
        return {
            r: (num >> 16) & 255,
            g: (num >> 8) & 255,
            b: num & 255
        };
    }
    

上述代码中，`padStart(2, '0')`用于解决补零问题，而`hex.split('').map(x => x + x).join('')`则实现了3位Hex向6位Hex的扩展。

4. 流程图：RGB与Hex转换逻辑

graph TD;
            A[开始] --> B{是RGB转Hex};
            B --是--> C{每个通道值<16?};
            C --是--> D[补零];
            C --否--> E[生成Hex];
            B --否--> F{是Hex转RGB};
            F --是--> G{带#号?};
            G --是--> H[移除#号];
            G --否--> I{长度为3?};
            I --是--> J[扩展为6位];
            I --否--> K[解析为RGB];

流程图清晰地展示了RGB与Hex颜色格式互转的逻辑步骤，帮助开发者理解转换过程中的关键点。