yet another TS/JS color library (but with extra steps)

Hello

Before I start, scroll down to see a quick and dirty example if you don't like reading or don't care and want to see code. For more information and examples, head over to the Documentation resource or the GitHub Repo.

Over the past couple of months, I have slowly written a color conversion and manipulation library, @skinnypete/color, in my off-time and have finally published the package to NPM.

The project is still being actively developed but is at a usable point, and getting feedback and maybe even some community support would be beneficial.

To learn more about the project:

• NPM
• Documentation
• GitHub Repo

Oh, did I mention it's written in Typescript? So everything is type-safe. But no worries if TS isn't your flavor; the package also supports JS.

What Does It Do? And Why Should I Use It?

@skinnypete/color is a modern, lightweight, color manipulation & conversion library. It can be used for simple tasks, like just changing a color, to even more complex operations which require specific color models.

Some stuff it offers:

• Supports multiple color models
  • RGBA
  • HSL
  • HSV
  • HWB
• Accepts CSS color-names
• Full of features and easy-to-use (Builder Pattern design)
• Written in Typescript
• Plenty of QOL enchantments
• Lots of unit tests and coverage
• Works directly within the color space instead of relying on a single color model to generate output values
• Dependency free

But Why?

Yes, I know there are other excellent libraries when dealing with colors, and to be honest, my favorite for quite a while now has been color. However, I wanted to approach it differently than I have seen among other libraries (for better or worse).

The design of @skinnypete/color differs because each color model is treated as its own instance. Most libraries use a single model, most of the time being RGBA, and leverage that model to generate output values such as CSS color values, hex, etc. This library treats each model separately and performs operations directly within the model. This allows for the isolation of models and retaining accuracy for sensitive projects while providing an easy-to-use API and digestible structure.

Well, That's Cool. How Do I Use It?

Well, it's pretty easy.

import {RGBA, HSLSpace } from '@skinnypete/color'

const hsl: HSLSpace = RGBA.fromCssColor('RebeccaPurple')
    .lighten(10)
    .rotate(0.45)
    .fade(25)
    .toSpace('hsl');

console.log(hsl.toString())     // hsl(315,50%,44%)
console.log(hsl.toHexString())  // #a8388c
console.log(hsl.toObject())     // { hue: 315, saturation: 50, lightness: 44 }

Now do break down what is going on here:

• import {RGBA, HSLSpace } from '@skinnypete/color' - Import the library of course
• RGBA.fromCssColor('RebeccaPurple') - We use the RGBA color model space to generate a new instance using a CSS color name
• lighten(10) - Lightens the RGBA model by 10%
• rotate(0.45) - Rotates the Hue of the RGBA model by 45% (You can use both 0-1 and 1-100 for ratio values)
• fade(25) - Fade the alpha of the RGBA model by 25%
• toSpace('hsl') - Convert the current color space to the HSL color model
• toString() - Returns a valid CSS color value
• toHexString() - Converts the color model to a hex color value
• toObject() - Return the color model data as an object

There is many other methods available for manipulating and converting your color; to learn more about these methods head over to the documentation resource site.

You Can Use These Models At The Moment

They are currently still being added, but now the following are available:

• RGBA (Red, Green, Blue, Alpha)
• HSL (Hue, Saturation, Lightness)
• HSV (Hue, Saturation, Value)
• HWB (Hue, Whiteness, Blackness)
• CMYK (Coming Soon™)

I Appreciate You

Honestly, if your read all this, thanks. Hopefully, I was convincing enough to get a consideration next time you're skimming through NPM looking for a color library.

To learn more, head over to @skinnypete/color, and if you have any questions or just want to say it sucks please let me know :)