API Reference

convertColor

Function	`pigment.convertCOlor(color: string, format: Format, prefix?: string) : string`
Description	Converts a color from one format to another.
Parameters	`color` (string): The color value (e.g., `'#ff5733'`). `format` (Format): See all the supported formats `prefix` (string): Adds a tailwind prefix (e.g., `bg-red-500`)
Returns	A string value of the converted color.

index.ts

import pigment from "pigment-ts";
 
// Convert HEX to RGB
const rgb = pigment.convertColor("#ff5733", "rgb");
console.log(rgb); // 'rgb(255, 87, 51)'
 
// Using prefix
const tw = pigment.convertColor("#DCFCE7", "tw", "bg");
console.log(tw); // 'bg-green-200'

Note

While converting hex to tailwind, use uppercase hex code. Support for lowecase will be added soon

lightenColor

Function	`pigment.lightenColor(color: string, percent: number) : string`
Description	Lightens a color by a specified percentage.
Parameters	`color` (string): The color value (e.g., `'#ff5733'`). `percent` (number): Percentage to lighten (e.g., `0.3`)
Returns	A string value of the lightend color.

index.ts

import pigment from "pigment-ts";
 
const lightened = pigment.lightenColor("#ff5733", 20);
console.log(lightened); // '#FF8A66'

darkenColor

Function	`pigment.darkenColor(color: string, percent: number) : string`
Description	Darkens a color by a specified percentage.
Parameters	`color` (string): The color value (e.g., `'#ff5733'`). `percent` (number): Percentage to darken (e.g., `0.3`)
Returns	A string value of the darkened color.

index.ts

import pigment from "pigment-ts";
 
const darkened = pigment.darkenColor("#ff5733", 20);
console.log(darkened); // '#D93C1A'

randomColor

Function	`pigment.randomColor(format: Format, prefix?: string): string`
Description	Generates a random color.
Parameters	`format` (Format): See all the supported formats `prefix` (string): Adds a tailwind prefix (e.g., `bg-red-500`)
Returns	A string value of the random color.

index.ts

import pigment from "pigment-ts";
 
const randomHex = pigment.randomColor("hex");
console.log(randomHex); // '#A1B2C3'

Note

We have added individual utilities to generate random colors in different formats.

rgb (`pre`)

Function	`pigment.rgb(): string`
Description	Generates a random rgb color.
Parameters	None
Returns	A string value of the random rgb color.

index.ts

import pigment from "pigment-ts";
 
const randomRgb = pigment.rgb();
console.log(randomRgb); // 'rgb(20, 50, 120)'

hex (`pre`)

Function	`pigment.hex(): string`
Description	Generates a random hex color.
Parameters	None
Returns	A string value of the random hex color.

index.ts

import pigment from "pigment-ts";
 
const randomHex = pigment.hex();
console.log(randomHex); // '#A1B2C3'

hsl (`pre`)

Function	`pigment.hsl(): string`
Description	Generates a random hsl color.
Parameters	None
Returns	A string value of the random hsl color.

index.ts

import pigment from "pigment-ts";
 
const randomHsl = pigment.hsl();
console.log(randomHsl); // 'hsl(120, 100%, 50%)'

hsla (`pre`)

Function	`pigment.hsla(): string`
Description	Generates a random hsla color.
Parameters	None
Returns	A string value of the random hsla color.

index.ts

import pigment from "pigment-ts";
 
const randomHsla = pigment.hsla();
console.log(randomHsla); // 'hsla(120, 100%, 50%, 0.5)'

rgba (`pre`)

Function	`pigment.rgba(): string`
Description	Generates a random rgba color.
Parameters	None
Returns	A string value of the random rgba color.

index.ts

import pigment from "pigment-ts";
 
const randomRgba = pigment.rgba();
console.log(randomRgba); // 'rgba(20, 50, 120, 0.5)'

tw (`pre`)

Function	`pigment.tw(prefix?: string): string`
Description	Generates a random tailwind color.
Parameters	`prefix` (string): Adds a tailwind prefix (e.g., `bg-red-500`)
Returns	A string value of the random tailwind color.

index.ts

import pigment from "pigment-ts";
 
const randomTw = pigment.tw("bg");
console.log(randomTw); // 'bg-green-200'

Warning

Features marked with pre cannot be used directly. Visit the playground to try out now.

toTailwind

Function	`pigment.toTailwind(color: string, prefix?: string) : string`
Description	Converts a color to Tailwind.
Parameters	`color` (string): The color value (e.g., `'#ff5733'`). `prefix` (string): Adds a tailwind prefix (e.g., `bg-red-500`)
Returns	A string value of the tailwind color.

index.ts

import pigment from "pigment-ts";
 
const tw = PigmentTS.toTailwind("#DCFCE7", "bg");
console.log(tw); // 'bg-green-100'
 
const tw2 = PigmentTS.toTailwind("rgb(255, 87, 51)", "text");
console.log(tw2); // 'text-[#FF5733]'

Note

Currently only the exact tailwind color will be converted. Support for nearest color will be added soon

setOpacity

Function	`pigment.setOpacity(color: string, amount: number, to: Alpha) : string`
Description	Sets the opacity of a color.
Parameters	`color` (string): The color value (e.g., `'#ff5733'`). `amount` (number): The opacity value (e.g., `0.5`) `to` (Alpha): The alpha format (e.g., `hsla and rgba`)
Returns	A string value of the color with opacity.

index.ts

import pigment from "pigment-ts";
 
const withOpacity = pigment.setOpacity("#ff5733", 0.5, "rgba");
console.log(withOpacity); // 'rgba(255, 87, 51, 0.5)'

blendColors

Function	`pigment.blendColors(color1: string, color2: string, ratio: number) : string`
Description	Blends two colors together.
Parameters	`color1` (string): The first color value (e.g., `'#ff5733'`). `color2` (string): The second color value (e.g., `'#ff5733'`). `ratio` (number): The percentage of the blend (e.g., `0.5`)
Returns	A string value of the blended color of the format of first color.

index.ts

import pigment from "pigment-ts";
 
const blend = pigment.blendColors("#ff5733", "#333333", 0.5);
console.log(blend); // '#994533'
 
// Using prefix
const tw = pigment.blendColors("bg-red-500", "rgb(41, 94, 150)", 0.2);
console.log(tw); // 'bg-[#C74854]'

Note

The prefix for Tailwind color will be taken from the first color.

API Reference

On this page