typescript 实现sRGBA色值进制转换

以下是 TypeScript 实现 sRGBA 色值进制转换的示例代码：

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})`;
  }
}

使用示例：

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)"