Web Colour

Quick Start

1. Install the package: npm install @commander-lol/web-colour
2. Create some colours:

import { parseColour } from '@commander-lol/web-colour'

function main() {
    // Get an instance of Colour
    const myColour = parseColour('#f934ee')
    // Convert into a HSL colour model, alter the lightness, then convert back to
    // the core 'Colour' type
    const lightest = myColour.asHsla().withLightness(1).asColour()
    
    // Print out a string in the format 'rgba(126, 123, 23, 1.0)'
    console.log(lightest.fmtRgba())
}

Usage

Once you have a Colour instance you can either directly mutate it be setting properties, or you can manipulate the instance immutably via the withX and asX methods.

Method name structure:

• from{X} - Static constructor type, will create a new Colour object from the required components, with parameters in the name specified order (e.g. fromRgba expects red, then green, then blue, then alpha)
• with{X} - Creates and returns a copy of the object. The properties will be identical, except for the property X, which will instead have the provided value.
• as{X} - Creates and returns a copy of the object in as a subtype representing the specified colour model (e.g. asHsla). Subtypes typically only have withX and asColour methods.
• fmt{X} - Returns a string representing the colour in the given colour model, aimed to be safe to use in css properties (e.g. color, background-color, linear-gradient, etc)

Creating Colour

You can either parse a colour string with the parseColour function, or use the static constructor functions to build a specific colour.

These methods create roughly the same colour (not accounting for variance from non-linear transforms between colour models):

import { Colour, parseColour } from '@commander-lol/web-colour'

const fromFunction = parseColour('#FF3B12')
const fromRgb = Colour.fromRgb(249, 52, 238)
const fromHsl = Colour.fromHsl(303, 0.94, 0.59)
const fromHsv = Colour.fromHsv(303, 0.79, 0.98)