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
- 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!
- Support for HSLA and RGBA formats
- New utility functions for opacity control and color blending
- Optimized codebase for better performance and reduced bundle size
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
Installation: Install PigmentTS via npm
npm install pigment-tsUsage
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'See the ROADMAP file for a list of features that are planned for future releases.
This project is licensed under the MIT License - see the LICENSE file for details.
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!