pigment-ts

🎨 PigmentTS

A lightweight JavaScript/TypeScript utility for seamless color manipulation and conversion. Tailwind CSS support is built-in.

Visit the playground to try out the library.

Supported Formats - HEX, RGB, HSL, RGBA, HSLA, Tailwind CSS

✨ Features

• Color Conversion: Convert colors between all the supported formats.
• Brightness Control: Lighten or darken a color by a specified percentage.
• Random Color Generation: Generate random colors in of the supported format.
• Opacity Control: Set the opacity of color in any format.
• Blend Colors: Blend two colors in any format together in a specified ratio.

More features coming soon!

🔮 What's New in v0.2

• Support for HSLA and RGBA formats
• New utility functions for opacity control and color blending
• Optimized codebase for better performance and reduced bundle size

🚀 Getting Started

Installation: Install PigmentTS via npm

npm install pigment-ts

Usage

Import all the function you need

import { convertColor, lightenColor, toTailwind } from "pigment-ts";

// Convert HEX to RGB
const rgb = convertColor("#ff5733", "rgb");
console.log(rgb); // 'rgb(255, 87, 51)'

// Lighten a color by 20%
const lighter = lightenColor("#ff5733", 20);
console.log(lighter); // '#FF8A66'

// Get Tailwind CSS class
const twClass = toTailwind("#ef4343");
console.log(twClass); // 'red-500'

Use all functions via default import

import PigmentTS from "pigment-ts";

const randomHex = PigmentTS.randomColor("hex");
console.log(randomHex); // '#A1B2C3'

📚 API Reference

convertColor

Converts a color from one format to another.

convertColor(color: string, format: "hex" | "rgb" | "hsl" | "tw" | "rgba" | "hsla", prefix?: string): string

convertColor("#ff5733", "rgb"); // 'rgb(255, 87, 51)'
convertColor("rgb(255, 87, 51)", "hex"); // '#FF5733'
convertColor("#7f1d1d", "tw"); // 'red-900'
convertColor("#7f1d1d", "tw", "bg"); // 'bg-red-900'

lightenColor

Lightens a color by a specified percentage.

lightenColor(color: string, percent: number): string

lightenColor("#ff5733", 20); // '#FF8A66'

darkenColor

Darkens a color by a specified percentage.

darkenColor(color: string, percent: number): string

darkenColor("#ff5733", 20); // '#CC2400'

randomColor

Generates a random color in the specified format.

randomColor(format: "hex" | "rgb" | "hsl" | "tw" | "rgba" | "hsla", prefix?: string): string

randomColor("hex"); // '#A1B2C3'
randomColor("rgb"); // 'rgb(161, 178, 195)'
randomColor("hsl"); // 'hsl(210, 26%, 70%)'
randomColor("tw", "bg"); // 'bg-blue-300'

toTailwind

Converts a color to a Tailwind CSS class.

toTailwind(color: string, prefix?: string): string

toTailwind("#ef4343"); // 'red-500'
toTailwind("#ef4343", "border"); // 'border-red-500'

setOpacity

Sets the opacity of a color in any format.

setOpacity(color: string, amount: number, to: "rgba" | "hsla"): string

setOpacity("#ff5733", 0.5, "rgba"); // 'rgba(255, 88, 51, 0.5)'
setOpacity("rgb(200, 100, 150)", 0.3, "hsla"); // hsla(330, 48%, 59%, 0.3)

blendColors

Blends two colors together to create a new color.

blendColors(color1: string, color2: string, ratio: number): string

blendColors("#ff5733", "#333333", 0.5); // '#994533'
blendColors("rgb(255, 87, 51)", "hsl(101, 100%, 60%)", 0.2); // 'rgb(227, 121, 51)'

Note: It returns the color in the format of the first color provided.
The prefix for Tailwind color will be taken from the first color.

🗺 Roadmap

See the ROADMAP file for a list of features that are planned for future releases.

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🤝 Contribution

See the CONTRIBUTING file for more information on how to contribute to this project.

Support me by giving a ⭐ if you find this project useful!