@skinnypete/color

"What even is this? Why are you asking me what I think?"  —  Very Important, Real Person

Documentation   —   API

Simple yet powerful, lightweight, true color conversion and manipulation library.

Description

A true color manipulation and conversion library. Unlike some other libraries, this provides access directly to each color model, instead of relying on a single model to generate outputs. That means this library works within each color model to preform operations (some use conversion to make the process easier). This can ensure more accurate colors for sensitive projects, preform targeted manipulations on a single space, gives you more control in which model your color stays in, and much more.

Reasoning

Having used the Qix-/color for as long as I can remember when it comes to dealing with color libraries, and while it's a great library, I wanted to approach it from idea of treating each color model as a separate instance.

Most available color libraries rely on a single color model and output values for various color models.

Features

---

• Supports multiple color models (Ex. RGBA, HWB, HSL & HSV)
• Accepts CSS color-names
• Full of features and easy-to-use (Builder Pattern design)
• Written in Typescript
• Plenty of QOL enchantments
• Works directly within the color space instead of relying on single color model to generate output values
• Dependency free
• Will not do your taxes, sorry...

Supported Color Spaces

• RGBA
• HSV
• HWB
• HSL
• CMYK (Coming Soon)

Example

import { RGBA } from '@skinnypete/color';

const cssColor = RGBA.fromCssColor('RebeccaPurple');    // Accepts CSS Color Names
const shortHandHex = RGBA.fromHex('000');               // Can use shorthand hex values with and without hashtags
const hex = RGBA.fromHex('#663399');                    // Of course you can use hex (for any color space)
const rgb = RGBA.fromRGBA(102, 51, 153);                // Ability to pass in values (useful for external color space modfications)
const rgba = RGBA.fromRGBA(102, 51, 153, 0.44);         // Use alpha when applicable
const hslFromRGBA = RGBA.fromCssColor('RebeccaPurple')  // Easily switch between color models
    .toSpace('hsl');                                            

console.log(cssColor.toHexString());                     // #663399
console.log(shortHandHex.toArray());                     // [0,0,0,1]
console.log(rgb.toObject());                             // {"red":102,"green":51,"blue":153,"alpha":1}
console.log(rgb.toString());                             // rgb(102,51,153)
console.log(rgba.toString(true));                        // rgba(102,51,153,0.44)
console.log(hex.mix(shortHandHex.toObject(), 0.24)       // #4e2774
    .toString()); 
console.log(rgba.toHexString(true))                      // 663399
console.log(hslFromRGBA.toString());                     // hsl(270,50%,40%)

Installation

# NPM
npm install @skinnypete/color
# PNPM
pnpm install @skinnypete/color
# Yarn
yarn add @skinnypete/color