JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • 0
  • Score
    100M100P100Q41994F
  • License MIT

Color generator with different shades and to determine color percentage brightness

Package Exports

  • color-tin

Readme

Color-tin

Generate darker and lighter color shades at every passed percentage step from -100% to +100%. if the steps is not passed, it defaults to 5%
Supports HEX (#3498db) and RGB (rgb(52,152,219)) formats.


Installation

npm i color-tin

Usage

// ES6 (ESM)
import { colorTin } from "color-tin";

// ES5 (CommonJS)
const { colorTin } = require("color-tin");

colorTin("rgb(52,152,219)");
colorTin("rgb(52,152,219)", 10);

Example Output

{
  "original": "#3498db",
  "darker_5": "#308dc9",
  "darker_10": "#2c82b7",
  ...
  "lighter_95": "#f6fbfe",
  "lighter_100": "#ffffff"
}

Color brightness

The function brightness() exported by the library returns the brightnes of the a color passed in percentage

// ES6 (ESM)
import { brightness } from "color-tin";

// ES5 (CommonJS)
const { brightness } = require("color-tin");

brightness("rgb(52,152,219)"); //65

random coler generator

The function darkColor() and brightColor() exported by the library returns a random color of spacific percentage darkness or brightness. darkColor() takes in percentage darkness and brightColor() take in percentagege brightness. In both, the default percentage in 50

// ES6 (ESM)
import { darkColor, brightColor } from "color-tin";

// ES5 (CommonJS)
const { darkColor, brightColor } = require("color-tin");

darkColor(60); // { rgba: 'rgba(20, 150, 169, 1)', hex: '#1496a9' }
brightColor(30); // { rgba: 'rgba(76, 59, 53, 1)', hex: '#4c3b35' }

Convert rgba to hex

It exports the function rgbaToHex and hexToRgba that does the conversion.

  • Supports #RGB, #RGBA, #RRGGBB, #RRGGBBAA
  • Example: hexToRgba('#FF000080') -> 'rgba(255, 0, 0, 0.5)
// ES6 (ESM)
import { rgbaToHex, hexToRgba } from "color-tin";

// ES5 (CommonJS)
const { rgbaToHex, hexToRgba  } = require("color-tin");

rgbaToHex("rgba(0,128,255,0.3)");  // "#0080FF4D"
hexToRgba("#0080FF4D");           // "rgba(0, 128, 255, 0.3)"

🛠 Features

  • Generate shades every 5% (-100% to +100%)
  • Supports HEX and RGB input
  • Returns all shades as an object
  • Determine brightness of a color in percentage
  • Returns rundom color with specifict brightness
  • Converts rgba to hex and hex to rgba
  • Works in Node.js, React, and Vanilla JS