Spectrum is a lightweight JS / TS library designed to simplify color manipulation and conversion tasks within the RGB, HSL, and HEX color spaces
npm install @snipshot/spectrum






Spectrum is a lightweight JavaScript / TypeScript library designed to simplify
color manipulation and conversion tasks within the RGB, HSL, HWB, andHEX color spaces.
It may be not the most extensive library out there, but itβs precisely what you
need for common color-related tasks. Whether you want to blend two colors, get a
darker version of your color, or the saturation of a HEX color value. Spectrum
is your finely-tuned instrument for simplifying these processes.
``bash`
npm i @snipshot/spectrum
`javascript
import Spectrum, { adjustHsl } from '@snipshot/spectrum';
const spectrum = new Spectrum('hsl', [231, 0.66, 0.53, 0.8]);
const adjustedColor = adjustHsl(spectrum, { hue: -23, lightness: '-13%' });
console.log(adjustedColor.hsl); // { h: 208, s: 0.66, l: 0.4, a: 0.8 }
console.log(adjustedColor.hex); // #236aa9cc
`
Getting started with Spectrum is a breeze. Import the
Spectrum class into your
project and create an instance:
`javascript
import Spectrum from '@snipshot/spectrum';
const spectrum = new Spectrum('rgb', '255 255 0'); // yellow
`
That's it! Spectrum instance provides several methods to reveal information
about your color. For color manipulations you can import the function you need.
Let's see all of these in action.
Spectrum instance has the properties hex, hsl and rgb to reveal the
corresponting color values:
`javascript`
spectrum.hex; // #ffff00
spectrum.hsl; // { h: 60, s: 1, l: 0.5, a: 1 }
spectrum.hwb; // { h: 60, w: 0, b: 0, a: 1 }
spectrum.rgb; // { r: 255, g: 255, b: 0, a: 1 }
> By default, alpha channel value is 1 if it was not provided during
> initialization
You may also find useful other properties which return each value separately:
`javascript`
spectrum.alpha; // 1
spectrum.red; // 255
spectrum.green; // 255
spectrum.blue; // 0
spectrum.hue; // 60
spectrum.saturation; // 1
spectrum.lightness; // 0.5
spectrum.whiteness; // 0
spectrum.blackness; // 0
`javascript
import Spectrum, { colorMix } from '@snipshot/spectrum';
const red = new Spectrum('hex', '#f00');
const blue = new Spectrum('rgb', '0, 0, 255, 1');
const purple = colorMix(red, blue, 0.5); // 0.5 is a weight of the first color (max value is 1)
console.log(purple.hex); // #800080
`
Suppose that you need to set lightness equal to 50%. Here is how you can do it:
`javascript
import Spectrum, { setHsl } from '@snipshot/spectrum';
const darkgreen = new Spectrum('hex', '#006400');
const green = setHsl(darkgreen, { lightness: 0.5 });
console.log(green.hsl); // {h: 120, s: 0.98, l: 0.5, a: 1}
`
You can get a reversed or negative color from your color using the
invert() function:
`javascript
import Spectrum, { invert } from '@snipshot/spectrum';
const yellow = new Spectrum('rgb', [255, 255, 0]);
const negativeColor = invert(yellow, 1); // 1 is a weight of the inverted color
console.log(negativeColor.rgb); // { r: 0, g: 0, b: 255, a: 1 } - blue
`
To generate a color palette from a given color of various lightness it will be
handy to use a
createPalette()
function. It returns an object with keys from 0 to 100 with step 1 and
Spectrum instances as values with lightness set from 0 to 100.
`javascript
import Spectrum, { createPalette } from '@snipshot/spectrum';
const cyan = new Spectrum('hex', '#0ff');
const palette = createPalette(cyan);
console.log(palette[0].hsl); // { h: 180, s: 1, l: 0, a: 1 } - black
console.log(palette[44].hsl); // { h: 180, s: 1, l: 0.44, a: 1 }
console.log(palette[100].hsl); // { h: 180, s: 1, l: 1, a: 1 } - white
``
You can find the detailed API description and use cases on
spectrum.snipshot.dev.
Contributions are always welcome! If you have ideas for improvements or new
features, please open an issue or
submit a pull request on GitHub.
If you have any questions or need assistance, feel free to contact us at
spectrum@snipshot.dev.
Spectrum is licensed under the MIT License. See the
LICENSE file for
details.
Happy coding! π