将色号转为不同透明度

晓峰666

已于 2023-08-09 22:46:57 修改

阅读量444

点赞数

文章标签： javascript 开发语言 ecmascript

于 2023-08-09 22:44:55 首次发布

本文链接：https://blog.youkuaiyun.com/qq_44766377/article/details/132198994

版权

这篇文章介绍了如何使用JavaScript函数hexToRgb将十六进制颜色代码转换为带有透明度的RGB值，以便在项目中根据不同场景设置主题色的透明度，如设置CSS`--color-master-90`属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

export default function hexToRgb(hex: string, a = 1) {
    // Hex（十六进制）、Dec（十进制）、Octal（八进制）、Bin（二进制）
    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    if (result) {
        const colorObj = {
            r: parseInt(result[1], 16),
            g: parseInt(result[2], 16),
            b: parseInt(result[3], 16),
            a,
        };
        return `rgba(${colorObj.r},${colorObj.g},${colorObj.b},${colorObj.a})`;
    }
    return hex;
}

参数 #16d6ce(需要改变的色号) 1至0（0.8,0.9都可以结果色号是原色号的多少浓度）

适用场景：项目通过跳转链接得到项目的主题色此方法可以将主题色号处理为多种透明度的不同颜色配合主题使用

调用

document.documentElement.style.setProperty('--color-master-90', hexToRgb(`#${query.theme_color}`, 0.9));

将色号转为 不同透明度

将色号转为不同透明度