color-interfaces

color-interfaces

Basic Usage

> const color = createColor();
> color.rgb.r = 200;
< 200

> color.hsl.toCss()
< "hsl(0, 100%, 39%)"

> color.rgb.toCss()
< "rgb(200, 0, 0)"

> color.hex.toCss()
< "#c80000"

> createColor('rgb(22, 35, 234)').rgb.get()
< [22, 35, 234]

> createColor('rgba(22, 35, 234, 0.7)').rgba.get()
< [22, 35, 234, 0.7]

> createColor('hsl(310, 85%, 65%)').hsl.get()
< [310, 0.85, 0.65]

> createColor('hsla(310, 85%, 65%, 0.45)').hsl.get()
< [310, 0.85, 0.65]

> createColor('lime').rgb.get()
< [0, 255, 0]

Example

color tool

Interfaces

export interface Color {
  rgb: RGBInterface;
  rgba: RGBAInterface;
  hsl: HSLInterface;
  hsla: HSLAInterface;
  hsv: HSVInterface;
  hsva: HSVAInterface;
  hex: HexInterface;
  hexa: HexAInterface;
  alpha: number;
  getRed(): number;
  setRed(red: number): void;
  getGreen(): number;
  setGreen(green: number): void;
  getBlue(): number;
  setBlue(blue: number): void;
  getHue(): number;
  setHue(hue: number): void;
  getSaturation(): number;
  setSaturation(saturation: number): void;
  getLightness(): number;
  setLightness(lightness: number): void;
  getSaturationV(): number;
  setSaturationV(saturationV: number): void;
  getValue(): number;
  setValue(value: number): void;
  getContrastRatio(color2: Color): number;
  getGreyValue(): number;
  getLuminance(): number;
  invert(): this;
  parseCSSColor(input: string): void;
  copy: () => Color;
  mixWithColor(color: Color, percent: number): Color;
}

export interface RGBInterface {
  r: number;
  g: number;
  b: number;
  get: () => RGB;
  set: (rgb: RGB) => RGBInterface;
  toCss: () => string;
}

export interface RGBAInterface {
  r: number;
  g: number;
  b: number;
  a: number;
  get: () => RGBA;
  set: (rgba: RGBA) => RGBAInterface;
  toCss: () => string;
}

export interface HSLInterface {
  h: number;
  s: number;
  l: number;
  get: () => HSL;
  set: (hsv: HSL) => HSLInterface;
  toCss: () => string;
}

export interface HSLAInterface {
  h: number;
  s: number;
  l: number;
  a: number;
  get: () => HSLA;
  set: (hsva: HSLA) => HSLAInterface;
  toCss: () => string;
}

export interface HSVInterface {
  h: number;
  s: number;
  v: number;
  get: () => HSV;
  set: (hsv: HSV) => HSVInterface;
  toCss: () => string;
}

export interface HSVAInterface {
  h: number;
  s: number;
  v: number;
  a: number;
  get: () => HSVA;
  set: (hsv: HSVA) => HSVAInterface;
  toCss: () => string;
}

export interface HexInterface {
  get: () => HEX;
  set: (hex: HEX) => HexInterface;
  toCss: () => string;
}

export interface HexAInterface {
  a: number;
  get: () => HEXA;
  set: (hexa: HEXA) => HexAInterface;
  toCss: () => string;
}

export type RGB = [number, number, number];
export type RGBA = [number, number, number, number];
export type HSL = [number, number, number];
export type HSLA = [number, number, number, number];
export type HSV = [number, number, number];
export type HSVA = [number, number, number, number];
export type HEX = string;
export type HEXA = string;