ColourSpace

ColourSpace is a simple package for handling conversion between various colour formats.

Features

• Convert between RGB, HSL, and HEX colour formats.
• Convert between alpha channel variants of the above (RGBA, HSLA, HEXA).
• Can accept wrapped and unwrapped values. e.g. rgba(79, 147, 62, 0.5) and 79, 147, 62, 0.5.
• When a wrapped value is provided, the class can guess the format.

Note: When the class attempts to guess the colour format it looks specifically for the use of #, rgb, and hsl at the start, it can't guess unwrapped values.

Installation

1yarn add colourspace

Usage

1import ColourSpace from 'colourspace';
2
3// Define colours from hex formats, including alpha channel.
4const colour1 = new ColourSpace('#391bb1');
5const colour2 = new ColourSpace('391bb1', 'hex');
6const colour3 = new ColourSpace('#391bb180');
7const colour4 = new ColourSpace('391bb180', 'hex');
8
9// Define colours from rgb formats, including alpha channel and using the percentage format.
10const colour5 = new ColourSpace('rgb(79, 147, 62)');
11const colour6 = new ColourSpace('79, 147, 62', 'rgb');
12const colour7 = new ColourSpace('rgba(79, 147, 62, 0.5)');
13const colour8 = new ColourSpace('79, 147, 62, 0.5', 'rgb');
14const colour9 = new ColourSpace('rgba(79 147 62 / 50%)');
15
16// Define colours from hsl formats, including alpha channel and using the percentage format.
17const colour10 = new ColourSpace('hsl(79, 147, 62)');
18const colour11 = new ColourSpace('79, 147, 62');
19const colour12 = new ColourSpace('hsla(79, 147, 62, 0.5)');
20const colour13 = new ColourSpace('79, 147, 62, 0.5');
21const colour14 = new ColourSpace('hsla(79 147 62 / 50%)');
22const colour15 = new ColourSpace('79 147 62 / 50%');
23
24// Convert to other formats.
25console.log(colour1.toHex()); // #391bb1
26console.log(colour1.toHexa()); // #391bb180
27console.log(colour1.toRgb()); // rgb(79, 147, 62)
28console.log(colour1.toRgba()); // rgba(79, 147, 62, 0.5)
29console.log(colour1.toHsl()); // hsl(108, 41%, 41%)
30console.log(colour1.toHsla()); // hsla(108, 41%, 41%, 0.5)
31
32// Convert to other formats without wrapper.
33console.log(colour1.toHex(true)); // 391bb1
34console.log(colour1.toHexa(true)); // 391bb180
35console.log(colour1.toRgb(true)); // 79, 147, 62
36console.log(colour1.toRgba(true)); // 79, 147, 62, 0.5
37console.log(colour1.toHsl(true)); // 108, 41%, 41%
38console.log(colour1.toHsla(true)); // 108, 41%, 41%, 0.5

Contrast

When you have a ColourSpace instance, you can use the toContrast method to return a new instance of the contrast for the current colour (for text display purposes) and then you can convert that to whatever format you need.

1import ColourSpace from 'colourspace';
2
3const someColour = new ColourSpace('#391bb1');
4console.log(someColour.toContrast().toHex()); // #FFFFFF

Functions

There are some helpers for simpler access for conversions, these can accept wrapped or unwrapped values, as they have a defined input format, but they will always return wrapped values.

All of these functions have an unwrap parameter (default false) which will return the unwrapped value.

1import {
2	hexToRgb, hexToRgba, hexToHsl, hexToHsla, rgbToHex, rgbToHexa, rgbToHsl,
3	rgbToHsla, hslToHex, hslToHexa, hslToRgb, hslToRgba
4} from './colourspace';
5
6// Hex To X
7hexToRgb('#FFFFFF') // rgb(255, 255, 255)
8hexToRgba('#FFFFFF'); // rgba(255, 255, 255, 1)
9hexToHsl('#FFFFFF'); // hsl(0, 0%, 100%)
10hexToHsla('#FFFFFF'); // hsla(0, 0%, 100%, 1)
11
12// RGB To X
13rgbToHex('rgb(255, 255, 255)'); // #FFFFFF
14rgbToHexa('rgb(255, 255, 255)'); // #FFFFFF
15rgbToHsl('rgb(255, 255, 255)'); // hsl(0, 0%, 100%)
16rgbToHsla('rgb(255, 255, 255)'); // hsla(0, 0%, 100%, 1)
17
18// HSL To X
19hslToHex('hsl(0, 0%, 100%)'); // #FFFFFF
20hslToHexa('hsl(0, 0%, 100%)'); // #FFFFFF
21hslToRgb('hsl(0, 0%, 100%)'); // rgb(255, 255, 255)
22hslToRgba('hsl(0, 0%, 100%)'); // rgba(255, 255, 255, 1)

Contributions

Contributions and feedback are always welcome, I created this package purely to solve my immediate issue, but if it can help others then that's great, either open an issue or a PR with your changes.

Credits

I used a variety of online sources (Stack Overflow, 30SecondsOfCode, Codepen authors and more) to collect the formulas for the conversions. This package is mostly stitching together and tweaking them to fix some edge cases I found and to make them as flexible as possible.