color-kit 🎨

A lightweight, zero-dependency color utility library for JavaScript. Convert between color formats, manipulate colors, and generate palettes with ease.

Installation

npm install @sythora/color-kit

Usage

const { hexToRgb, lighten, randomColor, isLight } = require('@sythora/color-kit');

// Convert hex to RGB
const rgb = hexToRgb('#ff5733');
console.log(rgb); // { r: 255, g: 87, b: 51 }

// Lighten a color
const lighter = lighten('#ff5733', 20);
console.log(lighter); // #ff8566

// Generate random color
const random = randomColor();
console.log(random); // #a3d5f1 (random)

// Check if color is light or dark
const lightness = isLight('#ffffff');
console.log(lightness); // "light"

API

Conversion Functions

hexToRgb(hex)

Convert hex color to RGB object.

• Parameters: hex (string) - Hex color with or without # prefix
• Returns: {r, g, b} object with values 0-255

rgbToHex(r, g, b)

Convert RGB values to hex color.

• Parameters: r, g, b (numbers) - RGB values 0-255
• Returns: Hex color string with # prefix

rgbToHsl(r, g, b)

Convert RGB to HSL.

• Parameters: r, g, b (numbers) - RGB values 0-255
• Returns: {h, s, l} object (h: 0-360, s: 0-100, l: 0-100)

hslToRgb(h, s, l)

Convert HSL to RGB.

• Parameters: h (0-360), s (0-100), l (0-100)
• Returns: {r, g, b} object with values 0-255

Manipulation Functions

lighten(hex, percent)

Lighten a color by percentage.

• Parameters: hex (string), percent (number 0-100)
• Returns: Lightened hex color

darken(hex, percent)

Darken a color by percentage.

• Parameters: hex (string), percent (number 0-100)
• Returns: Darkened hex color

complementary(hex)

Get the complementary color.

• Parameters: hex (string)
• Returns: Complementary hex color

Utility Functions

randomColor()

Generate a random hex color.

• Returns: Random hex color string

isLight(hex)

Check if a color is light or dark.

• Parameters: hex (string)
• Returns: "light" or "dark"

Examples

const colorKit = require('@sythora/color-kit');

// Create a color scheme
const base = '#3498db';
const scheme = {
  base: base,
  light: colorKit.lighten(base, 20),
  dark: colorKit.darken(base, 20),
  complement: colorKit.complementary(base)
};

// Determine text color based on background
const bgColor = '#333333';
const textColor = colorKit.isLight(bgColor) === 'light' ? '#000000' : '#ffffff';

// Work with different formats
const color = '#ff5733';
const rgb = colorKit.hexToRgb(color);
const hsl = colorKit.rgbToHsl(rgb.r, rgb.g, rgb.b);
console.log(`HSL: h=${hsl.h}° s=${hsl.s}% l=${hsl.l}%`);

Features

✨ Zero dependencies
🪶 Lightweight (~2KB)
🎯 Simple and intuitive API
🔄 Full color format conversion
⚡ Fast and efficient
📦 Works in Node.js and browsers

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Author

Created by @sythora