16进制与rgb

梅花三

已于 2022-10-12 09:53:44 修改

阅读量132

点赞数

分类专栏： javascript 文章标签： javascript

于 2021-10-10 17:32:30 首次发布

本文链接：https://blog.csdn.net/weixin_43794073/article/details/120689224

版权

javascript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

生成随机16进制

const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`

16进制转rgb

function hexToRGB(hex) {
    if(typeof hex != 'string' || hex.slice(0, 1) != '#') {
        return hex
    }
    const len = color.length
    if(len != 3 && len != 6) {
        return hex
    }
    let color = hex.slice(1)
    if(color.length == 3) {
        const temp = color[0] + color[0] + color[1] + color[1] + color[2] + color[2]
        color = temp
    }
    if(/^[0-9a-fA-F]{6}$/.test(color)) {
        const rgb = `rgb(${parseInt(color.substr(0, 2), 16)}, ${parseInt(color.substr(2, 2), 16)}, ${parseInt(color.substr(4, 2), 16)})`
        return rgb
    }
    return hex
}

rgb转16进制

const rgbToHex = (r, g, b) =>  {
    const checkRGB = x => {
        let y = Number(x)
        y = (y??0) < 0 ? 0 : (y > 255 ? 255 : y)
        return y
    }
    // 方式一
    // return `#${checkRGB(r) .toString(16)}${checkRGB(g) .toString(16)}${checkRGB(b) .toString(16)}`
    
    // 方式二
    return "#" + ((1 << 24) + (checkRGB(r) << 16) + (checkRGB(g) << 8) + checkRGB(b)).toString(16).slice(1)
};