123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464
import { fromLinear, toLinear } from "./util/linear.ts";
/** Standard illuminant D65 */export const STANDARD_ILLUMINANT = [0.950489, 1, 1.088840];
/** 6 / 29 */export const DELTA = 0.20689655172413793;export const DELTA_SQUARE = 0.04280618311533888;export const DELTA_CUBE = 0.008856451679035631;
/** 4 / 29 */export const DELTA_ADD = 0.13793103448275862;
export interface ColorData {  /** sRGB color space */  rgba: [number, number, number, number];  /** Hue, Chroma, Grayscale */  hcg: [number, number, number];  /** Hue, Saturation, Lightness */  hsl: [number, number, number];  /** Hue, Saturation, Value */  hsv: [number, number, number];  /** Cyan, Magenta, Yellow, Black */  cmyk: [number, number, number, number];  /** Hexadecimal representation of the color */  hex: string;  /** CIE 1931 XYZ color space */  xyz: [number, number, number];  lab: [number, number, number];}
/** General class for RGBA colors */export class Color {  /** Red value of color */  r: number;  /** Green value of color */  g: number;  /** Blue value of color */  b: number;  /** Alpha (opacity) of color */  a: number;  /** Construct a color from hex code */  constructor(hex: string);  /** Construct a color from hex number */  constructor(hex: number);  /** Construct a color from rgba values */  constructor(r: number, g: number, b: number, a?: number);  constructor(rOrHex: number | string, g?: number, b?: number, a = 255) {    let red = 0, green = 0, blue = 0, alpha = 255;    if (typeof rOrHex === "string") {      [red, green, blue, alpha] = rgbaFromHex(rOrHex);    } else if (      typeof rOrHex === "number" && typeof g === "undefined" &&      typeof b === "undefined"    ) {      const hex = rOrHex.toString(16);      [red, green, blue, alpha] = rgbaFromHex(`#${hex}`);    } else {      red = rOrHex || 0;      green = g || 0;      blue = b || 0;      alpha = a ?? 255;    }    this.r = red;    this.g = green;    this.b = blue;    this.a = alpha;  }  /** Get the average of all colors   * Can also be used instead of `grayscale` using   * ```ts   * const color = new Color(r, g, b, a);   * const avg = color.average;   * const grayscaleColor = new Color(avg, avg, avg, a);   * ```   */  get average() {    return Math.trunc((this.r + this.g + this.b) / 3);  }  /** Calculate chroma */  get chroma() {    return (this.max - this.min);  }  get cmyk(): [number, number, number, number] {    const r = this.r / 255;    const g = this.g / 255;    const b = this.b / 255;
    const k = 1 - Math.max(r, g, b);    const max = this.max;    return [      Math.round(((1 - r - k) / max) * 100),      Math.round(((1 - g - k) / max) * 100),      Math.round(((1 - b - k) / max) * 100),      Math.round(k * 100),    ];  }  /**   * Convert to grayscale using luminance   */  get grayscale(): Color {    // Can alternatively be done using    // this.lightness and this.average    const l = Math.trunc(fromLinear(this.luminance) * 255);    return new Color(l, l, l, this.a);  }  get hcg(): [number, number, number] {    const chroma = this.chroma;    return [      Math.round(this.hue),      chroma,      chroma < 1 ? this.min / (1 - chroma) : 0,    ];  }  get hex() {    return `#${Color.toHex(this.r)}${Color.toHex(this.g)}${      Color.toHex(this.b)    }${Color.toHex(this.a)}`;  }  /** Hue, Saturation, Lightness */  get hsl(): [number, number, number] {    const s = this.saturation;
    return [      Math.round(this.hue),      Math.trunc((s * 10000) / 100),      Math.trunc((this.lightness * 10000) / 100),    ];  }  /** Hue, Saturation, Value */  get hsv(): [number, number, number] {    const s = this.saturation;    const l = this.lightness;    const v = (l + (s * Math.min(l, 1 - l)));
    return [      Math.round(this.hue),      !v ? 0 : Math.round((2 * (1 - (l / v))) * 100),      Math.round(v * 100),    ];  }  /** Calculate hue using chroma */  get hue() {    const max = this.max;    const c = this.chroma;    // No color    if (!c) return 0;    const r = this.r / 255;    const g = this.g / 255;    const b = this.b / 255;    const hue =      (max === r        ? (g - b) / c        : max === g        ? ((b - r) / c) + 2        : ((r - g) / c) + 4);    if (hue < 0) return (hue * 60) + 360;    return hue * 60;  }  get invert() {    return new Color(255 - this.r, 255 - this.g, 255 - this.b, this.a);  }  /** CIE L*a*b color space */  get lab(): [number, number, number] {    const [x, y, z] = this.xyz;
    const xxn = labF(x / STANDARD_ILLUMINANT[0]);    const yyn = labF(y / STANDARD_ILLUMINANT[1]);    const zzn = labF(z / STANDARD_ILLUMINANT[2]);
    return [      (116 * yyn) - 16,      500 * (xxn - yyn),      200 * (yyn - zzn),    ];  }  /**   * Get lightness of image. Can also be used instead of `grayscale` using   * ```ts   * const color = new Color(r, g, b, a);   * const l = color.lightness * 255;   * const grayscaleColor = new Color(l, l, l, a);   * ```   */  get lightness() {    return ((this.max + this.min) / 2);  }  /** Get linear rgb values */  get linearRgb() {    return [      toLinear(this.r / 255),      toLinear(this.g / 255),      toLinear(this.b / 255),    ];  }  /** Calculate luminance */  get luminance(): number {    const [r, g, b] = this.linearRgb;    return (r * 0.2126) + (g * 0.7152) + (b * 0.0722);    // the below can also be used    // return Math.sqrt((0.299 * r * r) + (0.587 * g * g) + (0.114 * b * b));  }  /** Get maximum of r, g, b */  get max(): number {    return Math.max(this.r, this.g, this.b) / 255;  }  /** Get minimum of r, g, b */  get min(): number {    return Math.min(this.r, this.g, this.b) / 255;  }  /** Get perceived lightness */  get perceivedLightness(): number {    const lum = this.luminance;    if (lum <= (216 / 24389)) {      return lum * (24389 / 27);    }
    return Math.pow(lum, 1 / 3) * 116 - 16;  }  /** Get saturation */  get saturation() {    const c = this.chroma;    const l = this.lightness;    // No color    if (!c) return 0;    return (this.max - l) / Math.min(l, 1 - l);  }  /** CIE 1931 XYZ */  get xyz(): [number, number, number] {    const [r, g, b] = this.linearRgb;
    const x = (0.4124 * r) + (0.3576 * g) + (0.1805 * b);    const y = (0.2126 * r) + (0.7152 * g) + (0.0722 * b);    const z = (0.0193 * r) + (0.1192 * g) + (0.9505 * b);    return [x, y, z];  }  /*  xyz is a very bad idea
  brighten(amt: number): Color {    let [x, y, z] = this.xyz;    y += y * amt;    if(y > 1) y = 1    if(y < 0) y = 0    const [r, g, b] = rgbFromXyz(x, y, z)    return new Color(      Math.round(fromLinear(r) * 255),      Math.round(fromLinear(g) * 255),      Math.round(fromLinear(b) * 255),      this.a,    );  }  */  /** Get contrast ratio  */  contrast(that: Color): number {    const l1 = this.luminance;    const l2 = that.luminance;    return l1 > l2 ? (l1 + 0.5) / (l2 + 0.5) : (l2 + 0.5) / (l1 + 0.5);  }  /** Get a detailed conversion of the color. */  toJSON(): ColorData {    return {      rgba: [this.r, this.g, this.b, this.a],      hcg: this.hcg,      hsl: this.hsl,      hsv: this.hsv,      cmyk: this.cmyk,      hex: this.a === 255 ? this.hex.slice(0, 7) : this.hex,      xyz: this.xyz,      lab: this.lab,    };  }
  toString(): string {    return `rgba(${this.r},${this.g},${this.b},${this.a / 255})`;  }  static fromCmyk(c: number, m: number, y: number, k: number): Color {    const divi = (1 - (k / 100));    return new Color(      255 * (1 - (c / 100)) * divi,      255 * (1 - (m / 100)) * divi,      255 * (1 - (y / 100)) * divi,    );  }  static fromHex(hex: string): Color {    const [red, green, blue, alpha] = rgbaFromHex(hex);    return new Color(red, green, blue, alpha);  }  static fromHsl(h: number, s: number, l: number): Color {    l = l / 100;    s = s / 100;    const chroma = (1 - Math.abs((2 * l) - 1)) * s;    const h1 = h / 60;    const m = l - (chroma / 2);
    const x = chroma * (1 - Math.abs((h1 % 2) - 1));
    let intermediate = [0, 0, 0];
    if (0 <= h1 && h1 < 1) intermediate = [chroma, x, 0];    else if (1 <= h1 && h1 < 2) intermediate = [x, chroma, 0];    else if (2 <= h1 && h1 < 3) intermediate = [0, chroma, x];    else if (3 <= h1 && h1 < 4) intermediate = [0, x, chroma];    else if (4 <= h1 && h1 < 5) intermediate = [x, 0, chroma];    else if (5 <= h1 && h1 < 6) intermediate = [chroma, 0, x];
    const rgb = [intermediate[0] + m, intermediate[1] + m, intermediate[2] + m];
    return new Color(      Math.round(rgb[0] * 255),      Math.round(rgb[1] * 255),      Math.round(rgb[2] * 255),    );  }  static fromHsv(h: number, s: number, v: number): Color {    s = s / 100;    v = v / 100;    const chroma = v * s;    const h1 = h / 60;    const m = v - chroma;
    const x = chroma * (1 - Math.abs((h1 % 2) - 1));
    let intermediate = [0, 0, 0];
    if (0 <= h1 && h1 < 1) intermediate = [chroma, x, 0];    else if (1 <= h1 && h1 < 2) intermediate = [x, chroma, 0];    else if (2 <= h1 && h1 < 3) intermediate = [0, chroma, x];    else if (3 <= h1 && h1 < 4) intermediate = [0, x, chroma];    else if (4 <= h1 && h1 < 5) intermediate = [x, 0, chroma];    else if (5 <= h1 && h1 < 6) intermediate = [chroma, 0, x];
    const rgb = [intermediate[0] + m, intermediate[1] + m, intermediate[2] + m];
    return new Color(      Math.round(rgb[0] * 255),      Math.round(rgb[1] * 255),      Math.round(rgb[2] * 255),    );  }  static fromLab(l: number, a: number, b: number): Color {    const [x, y, z] = xyzFromLab(l, a, b);    return Color.fromXyz(x, y, z);  }  /** Redundant static method for conversion from sRGB color space */  static fromRgba(r: number, g: number, b: number): Color;  static fromRgba(r: number, g: number, b: number, a = 255): Color {    return new Color(r, g, b, a);  }  /** Convert from CIE XYZ color space */  static fromXyz(x: number, y: number, z: number): Color {    const [r, g, b] = rgbFromXyz(x, y, z).map((x) =>      Math.round(fromLinear(x) * 255)    ).map((x) => x < 0 ? 0 : x > 255 ? 255 : x);    return new Color(      r,      g,      b,    );  }  static toHex(n: number): string {    return `${(n | 1 << 8).toString(16).slice(1)}`;  }}
