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)' ) . hsla . get ( )
< [ 310 , 0.85 , 0.65 , 0.45 ]
> 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;