Colors #

individual package can be found here @riadh-adrani/color-utils.

Types #

ColorTypes #

type ColorType = 'hex' | 'hsl' | 'rgb';

Palette #

type Palette = {
  10: string;
  20: string;
  30: string;
  40: string;
  50: string;
  60: string;
  70: string;
  80: string;
  90: string;
  95: string;
  99: string;
  100: string;
};

getColorType() #

resolve the correct type of the color.

function getColorType(color: string): ColorTypes | 'unknown';

• color : target color.

hsla() #

create an hsla color form.

function hsla(h: number, s: number, l: number, a?: number): string;

• h : hue.
• s : saturation.
• l : lightness.
• a : alpha, by default set to 1.

throws when h is not between 0..360

throws when s is not between 0..100

throws when l is not between 0..100

throws when a is not between 0..1

rgba() #

create an rgba color form.

function rgba(r: number, g: number, b: number, a?: number): string;

• r : red.
• g : green.
• b : blue.
• a : alpha, by default set to 1.

throws when r is not between 0..255

throws when g is not between 0..255

throws when b is not between 0..255

throws when a is not between 0..1

isRgbForm() #

checks if the given color is of an rgb form.

note that red, green and blue values are not checked.

function isRgbForm(color: string): boolean;

• color : target color.

isRgbaForm() #

checks if the given color is of an rgba form.

note that red, blue, green and alpha values are not checked.

function isRgbaForm(color: string): boolean;

• color : target color.

extractDataFromRGB() #

extract data from an rgb/a color.

function extractDataFromRGB(color: string): number[];

• color : target color.

throws if the type of the color is not rgb/a

isRgbColor() #

checks if the given string is a rgb/a color.

function isRgbColor(color: string): boolean;

• color : target color.

isHexColor() #

Checks if the given string is a hex color.

function isHexColor(color: string): boolean;

• color : target color.

isHslForm() #

checks if the given color is of an hsl form.

note that hue, saturation, lightness values are not checked.

function isHslForm(color: string): boolean;

• color : target color.

isHslaForm() #

checks if the given color is of an hsla form.

note that hue, saturation, lightness and alpha values are not checked.

function isHslaForm(color: string): boolean;

• color : target color.

extractDataFromHSL() #

extract data from an hsl/a color.

function extractDataFromHSL(color: string): number[];

• color : target color.

throws if the type of the color is not hsl/a

isHslColor() #

checks if the given string is a hsl/a color.

function isHslColor(color: string): boolean;

• color : target color.

hslToRgb() #

convert HSL color to RGB

function hslToRgb(h: number, s: number, l: number): [number, number, number];

• h : hue.
• s : saturation.
• l : lightness.

rgbToHsl() #

convert RGB color to HSL

function rgbToHsl(r: number, g: number, b: number): [number, number, number];

• r : red.
• g : green.
• b : blue.

rgbToHex() #

convert RGB color to HEX.

function rgbToHsl(r: number, g: number, b: number): string;

• r : red.
• g : green.
• b : blue.

convertColor() #

convert a color to a given type.

if the type of the source color is not identifiable, the function will return it as it is.

function convertColor(color: string, to: ColorTypes): string;

• color : color as string.
• to : resulting color type.

generateContrastSafeColor() #

generates a contrasting color to the source.

function generateContrastSafeColor(color: string, light?: string, dark?: string): string;

• color : color as string.
• light : returned color if the given color is dark. #fff by default.
• dark : returned color if the given color is dark. #000 by default.

throws when color type is non-identifiable.

generateComplementaryColor() #

generates a contrasting color to the source.

function generateComplementaryColor(color: string, to?: ColorTypes): string;

• color : color as string.
• to : resulting color type.

throws when color type is non-identifiable.

generateColorTonalPalette() #

generates a tonal palette object according to the material specification.

function generateComplementaryColor(color: string, to?: ColorTypes): Palette;

• color : color as string.
• to : resulting colors type.

throws when color type is non-identifiable.

changeColorOpacity() #

create a new color with changed opacity.

function changeColorOpacity(color: string, opacity: number, to?: ColorTypes): string;

• color : color as string.
• opacity : opacity value between 0 and 1.
• to : resulting colors type. hex by default.

throws when color type is non-identifiable.

throws an error when opacity is not between 0 and 1.