/** Calculate mean distance between two colors */export function meanDistance(from: Color, to: Color): number {  return (    (      Math.abs(from.r - to.r) +      Math.abs(from.g - to.g) +      Math.abs(from.b - to.b) +      Math.abs(from.a - to.a)    ) / 255  ) / 4;}
/** t = C / Cn ratio */function labF(t: number): number {  if (t > DELTA_CUBE) return Math.cbrt(t);  return (t / (3 * DELTA_SQUARE)) + DELTA_ADD;}
/** Inverse lab function */function inverseLabF(t: number): number {  if (t > DELTA_CUBE) return Math.pow(t, 3);  return (3 * DELTA_SQUARE) * (t - DELTA_ADD);}
function rgbaFromHex(hex: string): [number, number, number, number] {  if (!/^#([A-Fa-f0-9]{3}){1,2}([A-Fa-f0-9]{2})?$/.test(hex)) {    throw new TypeError(`Expected number or hex code. Got ${hex}`);  }  let colors = hex.slice(1).split("");  if (colors.length === 3) {    colors = [      colors[0],      colors[0],      colors[1],      colors[1],      colors[2],      colors[2],    ];  }  // Convert hexadecimal to decimal  const red = parseInt(`${colors[0]}${colors[1]}`, 16) || 0;  const green = parseInt(`${colors[2]}${colors[3]}`, 16) || 0;  const blue = parseInt(`${colors[4]}${colors[5]}`, 16) || 0;  let alpha = 255;  if (colors[6] && colors[7]) {    alpha = parseInt(`${colors[6]}${colors[7]}`, 16) ?? 255;  }  return [red, green, blue, alpha];}
/** Convert CIE XYZ to Linear RGB color space */export function rgbFromXyz(  x: number,  y: number,  z: number,): [number, number, number] {  return [    (3.2406 * x) + (-1.5372 * y) + (-0.4986 * z),    (-0.9689 * x) + (1.8758 * y) + (0.0415 * z),    (0.0557 * x) + (-0.2040 * y) + (1.0570 * z),  ];}
export function xyzFromLab(  l: number,  a: number,  b: number,): [number, number, number] {  const add = (l + 16) / 116;  const x = STANDARD_ILLUMINANT[0] * inverseLabF(add + (a / 500));  const y = STANDARD_ILLUMINANT[1] * inverseLabF(add);  const z = STANDARD_ILLUMINANT[2] * inverseLabF(add - (b / 200));
  return [x, y, z];}
/** * Find the nearest neighbour of a color in a palette * It would be more accurate to use consider luminance * along with Euclidean distance but I chose to stay with * distance for performance. */export function findClosestColor(color: Color, palette: Color[]): Color {  const closest = {    dist: Infinity,    i: 0,  };  let i = 0;  while (i < palette.length) {    const m = meanDistance(color, palette[i]);    if (m < closest.dist) {      closest.dist = m;      closest.i = i;    }    i += 1;  }  return palette[closest.i];}