Skip to content

Jay-Karia/pigment-ts

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

๐ŸŽจ PigmentTS

npm npm

PigmentTS Banner


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.
See the documentation for 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

โฉ pre Features

Features that are ready for the next release. You can try them out in the playground. They are marked with "(pre)" in documentation.

  • rgb: Random rgb color
  • hsl: Random hsl color
  • hex: Random hex color
  • hsla: Randme hsla color
  • rgba: Random rgba color
  • tw: Random tailwind color

๐Ÿš€ 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'

๐Ÿ—บ 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!