Color Converter

Design

Convert between HEX, RGB, and HSL with lighten/darken helpers.

Import

import { color } from 'toolmetry';

API Reference

Function	Parameters	Returns	Description
`color.hexToRgb`	`hex: string`	`{ r, g, b }`	Convert HEX to RGB
`color.rgbToHex`	`r: number, g: number, b: number`	`string`	Convert RGB to HEX
`color.rgbToHsl`	`r: number, g: number, b: number`	`{ h, s, l }`	Convert RGB to HSL
`color.hslToRgb`	`h: number, s: number, l: number`	`{ r, g, b }`	Convert HSL to RGB
`color.hexToHsl`	`hex: string`	`{ h, s, l }`	Convert HEX to HSL
`color.hslToHex`	`h: number, s: number, l: number`	`string`	Convert HSL to HEX
`color.convert`	`input: string`	`object`	Convert any color format
`color.isValidHex`	`hex: string`	`boolean`	Validate a HEX color
`color.lighten`	`hex: string, amount: number`	`string`	Lighten a color by percentage
`color.darken`	`hex: string, amount: number`	`string`	Darken a color by percentage

Examples

HEX to RGB

import { color } from 'toolmetry';

const rgb = color.hexToRgb('#3B82F6');
// { r: 59, g: 130, b: 246 }

Full Conversion

import { color } from 'toolmetry';

const all = color.convert('#3B82F6');
// { hex: "#3b82f6", rgb: {r:59,g:130,b:246},
//   hsl: {h:217,s:91,l:60},
//   cssRgb: "rgb(59, 130, 246)",
//   cssHsl: "hsl(217, 91%, 60%)" }

Lighten/Darken

import { color } from 'toolmetry';

const lighter = color.lighten('#3B82F6', 20);
const darker = color.darken('#3B82F6', 20);

Try It Live

Input

Random Generator

HTML Entity