Although there are a bunch of color conversion libraries on npm, I couldn't find one where it was simple to just import the conversions you want. While importing a library is not a big deal in node, for the browser there is not reason to load a whole library of code you are not using. Normally I find I only need one conversion.

Current API

Hexadecimal to HSL

import hexToHsl from 'tie-dye/hexToHsl';

const paleCornflowerBlueHsl = hexToHsl('#ABCDEF');

console.log(paleCornflowerBlueHsl); // => { h: 210, s: 68, l: 80.3921568627451}

Hexadecimal to RGB

import hexToRgb from 'tie-dye/hexToRgb';

const paleCornflowerBlueRgb = hexToRgb('#ABCDEF');

console.log(paleCornflowerBlueRgb); // => { r: 171, g: 205, b: 239 }

RGB to Hexadecimal

import rgbToHex from 'tie-dye/rgbToHex';

const mintGreenHex = rgbToHex(152, 255, 152);

console.log(mintGreenHex); // => '#98FF98'

RGB to HSL

import rgbToHsl from 'tie-dye/rgbToHsl';

const dreamyRedHsl = rgbToHsl(139, 255, 138);

console.log(dreamyRedHsl); // => { h: 0, s: 70.13574660633485, l: 56.666666666666664 }

HSL to Hexadecimal

import hslToHex from 'tie-dye/hslToHex';

const mauveHex = hslToHex(276, 100, 85);

console.log(mauveHex); // => '#e0B3FF'

HSL to RGB

import hslToRgb from 'tie-dye/hslToRgb';

const foamGreenRgb = hslToRgb(96, 46, 59);

console.log(foamGreenRgb); // => { r: 140.83139999999997, g: 198.543, b: 102.35699999999997 }

Keeping it simple


In the spirit of keeping it unixy this library does not aim to round your results, or allow you to pass arguments with r g b / h s l properties, etc. If you wanna do that here are some really simple examples.

Passing objects with h s l properties

import hslToRgb from 'tie-dye/hslToRgb';

const hslObjectToRgb = obj => hslToRgb(obj.h, obj.s, obj.l);

const foamGreenHsl = {h: 96, s: 46, l: 59};

const foamGreenRgb = hslObjectToRgb(foamGreenHsl);

console.log(foamGreenRgb); // => { r: 140.83139999999997, g: 198.543, b: 102.35699999999997 }

Rounding results to two decimal places

import hslToRgb from 'tie-dye/hslToRgb';
import { mapValues } from 'lodash/fp';

const roundTo2Decimal = x => Math.round(x * 100) / 100;
const roundObject = mapValues(roundTo2Decimal);

const foamGreenRgb = roundObject(hslToRgb(96, 46, 59));

console.log(foamGreenRgb); // => { r: 140.83, g: 198.54, b: 102.36 }