js实现的CSS color 十六进制与RGB值的转换

demo

;!function (str) {
            str.HEXtoRGB = function () {
                var col = this.slice(1).split('');
                if (/^[0-9A-Fa-f]{6}$/.test(col.join('')) || /^[0-9A-Fa-f]{3}$/.test(col.join(''))) {
                    (col.length === 3) && !function () {
                        for (i = -3; i < 0; i++) {
                            col.splice(i, 0, '' + col.slice(i)[0])
                        }
                    } ();
                    return "rgb(" + parseInt(col.slice(0, 2).join(''), 16) + "," + parseInt(col.slice(2, 4).join(''), 16) + "," + parseInt(col.slice(4, 6).join(''), 16) + ")";
                } else { return "rgb(0,0,0)" };
            };
            str.RGBtoHEX = function () {
                var col = this.toUpperCase();
                col = col.replace(/^RGB\((\d{1,3}?)\,(\d{1,3}?)\,(\d{1,3}?)\)$/, function (core, $1, $2, $3) {
                    var a = +$1, b = +$2, c = +$3, cache = "";
                    (a < 256 && b < 256 && c < 256) ? cache = '#' + a.toString(16) + b.toString(16) + c.toString(16) : cache = "#000";
                    return cache;
                })
                return col;
            }
        }(String.prototype)

    alert('#978'.HEXtoRGB().RGBtoHEX());

补充:
#fed到#ffeedd还有另一种转换方法:
https://jsfiddle.net/yujg/fo4ryt3d/

'#fed'.replace(/^#(\w)(\w)(\w)$/,'#$1$1$2$2$3$3')
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是 TypeScript 实现 sRGBA 色进制转换的示例代码: ```typescript class SrgbaColor { constructor(public r: number, public g: number, public b: number, public a: number) {} // 将 sRGBA 转换RGBA toRgba(): RgbaColor { const r = Math.round(this.r * this.a + 255 * (1 - this.a)); const g = Math.round(this.g * this.a + 255 * (1 - this.a)); const b = Math.round(this.b * this.a + 255 * (1 - this.a)); const a = this.a; return new RgbaColor(r, g, b, a); } // 将 sRGBA 转换十六进制字符串 toHexString(): string { const r = Math.round(this.r * this.a + 255 * (1 - this.a)); const g = Math.round(this.g * this.a + 255 * (1 - this.a)); const b = Math.round(this.b * this.a + 255 * (1 - this.a)); const a = Math.round(this.a * 255); const hexR = r.toString(16).padStart(2, '0'); const hexG = g.toString(16).padStart(2, '0'); const hexB = b.toString(16).padStart(2, '0'); const hexA = a.toString(16).padStart(2, '0'); return `#${hexR}${hexG}${hexB}${hexA}`; } // 将 sRGBA 转换CSS 格式的字符串 toCssString(): string { const r = Math.round(this.r * this.a + 255 * (1 - this.a)); const g = Math.round(this.g * this.a + 255 * (1 - this.a)); const b = Math.round(this.b * this.a + 255 * (1 - this.a)); const a = this.a; return `rgba(${r}, ${g}, ${b}, ${a})`; } } class RgbaColor { constructor(public r: number, public g: number, public b: number, public a: number) {} // 将 RGBA 转换为 sRGBA toSrgba(): SrgbaColor { const alpha = this.a; const r = this.r / 255; const g = this.g / 255; const b = this.b / 255; const max = Math.max(r, g, b); const min = Math.min(r, g, b); const chroma = max - min; let s = 0; if (chroma > 0) { s = chroma / max; } const v = max; const a = alpha; const l = (max + min) / 2; const gamma = 2.2; const lsrgb = l ** gamma; const vsrgb = v ** gamma; const m = (lsrgb + vsrgb) / 2; const msrgb = m ** (1 / gamma); let rSrgb = 0; let gSrgb = 0; let bSrgb = 0; if (chroma > 0) { const c = (vsrgb - lsrgb) / chroma; const h = (() => { if (r === max) { return (g - b) / chroma; } else if (g === max) { return 2 + (b - r) / chroma; } else { return 4 + (r - g) / chroma; } })(); const hDegrees = h * 60; const hRadians = (hDegrees * Math.PI) / 180; const x = chroma * (1 - Math.abs((h % 2) - 1)); if (hDegrees >= 0 && hDegrees < 60) { rSrgb = vsrgb; gSrgb = x + lsrgb; bSrgb = lsrgb; } else if (hDegrees >= 60 && hDegrees < 120) { rSrgb = x + lsrgb; gSrgb = vsrgb; bSrgb = lsrgb; } else if (hDegrees >= 120 && hDegrees < 180) { rSrgb = lsrgb; gSrgb = vsrgb; bSrgb = x + lsrgb; } else if (hDegrees >= 180 && hDegrees < 240) { rSrgb = lsrgb; gSrgb = x + lsrgb; bSrgb = vsrgb; } else if (hDegrees >= 240 && hDegrees < 300) { rSrgb = x + lsrgb; gSrgb = lsrgb; bSrgb = vsrgb; } else if (hDegrees >= 300 && hDegrees < 360) { rSrgb = vsrgb; gSrgb = lsrgb; bSrgb = x + lsrgb; } } else { rSrgb = v; gSrgb = v; bSrgb = v; } const r = rSrgb ** (1 / gamma); const g = gSrgb ** (1 / gamma); const b = bSrgb ** (1 / gamma); return new SrgbaColor(r, g, b, a); } // 将 RGBA 转换十六进制字符串 toHexString(): string { const hexR = this.r.toString(16).padStart(2, '0'); const hexG = this.g.toString(16).padStart(2, '0'); const hexB = this.b.toString(16).padStart(2, '0'); const hexA = Math.round(this.a * 255) .toString(16) .padStart(2, '0'); return `#${hexR}${hexG}${hexB}${hexA}`; } // 将 RGBA 转换CSS 格式的字符串 toCssString(): string { return `rgba(${this.r}, ${this.g}, ${this.b}, ${this.a})`; } } ``` 使用示例: ```typescript const srgba = new SrgbaColor(0.2, 0.3, 0.4, 0.5); const rgba = srgba.toRgba(); // RGBA {r: 77, g: 115, b: 153, a: 0.5} const hex = srgba.toHexString(); // "#4d739980" const css = srgba.toCssString(); // "rgba(77, 115, 153, 0.5)" ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值