Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jay-karia/pigment-ts
🎨 A lightweight utility for color manipulation and conversion.
https://github.com/jay-karia/pigment-ts
colo-conversion color color-manipulation javascript npm-package typescript utility
Last synced: 26 days ago
JSON representation
🎨 A lightweight utility for color manipulation and conversion.
- Host: GitHub
- URL: https://github.com/jay-karia/pigment-ts
- Owner: Jay-Karia
- License: mit
- Created: 2024-09-09T11:17:44.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2024-09-14T14:56:52.000Z (about 2 months ago)
- Last Synced: 2024-10-12T08:04:21.058Z (26 days ago)
- Topics: colo-conversion, color, color-manipulation, javascript, npm-package, typescript, utility
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/pigment-ts?activeTab=readme
- Size: 647 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Roadmap: ROADMAP.md
Awesome Lists containing this project
README
# 🎨 PigmentTS
[](https://www.npmjs.com/package/pigment-ts)
[](https://www.npmjs.com/package/pigment-ts)
A lightweight JavaScript/TypeScript utility for seamless color manipulation and conversion. Tailwind CSS support is built-in.
**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
```shell
npm install pigment-ts
```
**Usage**
Import all the function you need
```ts
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
```ts
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.
```ts
convertColor(color: string, format: "hex" | "rgb" | "hsl" | "tw" | "rgba" | "hsla", prefix?: string): string
```
```ts
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.
```ts
lightenColor(color: string, percent: number): string
```
```ts
lightenColor("#ff5733", 20); // '#FF8A66'
```
**darkenColor**
Darkens a color by a specified percentage.
```ts
darkenColor(color: string, percent: number): string
```
```ts
darkenColor("#ff5733", 20); // '#CC2400'
```
**randomColor**
Generates a random color in the specified format.
```ts
randomColor(format: "hex" | "rgb" | "hsl" | "tw" | "rgba" | "hsla", prefix?: string): string
```
```ts
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.
```ts
toTailwind(color: string, prefix?: string): string
```
```ts
toTailwind("#ef4343"); // 'red-500'
toTailwind("#ef4343", "border"); // 'border-red-500'
```
**setOpacity**
Sets the opacity of a color in any format.
```ts
setOpacity(color: string, amount: number, to: "rgba" | "hsla"): string
```
```ts
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.
```ts
blendColors(color1: string, color2: string, ratio: number): string
```
```ts
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](ROADMAP.md) file for a list of features that are planned for future releases.
---
### 📝 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
---
### 🤝 Contribution
See the [CONTRIBUTING](CONTRIBUTING.md) file for more information on how to contribute to this project.
---
**Support me by giving a ⭐ if you find this project useful!**