Lightweight javascript library for color manipulations.
Try Our Demo
- BlueDyeJS
- Table of Contents
- Usage
- Installation
- API
undo()pin()reset()red(red: number)green(green: number)blue(blue: number)alpha(alpha: number)cyan(cyan: number)yellow(yellow: number)magenta(magenta: number)black(black: number)cmyk()rgb(red: number, green: number, blue: number)rgba(red: number, green: number, blue: number, alpha: number)dark(level: number)light(level: number)negative()redToBlue()blueToRed()gray()grey()random()css()hex()number()setTag(tag: string)name(name: string)
- License
const bluedye = require('@yokgs/bluedyejs');
let color = bluedye('red'); // red color
let defaultColor = bluedye(); // transparent is the default color
let black = bluedye(false), // you can also use boolean values
white = bluedye(true); // (black is false and white is true)
let blackToo = bluedye(0),
blue = bluedye('#0000ff'),
randomColor = bluedye.random();| input | equivalent | |
| undefined | rgba(0, 0, 0, 0) | |
| null | rgba(0, 0, 0, 0) | |
| '' | rgba(0, 0, 0, 0) | |
| false | rgba(0, 0, 0, 1) | |
| true | rgba(255, 255, 255, 1) | |
| rgb(0, 0, 0) ... rgb(255, 255, 255) | rgba(0, 0, 0, 1) ... rgba(255, 255, 255, 1) | bluedye.rgb(0, 0, 0) ... bluedye.rgb(255, 255, 255) |
| Number (0 ... 16777215) | rgba(0, 0, 0, 1) ... rgba(255, 255, 255, 1) | bluedye.number(0) ... bluedye.number(16777215) |
| [n] ([0] ... [255]) | rgba(n, n, n, 1) (rgba(0, 0, 0, 1) ... rgba(255, 255, 255, 1)) | bluedye.grayscale(0) ... bluedye.grayscale(255) |
| [r, g, b] ([0, 0, 0] ... [255, 255, 255]) | rgba(r, g, b, 1) (rgba(0, 0, 0, 1) ... rgba(255, 255, 255, 1)) | |
| [r, g, b, a] ([0, 0, 0, 0] ... [255, 255, 255, 1]) | rgba(r, g, b, a) (rgba(0, 0, 0, 0) ... rgba(255, 255, 255, 1)) |
let color = bluedye('red');
color.css() // "rgb(255,0,0)"
color.alpha(.6).css() // "rgba(255,0,0,0.6)"
color.hex() // "#ff0000" (NOTE : hex() does not support alpha values)
let defaultColor = bluedye();
defaultColor.hex() // "#000000"
defaultColor.css() // "rgba(0,0,0,0)" bluedye('red').number() // 16711680
blueedye('black').number() // 0 bluedye('red').toArray() // [255, 0, 0, 0.6]
bluedye('black').toArray() // [0, 0, 0, 1] var a = bluedye().red(88).blue(11);
a.RED; /* = 88 */ a.BLUE; /* = 11 */
a.setTag('my-color'); // we store the color
a = 0; // oops the color is overwritten now :(
// do not worry we can restore it
var b = bluedye.getColor('my-color');
b.RED; /* = 88 */ b.BLUE; /* = 11 */
b.green(30);
b.GREEN // 30
var c = bluedye.getColor('my-color');
c.GREEN // 30 (my-color represents the same instance of the color)
c.red(255);
c.RED // 255
b.RED // 255 too (b and c represent the same color)
b.setTag('color1').setTag('color2');
bluedye.getColor('color1') // undefined (why? each color has only one tag name)
c.tag // color2 (tag 'my-color' is updated to 'color2') var a = bluedye().red(88).blue(11);
a.RED // 88
a.BLUE // 11
a.name('my-color');
a = 0; // oops our color is gone :(
// do not worry we can recover it
var b = bluedye('my-color'); // or bluedye.colorName('my-color')
b.RED // 88
b.BLUE // 11
b.green(30);
b.GREEN // 30
var c = bluedye('my-color');
c.GREEN // 0 (my-color is a constant)
c.red(255);
c.RED // 255
b.RED // still 88 (b and c are independant colors)
b.name('color1').name('color2');
bluedye.name('color1') // rgb(88,0,11) ( != undefined)Note: Default colors are now supported
let a = bluedye();
a.BLUE // 0
a.blue(15);
a.BLUE // 15
a.undo();
a.BLUE // 0
a.red(7).green(100).blue(6);
a.toArray() // [7, 100, 6, 0]
a.undo().toArray() // [7, 100, 0, 0]
a.undo().toArray() // [7, 0, 0, 0]
a.undo().toArray() // [0, 0, 0, 0]
a.undo().toArray() // [0, 0, 0, 0] let a = bluedye();
a.toArray() // [0, 0, 0, 0]
a.red(7).green(100).blue(6);
a.toArray() // [7, 100, 6, 0]
a.pin();
a.undo().toArray() // [7, 100, 6, 0]
a.undo().toArray() // [7, 100, 6, 0] (`undo` do not work)
// after each pin . the color saves the current state as an origin (initial state)
a.gray().light(50);
a.reset();
// reset() restores the original state of the color and clears the changes' history
a.toArray() // [7, 100, 6, 0]
a.rgb(55,88,90);
a.reset();
a.toArray() // [7, 100, 6, 0]
a.rgb(55,88,90).pin();
a.reset();
a.toArray() // [55, 88, 90, 0]Using NPM :
npm install @yokgs/bluedyejsUsing Yarn :
yarn add @yokgs/bluedyejsUndoes the last color change by restoring the previous state from the backup stack.
Saves the current color state as a reference point for future resets.
Restores the color to its state at the last pinned reference point.
Sets or gets the red component of the color. (0 - 255)
Sets or gets the green component of the color. (0 - 255)
Sets or gets the blue component of the color. (0 - 255)
Sets or gets the alpha (transparency) value of the color. (0 - 1)
Sets the Cyan value of the color to the given value. (0 - 255)
Sets the Yellow value of the color to the given value. (0 - 255)
Sets the Magenta value of the color to the given value. (0 - 255)
Sets the Key (Black) value of the color to the given value. (0 - 255)
Returns an array of the current CMYK values of the color.
Sets or gets the color as an RGB array.
Sets or gets the color as an RGBA array.
Darkens the color by a given percentage. (0 - 100)
Lightens the color by a given percentage. (0 - 100)
Inverts the color.
Swaps the red and blue components of the color with hue of 240deg.
Swaps the blue and red components of the color with hue of 120deg.
Converts the color to grayscale.
An alias for gray().
Sets the color to a random value.
Returns the color as a CSS-compatible string.
Returns the color as a hex string.
Returns the color as a number.
Sets a tag on the color object for easy retrieval.
Adds the color to the library of named colors.
Copyright (c) 2021-present, Yazid Slila (yokgs)