matisse

interface ColourAttributes { red: number; green: number; blue: number; hue: number; saturationv: number; value: number; cyan: number; magenta: number; yellow: number; saturationl: number; light: number; white: number; black: number; alpha: number; } /** * An abstract data type representating mutable colour entities for RGB, HSV, HSL, CMYK, and HWB colour models. * @class Colour */ export default class Colour { #private; attributes: ColourAttributes; /** * @type {number} * @default 255 * @constant */ static get redMax(): number; /** * @type {number} * @default 0 * @constant */ static get redMin(): number; /** * @type {number} * @default 255 * @constant */ static get greenMax(): number; /** * @type {number} * @default 0 * @constant */ static get greenMin(): number; /** * @type {number} * @default 255 * @constant */ static get blueMax(): number; /** * @type {number} * @default 0 * @constant */ static get blueMin(): number; /** * @type {number} * @default 360 * @constant */ static get hueMax(): number; /** * @type {number} * @default 0 * @constant */ static get hueMin(): number; /** * @type {number} * @default 1.00 * @constant */ static get saturationvMax(): number; /** * @type {number} * @default 0.00 * @constant */ static get saturationvMin(): number; /** * @type {number} * @default 1.00 * @constant */ static get valueMax(): number; /** * @type {number} * @default 0.00 * @constant */ static get valueMin(): number; /** * @type {number} * @default 1.00 * @constant */ static get cyanMax(): number; /** * @type {number} * @default 0.00 * @constant */ static get cyanMin(): number; /** * @type {number} * @default 1.00 * @constant */ static get magentaMax(): number; /** * @type {number} * @default 0.00 * @constant */ static get magentaMin(): number; /** * @type {number} * @default 1.00 * @constant */ static get yellowMax(): number; /** * @type {number} * @default 0.00 * @constant */ static get yellowMin(): number; /** * @type {number} * @default 1.00 * @constant */ static get saturationlMax(): number; /** * @type {number} * @default 0.00 * @constant */ static get saturationlMin(): number; /** * @type {number} * @default 1.00 * @constant */ static get lightMax(): number; /** * @type {number} * @default 0.00 * @constant */ static get lightMin(): number; /** * @type {number} * @default 1.00 * @constant */ static get whiteMax(): number; /** * @type {number} * @default 0.00 * @constant */ static get whiteMin(): number; /** * @type {number} * @default 1.00 * @constant */ static get blackMax(): number; /** * @type {number} * @default 0.00 * @constant */ static get blackMin(): number; /** * @type {number} * @default 1.00 * @constant */ static get alphaMax(): number; /** * @type {number} * @default 0.00 * @constant */ static get alphaMin(): number; /** * Initialize a new Colour instance given a valid CSS colour string or HEX code. * @param {string} [colourString] - A valid CSS colour string or HEX code to parse. * @returns {Colour} A new Colour instance generated from the CSS colour string. * @see [color-string](https://github.com/Qix-/color-string) handles all parsing of CSS colour strings. */ constructor(colourString?: string); /** * Initialize a new Colour instance from RGB colour attributes. * @param {number} red - The value of the R channel [0, 255]. * @param {number} green - The value of the G channel [0, 255]. * @param {number} blue - The value of the B channel [0, 255]. * @param {number} [alpha=1.00] - The percentage of transparency or opacity channel [0, 1]. Defaults to {@link Colour.alphaMax}. * @returns {Colour} A new Colour instance generated from the RGB colour attributes. */ static RGB(red: number, green: number, blue: number, alpha?: number): Colour; /** * Initialize a new Colour instance from HSV colour attributes. * @param {number} hue - The value of the H channel [0, 360]. * @param {number} saturationv - The percentage of the S channel [0, 1]. * @param {number} value - The percentage of the V channel [0, 1]. * @param {number} [alpha=1.00] - The percentage of transparency or opacity channel [0, 1]. Defaults to {@link Colour.alphaMax}. * @returns {Colour} A new Colour instance generated from the HSV colour attributes. */ static HSV(hue: number, saturationv: number, value: number, alpha?: number): Colour; /** * Initialize a new Colour instance from CMYK colour attributes. * @param {number} cyan - The value of the C channel [0, 1]. * @param {number} magenta - The value of the M channel [0, 1]. * @param {number} yellow - The value of the Y channel [0, 1]. * @param {number} black - The value of the K channel [0, 1]. * @param {number} [alpha=1.00] - The percentage of transparency or opacity channel [0, 1]. Defaults to {@link Colour.alphaMax}. * @returns {Colour} A new Colour instance generated from the CMYK colour attributes. */ static CMYK(cyan: number, magenta: number, yellow: number, black: number, alpha?: number): Colour; /** * Initialize a new Colour instance from HSL colour attributes. * @param {number} hue - The value of the H channel [0, 360]. * @param {number} saturationl - The value of the S channel [0, 1]. * @param {number} light - The value of the L channel [0, 1]. * @param {number} [alpha=1.00] - The percentage of transparency or opacity channel [0, 1]. Defaults to {@link Colour.alphaMax}. * @returns {Colour} A new Colour instance generated from the HSL colour attributes. */ static HSL(hue: number, saturationl: number, light: number, alpha?: number): Colour; /** * Initialize a new Colour instance from HWB colour attributes. * @param {number} hue - The value of the H channel [0, 360]. * @param {number} white - The value of the W channel [0, 1]. * @param {number} black - The value of the B channel [0, 1]. * @param {number} [alpha=1.00] - The percentage of transparency or opacity channel [0, 1]. Defaults to {@link Colour.alphaMax}. * @returns {Colour} A new Colour instance generated from the HWB colour attributes. */ static HWB(hue: number, white: number, black: number, alpha?: number): Colour; /** @type {number} */ get red(): number; set red(newRed: number); /** @type {number} */ get green(): number; set green(newGreen: number); /** @type {number} */ get blue(): number; set blue(newBlue: number); /** @type {number} */ get hue(): number; set hue(newHue: number); /** @type {number} */ get saturationv(): number; set saturationv(newSaturationv: number); /** @type {number} */ get value(): number; set value(newValue: number); /** @type {number} */ get cyan(): number; set cyan(newCyan: number); /** @type {number} */ get magenta(): number; set magenta(newMagenta: number); /** @type {number} */ get yellow(): number; set yellow(newYellow: number); /** @type {number} */ get saturationl(): number; set saturationl(newSaturationl: number); /** @type {number} */ get light(): number; set light(newLight: number); /** @type {number} */ get white(): number; set white(newWhite: number); /** @type {number} */ get black(): number; set black(newBlack: number); /** @type {number} */ get alpha(): number; set alpha(newAlpha: number); /** * Check if another Colour instance is equivalent. * @param {Colour} colour - Another Colour instance to compare equality with. * @returns {boolean} True if both colours have the same red, green, blue, and alpha values. */ equals(colour: Colour): boolean; /** * Returns a copy of the Colour instance. * @returns {Colour} An identical Colour object. */ copy(): Colour; /** * Return a valid hexadecimal colour code that represents the colour. * @returns {string} A HEX code representing the colour. */ toHEX(): string; } /** * Determine the inverse colour or the colour on the opposite side of the colour wheel. * @param {Colour} colour - The colour to invert. * @returns {Colour} The colour resulting from the negation. */ export declare function negate(colour: Colour): Colour; /** * Rotate a given colour a certain number of degrees in 3-dimensional space. * @param {Colour} colour - The colour to rotate. * @param {number} degrees - The number of degrees to rotate the colour. * @returns {Colour} The colour resulting from the rotation. */ export declare function rotate(colour: Colour, degrees: number): Colour; /** * Determine the equivalent [grayscale colour of a given colour](https://www.tutorialspoint.com/dip/grayscale_to_rgb_conversion.htm). * @param {Colour} colour - The colour to grayscale. * @returns {Colour} The resulting colour from the grayscale transformation. */ export declare function grayscale(colour: Colour): Colour; /** * Calculate the [WCAG contrast ratio](http://www.w3.org/TR/WCAG20/#contrast-ratiodef) * between two colours. (Note: The order of the colours does not matter!). * @param {Colour} colour1 - The first colour to be compared. * @param {Colour} colour2 - The second colour to be compared. * @returns {number} The WCAG contrast ratio of the two colours (values ranging between 1 and 21). */ export declare function contrast(colour1: Colour, colour2: Colour): number; /** * Calculate the [colourfulness index](https://infoscience.epfl.ch/record/33994/files/HaslerS03.pdf) of a given colour as defined by Hasler and Süsstrunk (2003). * @param {Colour} colour - The colour to calculate colourfulness of. * @returns {number} The resulting colourfulness grading. */ export declare function colourfulness(colour: Colour): number; /** * Calculate the [temperature](https://ams.com/documents/20143/80162/TCS34xx_AN000517_1-00.pdf) of a given colour. * @param {Colour} colour - The colour to calculate temperature of. * @returns {number} The resulting temperature grading in degrees Kelvin (K). */ export declare function temperature(colour: Colour): number; /** * Calculate the [relative luminance](https://www.w3.org/WAI/GL/wiki/Relative_luminance) of a given colour as defined by the WCAG. * @param {Colour} colour - The colour to calculate luminence of. * @returns {number} The resulting luminence grading. */ export declare function luminosity(colour: Colour): number; /** * Evenly interpolate two colours and produce the resulting midpoint colour. * @param {Colour} colour1 - The first colour to include in the mix. * @param {Colour} colour2 - The second colour to include in the mix. * @param {number} percent - The percentage of the blend colour to mix. * @returns {Colour} The colour resulting from the mix. */ export declare function mix(colour1: Colour, colour2: Colour, percent: number): Colour; /** * Interpolate a given colour with white to create a tint. * @param {Colour} colour - A colour to tint. * @param {number} percent - The percentage of white to mix; setting 100% results in #FFFFFF. * @returns {Colour} The colour resulting from tinting the original colour. */ export declare function tint(colour: Colour, percent: number): Colour; /** * Interpolate a given colour with black to create a shade. * @param {Colour} colour - A colour to shade. * @param {number} percent - The percentage of black to mix; setting 100% results in #000000. * @returns {Colour} The colour resulting from shading the original colour. */ export declare function shade(colour: Colour, percent: number): Colour; /** * Interpolate a given colour with gray to create a tone. * @param {Colour} colour - A colour to tone. * @param {number} percent - The percentage of gray to mix; setting 100% results in #808080. * @returns {Colour} The colour resulting from toning the original colour. */ export declare function tone(colour: Colour, percent: number): Colour; /** * This is the blend mode which specifies no blending. The blending formula simply selects the blend colour. * @param {Colour} baseColour - The base colour being blended. * @param {Colour} blendColour - The colour being applied with the designated blend mode. * @returns {Colour} The colour resulting from the blend. */ export declare function normal(baseColour: Colour, blendColour: Colour): Colour; /** * Looks at the colour information in each channel and multiplies the base colour by the blend colour. The result colour is always a darker colour. Multiplying any colour with black produces black. Multiplying any colour with white leaves the colour unchanged. * @param {Colour} baseColour - The base colour being blended. * @param {Colour} blendColour - The colour being applied with the designated blend mode. * @returns {Colour} The colour resulting from the blend. */ export declare function multiply(baseColour: Colour, blendColour: Colour): Colour; /** * Looks at each channel’s colour information and multiplies the inverse of the blend and base colours. The result colour is always a lighter colour. Screening with black leaves the colour unchanged. Screening with white produces white. The effect is similar to projecting multiple photographic slides on top of each other. * @param {Colour} baseColour - The base colour being blended. * @param {Colour} blendColour - The colour being applied with the designated blend mode. * @returns {Colour} The colour resulting from the blend. */ export declare function screen(baseColour: Colour, blendColour: Colour): Colour; /** * Multiplies or screens the colours, depending on the base colour. The base colour is not replaced, but mixed with the blend colour to reflect the lightness or darkness of the original colour. * @param {Colour} baseColour - The base colour being blended. * @param {Colour} blendColour - The colour being applied with the designated blend mode. * @returns {Colour} The colour resulting from the blend. */ export declare function overlay(baseColour: Colour, blendColour: Colour): Colour; /** * Looks at the colour information in each channel and selects the base or blend colour—whichever is darker—as the result colour. * @param {Colour} baseColour - The base colour being blended. * @param {Colour} blendColour - The colour being applied with the designated blend mode. * @returns {Colour} The colour resulting from the blend. */ export declare function darken(baseColour: Colour, blendColour: Colour): Colour; /** * Looks at the colour information in each channel and selects the base or blend colour—whichever is lighter—as the result colour. * @param {Colour} baseColour - The base colour being blended. * @param {Colour} blendColour - The colour being applied with the designated blend mode. * @returns {Colour} The colour resulting from the blend. */ export declare function lighten(baseColour: Colour, blendColour: Colour): Colour; /** * Looks at the colour information in each channel and brightens the base colour to reflect the blend colour by decreasing contrast between the two. Blending with black produces no change. * @param {Colour} baseColour - The base colour being blended. * @param {Colour} blendColour - The colour being applied with the designated blend mode. * @returns {Colour} The colour resulting from the blend. */ export declare function colourDodge(baseColour: Colour, blendColour: Colour): Colour; /** * Looks at the colour information in each channel and darkens the base colour to reflect the blend colour by increasing the contrast between the two. Blending with white produces no change. * @param {Colour} baseColour - The base colour being blended. * @param {Colour} blendColour - The colour being applied with the designated blend mode. * @returns {Colour} The colour resulting from the blend. */ export declare function colourBurn(baseColour: Colour, blendColour: Colour): Colour; /** * Multiplies or screens the colours, depending on the blend colour. The effect is similar to shining a harsh spotlight on the colour. If the blend colour (light source) is lighter than 50% gray, the colour is lightened, as if it were screened. This is useful for adding highlights to an colour. If the blend colour is darker than 50% gray, the colour is darkened, as if it were multiplied. This is useful for adding shadows to an colour. Painting with pure black or white results in pure black or white. * @param {Colour} baseColour - The base colour being blended. * @param {Colour} blendColour - The colour being applied with the designated blend mode. * @returns {Colour} The colour resulting from the blend. */ export declare function hardLight(baseColour: Colour, blendColour: Colour): Colour; /** * Darkens or lightens the colours, depending on the blend colour. The effect is similar to shining a diffused spotlight on the colour. If the blend colour (light source) is lighter than 50% gray, the colour is lightened as if it were dodged. If the blend colour is darker than 50% gray, the colour is darkened as if it were burned in. Painting with pure black or white produces a distinctly darker or lighter area, but does not result in pure black or white. * @param {Colour} baseColour - The base colour being blended. * @param {Colour} blendColour - The colour being applied with the designated blend mode. * @returns {Colour} The colour resulting from the blend. */ export declare function softLight(baseColour: Colour, blendColour: Colour): Colour; /** * Looks at the colour information in each channel and subtracts either the blend colour from the base colour or the base colour from the blend colour, depending on which has the greater brightness value. Blending with white inverts the base colour values; blending with black produces no change. * @param {Colour} baseColour - The base colour being blended. * @param {Colour} blendColour - The colour being applied with the designated blend mode. * @returns {Colour} The colour resulting from the blend. */ export declare function difference(baseColour: Colour, blendColour: Colour): Colour; /** * Creates an effect similar to but lower in contrast than the Difference mode. Blending with white inverts the base colour values. Blending with black produces no change. * @param {Colour} baseColour - The base colour being blended. * @param {Colour} blendColour - The colour being applied with the designated blend mode. * @returns {Colour} The colour resulting from the blend. */ export declare function exclusion(baseColour: Colour, blendColour: Colour): Colour; /** * Generate a colour palette containing all shades of the provided colour. * @param {Colour} colour - The colour to generate shades for. * @param {number} num - The number of steps or intervals to produce colours for across the range of possible shades. * @returns {Colour[]} The resulting colour palette. */ export declare function shades(colour: Colour, num: number): Colour[]; /** * Generate a colour palette containing all tints of the provided colour. * @param {Colour} colour - The colour to generate tints for. * @param {number} num - The number of steps or intervals to produce colours for across the range of possible tints. * @returns {Colour[]} The resulting colour palette. */ export declare function tints(colour: Colour, num: number): Colour[]; /** * Generate a colour palette containing all tones of the provided colour. * @param {Colour} colour - The colour to generate tones for. * @param {number} num - The number of steps or intervals to produce colours for across the range of possible tones. * @returns {Colour[]} The resulting colour palette. */ export declare function tones(colour: Colour, num: number): Colour[]; /** * Generate a colour palette containing the analogous colours of the provided colour. Analogous colours are next to each other on the colour wheel. * @param {Colour} colour - The colour to generate a palette for. * @returns {Colour[]} The resulting colour palette. */ export declare function analogous(colour: Colour): Colour[]; /** * Generate a colour palette containing the complementary colours of the provided colour. Complementary colours are opposite on the colour wheel. * @param {Colour} colour - The colour to generate a palette for. * @returns {Colour[]} The resulting colour palette. */ export declare function complementary(colour: Colour): Colour[]; /** * Generate a colour palette containing the split complementary colours of the provided colour. Split complementary colours contain the two adjacent colours of the complement. * @param {Colour} colour - The colour to generate a palette for. * @returns {Colour[]} The resulting colour palette. */ export declare function splitComplementary(colour: Colour): Colour[]; /** * Generate a colour palette containing the triadic colours of the provided colour. Triadic colours a three equally spaced colours on the colour wheel. * @param {Colour} colour - The colour to generate a palette for. * @returns {Colour[]} The resulting colour palette. */ export declare function triadic(colour: Colour): Colour[]; /** * Generate a colour palette containing the tetradic colours of the provided colour. * @param {Colour} colour - The colour to generate a palette for. * @returns {Colour[]} The resulting colour palette. */ export declare function tetradic(colour: Colour): Colour[]; /** * Generate a colour palette containing the square colours of the provided colour. * @param {Colour} colour - The colour to generate a palette for. * @returns {Colour[]} The resulting colour palette. */ export declare function square(colour: Colour): Colour[]; /** * Generate a palette containing random colours. * @param {number} num - The length of the palette. * @returns {Colour[]} The resulting colour palette. */ export declare function randoms(num: number): Colour[]; /** * Validate that the contrast between the provided text colour and background colour meets the standard for the [WCAG contrast ratio](http://www.w3.org/TR/WCAG20/#contrast-ratiodef). * @param {Colour} textColour - The colour of the text. * @param {Colour} backgroundColour - The colour of the background. * @param {boolean} [largeText=false] - True if text size is large. By default, text is assumed to be regular size. * @param {boolean} [enhanced=false] - True if the enhanced contrast ratio is to be used. By default, the minimum contrast ratio is used. * @returns {boolean} True if the provided text colour and background colour have sufficient contrast. */ export declare function validateContrast(textColour: Colour, backgroundColour: Colour, largeText?: boolean, enhanced?: boolean): boolean; /** * Check if the provided text colour and background colour meet the [WCAG contrast ratio](http://www.w3.org/TR/WCAG20/#contrast-ratiodef) standards and if not, produce an equivalent text colour and background colour with sufficient contrast. The given text colour will be darkened and the given background colour will be lightened (and vice versa for dark mode). * @param {Colour} textColour - The colour of the text. * @param {Colour} backgroundColour - The colour of the background. * @param {boolean} [largeText=false] - True if text size is large. By default, text is assumed to be regular size. * @param {boolean} [enhanced=false] - True if the enhanced contrast ratio is to be used. By default, the minimum contrast ratio is used. * @returns {Colour[]} An array of colours with the first item being the new text colour and the second item being the new background colour. */ export declare function fixContrast(textColour: Colour, backgroundColour: Colour, largeText?: boolean, enhanced?: boolean): Colour[]; export {};