Colour
The Visual.Colour module contains a bunch of general purpose colour manipulation functions. There are also sub-modules for HSL, SRGB and OKLCH for doing things in one of those colour spaces.
Creating
Section titled “Creating”- Colour.interpolator - interpolate between colours
- Colour.randomHue - random hue degree value
- Colour.goldenAngleColour - return a colour based on an integer
Modifying
Section titled “Modifying”- Colour.opacity - return a variation of a colour with set opacity
Parsing & converting
Section titled “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
Importing
Section titled “Importing”// Sub moduleimport { Colour } from "@ixfx/visual.js"// Eg: Colour.toHsl();
// Whole moduleimport * as Visual from "@ixfx/visual.js"// Eg: Visual.Colour.toHsl();
// From bundleimport { Visual } from "@ixfx"// Eg: Visual.Colour.toHsl();
// And within your HTML's <HEAD> </HEAD> block:<script type="importmap">{ "imports": { "@ixfx":"/ixfx/index.js", "@ixfx/": "/ixfx/" } }</script>
// Sub module from parentimport { Colour } from "@ixfx/visual.js"// Eg: Colour.toHsl();
// Whole parent moduleimport * as Visual from "@ixfx/visual.js"// Eg: Visual.Colour.toHsl();
// From the bundleimport { Visual } from "@ixfx/bundle.js"// Eg: Visual.Colour.toHsl();
// Sub module from parentimport { Colour } from "https://unpkg.com/@ixfx/visual/bundle"// Eg: Colour.toHsl();
// Whole parent moduleimport * as Visual from "https://unpkg.com/@ixfx/visual/bundle"// Eg: Visual.Colour.toHsl();
// Single module from the bundleimport { Visual } from "https://unpkg.com/@ixfx/bundle"// Eg: Visual.Colour.toHsl();