Skip to content

๐ŸŽจ A lightweight utility for color manipulation and conversion.

License

Notifications You must be signed in to change notification settings

Jay-Karia/pigment-ts

Folders and files

NameName
Last commit message
Last commit date

Latest commit

1eb2e02 ยท Feb 4, 2025
Nov 25, 2024
Nov 19, 2024
Nov 3, 2024
Nov 24, 2024
Nov 16, 2024
Nov 25, 2024
Sep 12, 2024
Nov 16, 2024
Nov 3, 2024
Nov 16, 2024
Nov 15, 2024
Nov 24, 2024
Nov 3, 2024
Nov 3, 2024
Sep 12, 2024
Feb 4, 2025
Nov 15, 2024
Nov 3, 2024
Nov 16, 2024
Nov 16, 2024
Feb 4, 2025
Nov 25, 2024
Nov 3, 2024
Nov 3, 2024
Nov 15, 2024

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.

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!