Skip to content
This repository has been archived by the owner on Nov 27, 2018. It is now read-only.

Allows transforming of colors from and to different formats and output as CSS.

License

Notifications You must be signed in to change notification settings

loilo-archive/color-converter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

color-converter

Allows conversion of colors with JavaScript from and to different formats and output as CSS.

This project is no longer actively maintained since it doesn't really have a USP. Maybe use the great color package instead.

Usage

The class is pretty much self-documenting. Just risk a look into color-converter.ts. :)

A small example:

const Color = require('color-converter').default

let cssValue = Color
    .fromRGB(255, 0, 0)  // Create from red
	.darken(20)          // Make it 20% darker
	.addBlue(40)         // Add 40% blue
	.setAlpha(0.5)       // Set opacity to 50%
	.css()               // Returns Hex or RGBA string (depending on alpha value)

console.log(cssValue)    // Output: rgba(153, 0, 102, 0.5)

API

Static constructors

// Returns a random color
Color.random()

// Returns a color...

// ...from another color object
Color.fromColor(color)

// ...from a CSS color value (like "#aaa", "rgba(0,0,0,.5)" or "red")
Color.fromCSS(cssString)

// ...from an HTML color name
Color.fromName(name)

// ...from a Hex string such as "#fff" or "#123456"
Color.fromHex(hexString)

// ...from red, green and blue each ranging from 0 to 255...
Color.fromRGB(red, green, blue)
// ...and alpha channel from 0 to 1
Color.fromRGBA(red, green, blue, alpha)

// ...from hue, saturation and lightness each ranging from 0 to 1...
Color.fromHSL(hue, saturation, lightness)
// ...and alpha channel from 0 to 1
Color.fromHSLA(hue, saturation, lightness, alpha)

// ...from hue, saturation and value each ranging from 0 to 1...
Color.fromHSV(hue, saturation, value)
// ...and alpha channel from 0 to 1
Color.fromHSVA(hue, saturation, value, alpha)

Converters

let color = Color.fromHex('#639')

// Converts the color to...

// ...a string usable in CSS
color.css()
// Returns "#663399"

// ...an HTML name
color.toName()
// Returns "RebeccaPurple" (returns null in case the color doesn't match any name)

// ...a Hex string
color.toHex()
// Returns "#663399", returns an rgba(...) string if alpha channel isn't 1

// ...an RGB hash
color.toRGB()
// Returns { r: 102, g: 51, b: 153 }

// ...an RGBA hash
color.toRGBA()
// Returns { r: 102, g: 51, b: 153, a: 1 }

// ...an HSL hash
color.toHSL()
// Returns { h: 0.8, s: 0.5, l: 0.4 }

// ...an HSLA hash
color.toHSLA()
// Returns { h: 0.8, s: 0.5, l: 0.4, a: 1 }

// ...an HSV hash
color.toHSV()
// Returns { h: 0.75, s: 0.667, v: 0.6 }

// ...an HSVA hash
color.toHSVA()
// Returns { h: 0.75, s: 0.667, v: 0.6, a: 1 }

Properties & Modifiers

These modifiers will allow you to change a color according to your needs.

// Properties first. You can get and set those.

// The alpha channel, a value from 0 to 1
color.alpha

// The portion of red/green/blue a value from 0 to 255
color.red
color.green
color.blue

// The hue, a value from 0 to 1
color.hue

// The saturation as in HSV color model, a value between 0 and 1
color.saturation

// The value as in HSV color model, a value between 0 and 1
color.value

// The lightness as in HSL color model, a value between 0 and 1
color.lightness


// Modifiers

// Changes the opacity by an absolute percentage from -100 to 100
color.fade(number)

// Rotates the hue by a number of degrees
color.rotate(number)

// Changes the saturation by an absolute percentage from -100 to 100
color.saturate(number)

// Basically color.saturate(number * -1)
color.desaturate(number)

// Changes the lightness (as in HSL) by an absolute percentage from -100 to 100
color.lighten(number)

// The same as color.lighten(number * -1)
color.darken(number)

// Changes the portion of red/green/blue by an absolute percentage from -100 to 100
color.addRed(number)
color.addGreen(number)
color.addBlue(number)

// Inverts saturation as in HSV color model
color.invertSaturation()

// Inverts the value as in HSV color model
color.invertValue()

// Inverts the lightness as in HSL color model
color.invertLightness()

About

Allows transforming of colors from and to different formats and output as CSS.

Resources

License

Stars

Watchers

Forks

Packages

No packages published