🎨 PigmentTS

API Reference

API reference for the library

convertColor

Functionpigment.convertCOlor(color: string, format: Format, prefix?: string) : string
DescriptionConverts a color from one format to another.
Parameterscolor (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)
ReturnsA 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

Functionpigment.lightenColor(color: string, percent: number) : string
DescriptionLightens a color by a specified percentage.
Parameterscolor (string): The color value (e.g., '#ff5733').
percent (number): Percentage to lighten (e.g., 0.3)
ReturnsA string value of the lightend color.
index.ts
import pigment from "pigment-ts";
 
const lightened = pigment.lightenColor("#ff5733", 20);
console.log(lightened); // '#FF8A66'

darkenColor

Functionpigment.darkenColor(color: string, percent: number) : string
DescriptionDarkens a color by a specified percentage.
Parameterscolor (string): The color value (e.g., '#ff5733').
percent (number): Percentage to darken (e.g., 0.3)
ReturnsA string value of the darkened color.
index.ts
import pigment from "pigment-ts";
 
const darkened = pigment.darkenColor("#ff5733", 20);
console.log(darkened); // '#D93C1A'

randomColor

Functionpigment.randomColor(format: Format, prefix?: string): string
DescriptionGenerates a random color.
Parametersformat (Format): See all the supported formats
prefix (string): Adds a tailwind prefix (e.g., bg-red-500)
ReturnsA string value of the random color.
index.ts
import pigment from "pigment-ts";
 
const randomHex = pigment.randomColor("hex");
console.log(randomHex); // '#A1B2C3'

toTailwind

Functionpigment.toTailwind(color: string, prefix?: string) : string
DescriptionConverts a color to Tailwind.
Parameterscolor (string): The color value (e.g., '#ff5733').
prefix (string): Adds a tailwind prefix (e.g., bg-red-500)
ReturnsA 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

Functionpigment.setOpacity(color: string, amount: number, to: Alpha) : string
DescriptionSets the opacity of a color.
Parameterscolor (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)
ReturnsA 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

Functionpigment.blendColors(color1: string, color2: string, ratio: number) : string
DescriptionBlends two colors together.
Parameterscolor1 (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)
ReturnsA 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.

Previous

Introduction

Next

Contributing

On this page