Color Tools

Useful tools when working with colors.

• Introduction
• Installation
• HEX to RGB
• RGB to HEX
• HSL to HEX
• Color Shift
• Tone Map
• Brightness
• Colorify
• Random HEX
• Random RGB
• Random HSL
• TypeScript
• Contribution
• License

Introduction

This package is a module of the nextcss project. This package was created to maintain this module independently of the main package and to be used as a building block in other projects.

Installation

Install the package via yarn or npm.

yarn add -D @nextcss/color-tools

npm i -D @nextcss/color-tools

HEX to RGB

Convert hexadecimal color (3, 6 or 8 digits) to RGB color array.

Syntax

const Array = hex2rgb(hex: String);

Example

import { hex2rgb } from "@nextcss/color-tools";

const rgb1 = hex2rgb("#eee");
console.log(rgb1);
// Output → [ 238, 238, 238 ]

const rgb2 = hex2rgb("#2196f3");
console.log(rgb2);
// Output → [ 33, 150, 243 ]

const rgb3 = hex2rgb("#2196f3bf");
console.log(rgb3);
// Output → [ 33, 150, 243, 75 ]
// the last element is alpha, defined as a percentage

const [red, green, blue, alpha] = hex2rgb("#2196f3bf");
console.log({ red, green, blue, alpha });
// Output → { red: 33, green: 150, blue: 243, alpha:: 75 }
// Example RGB string → rgb(33 150 243 / 75%)
// Example RGBA string → rgba(33, 150, 243, .75)

RGB to HEX

Convert RGB color array [red, green, blue, alpha?] to hexadecimal color.

Syntax

const String = rgb2hex(rgb: Array);

Example

import { rgb2hex } from "@nextcss/color-tools";

const hex1 = rgb2hex([238, 238, 238]);
console.log(hex1);
// Output → '#eeeeee'

const hex2 = rgb2hex([238, 238, 238, 75]);
console.log(hex2);
// Output → '#eeeeeebf'

HSL to HEX

Convert HSL color array [hue,saturation,lightness] to hexadecimal color.

Syntax

const String = hsl2hex(hsl: Array);

Example

import { hsl2hex } from "@nextcss/color-tools";

const hex1 = hsl2hex([200, 70, 50]);
console.log(hex1);
// Output → #269dd9

const hex2 = hsl2hex([36, 90, 40]);
console.log(hex2);
// Output → #c2780a

Color Shift

Shift a hexadecimal color (3, 6 or 8 digits) by the specified percentage. Positive shift results lighter colors, negative shift results darker colors.

Syntax

const String = colorShift(hex: String, percentage: Number);

Example

import { colorShift } from "@nextcss/color-tools";

const color = colorShift("#eee", 10);
console.log(color);
// Output → #d6d6d6

const color2 = colorShift("#eee", -10);
console.log(color2);
// Output → #f0f0f0

Tone Map

Generate a tone map from a hexadecimal color (3, 6 or 8 digits), between 50 and 950 tones.

Syntax

const Object = toneMap(hex: String);

Example

import { toneMap } from "@nextcss/color-tools";

const tones = toneMap("#eee");
console.log(tones);
// Output → {
//   50: '#fdfdfd',
//   100: '#fcfcfc',
//   150: '#fbfbfb',
//   200: '#f9f9f9',
//   250: '#f7f7f7',
//   300: '#f5f5f5',
//   350: '#f3f3f3',
//   400: '#f1f1f1',
//   450: '#f0f0f0',
//   500: '#eeeeee',
//   550: '#d6d6d6',
//   600: '#bebebe',
//   650: '#a7a7a7',
//   700: '#8f8f8f',
//   750: '#777777',
//   800: '#5f5f5f',
//   850: '#474747',
//   900: '#303030',
//   950: '#242424',
// }

Brightness

Calculate brightness (percentage) of a hexadecimal color. For example, if the color brightness is <150, the color is light, otherwise it is dark.

Syntax

const Number = colorShift(hex: String);

Example

import { brightness } from "@nextcss/color-tools";

const level1 = brightness("#000");
console.log(level1);
// Output → 0

const level2 = brightness("#ffffff");
console.log(level2);
// Output → 100

const level3 = brightness("#269dd9");
console.log(level3);
// Output → 53

Colorify

Generate a hexadecimal color from any string (like username). Under the hood, it uses HSL to create the color, so you can set saturation (default: 70) and lightness (default: 50) values as an input.

Syntax

const String = colorify(str: String);

Example

import { colorify } from "@nextcss/color-tools";

const hex1 = colorify("John Doe");
console.log(hex1);
// Output → #40bf79

const hex2 = colorify("JD", 60);
console.log(hex2);
// Output → #3394cc

const hex3 = colorify("J", 60, 80);
console.log(hex3);
// Output → #dcebad

Random HEX

Generate a random hexadecimal color. Under the hood, it uses HSL to create the color, so you can set the saturation (default: 70) and lightness (default: 50) values as an input.

Syntax

const String = randomHex(saturation?: Number, lightness?: Number);

Example

import { randomHex } from "@nextcss/color-tools";

const hex1 = randomHex();
console.log(hex1);
// Output → #7de889

const hex2 = randomHex(50);
console.log(hex2);
// Output → #b38cd9

const hex3 = randomHex(65, 80);
console.log(hex3);
// Output → #abbbed

Random RGB

Generate a random RGB color array. Under the hood, it uses HSL to create the color, so you can set the saturation (default: 70) and lightness (default: 50) values as an input.

Syntax

const Array = randomRgb(saturation?: Number, lightness?: Number);

Example

import { randomRgb } from "@nextcss/color-tools";

const rgb1 = randomRgb();
console.log(rgb1);
// Output → [ 232, 193, 125 ]

const rgb2 = randomRgb(50);
console.log(rgb2);
// Output → [ 217, 161, 140 ]

const rgb3 = randomRgb(65, 80);
console.log(rgb3);
// Output → [ 206, 171, 237 ]

Random HSL

Generate a random HSL color array. Under the hood, it uses HSL to create the color, so you can set the saturation (default: 70) and lightness (default: 50) values as an input.

Syntax

const Array = randomHsl(saturation?: Number, lightness?: Number);

Example

import { randomHsl } from "@nextcss/color-tools";

const hsl1 = randomHsl();
console.log(hsl1);
// Output → [ 294, 70, 50 ]

const hsl2 = randomHsl(50);
console.log(hsl2);
// Output → [ 79, 50, 50 ]

const hsl3 = randomHsl(65, 80);
console.log(hsl3);
// Output → [ 274, 65, 80 ]

TypeScript

Since we don't use TypeScript, any issue with TypeScript is your business. For more information, see the Typescript documentation. If you're having problems with TypeScript, here are some hints that might get you started:

• esModuleInterop option in compilerOptions
• allowJs option in compilerOptions
• declare module "*" definition in declarations.d.ts

Contribution

Before you submit a Pull Request, please let us know what you would like, as this package is part of a larger package.

License

MIT License @ 2022 Zsolt Tövis

If you found this project interesting, please consider supporting my open source work by sponsoring me / give the repo a star / follow the nextcss project.