Skip to content

Colour

Module Visual.Colour

Creating

Colour.interpolator - interpolate between colours
Colour.randomHue - random hue degree value
Colour.goldenAngleColour - return a colour based on an integer

Modifying

Colour.opacity - return a variation of a colour with set opacity

Parsing & converting

Colour.getCssVariable - get a value of a CSS variable or use a fallback value
Colour.convert - convert some kind of colour representation to a structured colour in a particular colour space
Colour.convertToString - convert some kind of colour representation to a CSS string and colour space

Stepped scale

Colour.scale produces a stepped scaled of colours

const steps = Colour.scale([ `red`, `green` ], { stepsBetween: 10 });
for (const step of steps) {
  // 'step' will be a CSS colour string
}

Importing

// Sub module
import { Colour } from "@ixfx/visual.js"
// Eg: Colour.toHsl();

// Whole module
import * as Visual from "@ixfx/visual.js"
// Eg: Visual.Colour.toHsl();

// From bundle
import { Visual } from "@ixfx/bundle.js"
// Eg: Visual.Colour.toHsl();

// And within your HTML's <HEAD> </HEAD> block:
<script type="importmap">{ "imports": { "@ixfx/": "/ixfx/" } }</script>

// Sub module from parent
import { Colour } from "@ixfx/visual.js"
// Eg: Colour.toHsl();

// Whole parent module
import * as Visual from "@ixfx/visual.js"
// Eg: Visual.Colour.toHsl();

// From the bundle
import { Visual } from "@ixfx/bundle.js"
// Eg: Visual.Colour.toHsl();

// Sub module from parent
import { Colour } from "https://unpkg.com/@ixfx/visual/bundle"
// Eg: Colour.toHsl();

// Whole parent module
import * as Visual from "https://unpkg.com/@ixfx/visual/bundle"
// Eg: Visual.Colour.toHsl();

// Single module from the bundle
import { Visual } from "https://unpkg.com/@ixfx/bundle"
// Eg: Visual.Colour.toHsl();