v1.0.0
A JavaScript Color Prototype.
Each of the folowing constructors creates the same Color
object.
new Color(51, 102, 153);
new Color(51, 102, 153, 1);
new Color("rgb(51, 102, 153)");
new Color("rgba(51, 102, 153, 1)");
new Color("#369");
new Color("#336699");
new Color("#369F");
new Color("#336699FF");
new Color("hsl(210, 50%, 40%)");
new Color("hsla(210, 50%, 40%, 1)");
new Color("hsv(210, 67%, 60%)");
new Color("hsva(210, 67%, 60%, 1)");
new Color("cmyk(67%, 33%, 0%, 40%)");
new Color("cmyka(67%, 33%, 0%, 40%, 1)");
Colors can be retrived in each of the following formats:
var color = new Color(51, 102, 153);
console.log(color.rgb) // rgb(51, 102, 153)
console.log(color.hex) // #336699
console.log(color.hsl) // hsl(210, 50%, 40%)
console.log(color.hsv) // hsv(210, 67%, 60%)
console.log(color.cmyk) // cmyk(67%, 33%, 0%, 40%)
color = new Color(51, 102, 153, 0.6);
console.log(color.rgb) // rgba(51, 102, 153, 0.6)
console.log(color.hex) // #33669999
console.log(color.hsl) // hsl(210, 50%, 40%, 0.6)
console.log(color.hsv) // hsv(210, 67%, 60%, 0.6)
console.log(color.cmyk) // cmyk(67%, 33%, 0%, 40%, 0.6)
After a color has been instantiated, you can reassign the color using any of the formats.
var color = new Color(51, 102, 153);
color.rgb = "rgb(200, 0, 150)";
console.log(color.hex); // #c80096
color.hex = "#f90";
console.log(color.hex); // #ff9900
color.hsl = "hsl(210, 85%, 50%)";
console.log(color.hex); // #ff9900
color.hsv = "hsv(183, 40%, 90%)";
console.log(color.hex); // #8ae1e6
color.cmyk = "cmyk(20%, 40%, 60%, 80%)";
console.log(color.hex); // #8ae1e6
You can also set the alpha component by adding an "a" to the end of the fomat name and appending the alpha component, for example:
color.hsl = "hsla(210, 85%, 50%, 0.45)";
console.log(color.hex); // #1380ec73
You can get or set the following components
A number between 0
to 255
.
A number between 0
to 255
.
A number between 0
to 255
.
A number between 0
and 1
.
A number between 0
and 359
.
A number between 0
and 100
(%).
A number between 0
and 100
(%).
A number between 0
and 100
(%).
A number between 0
and 100
(%).
A number between 0
and 100
(%).
A number between 0
and 100
(%).
A number between 0
and 100
(%).
A number between 0
and 100
(%).
A number between 0
and 100
(%).
This value is READ ONLY
These methods create a copy of the color and manipulate that color and return it, the original color is not modified.
Returns a deep copy of the current color.
Returns a grayscaled copy of the color using one of the following methods:
- "average": Averages the RGB components
- "max": Takes the maximum of the RGB components
- "min": Takes the minimum of the RGB components
- "desaturate": Sets the "saturation" component to
0
- "rec709": Finds the luminance using the "rec709" standard
- "smpte249": Finds the luminance using the "smpte249" standard
- "rec601"/"SMPTE-C": Finds the luminance using the "rec601" (aka "SMPTE-C") standard (this is the default value).
Returns a copy of the color with its saturation increased by the specifed percentage.
Returns a copy of the color with its saturation decreased by the specifed percentage.
Returns a copy of the color with its "lightness" decreased by the specified percentage.
Returns a copy of the color with its "lightness" increased by the specified percentage.
Returns a copy of the color with its "hue" shifted by the specified number of degrees.
Returns a color which is a mixture of the current color and provided color. The provided color can be a Color
object or a string in a format that the Color
's constructor accepts. The optional second argument is an integer (percentage) indicating how much of the provided color should be mixed into the current color, this is 50
by default making the results a perfect 50/50 mix.
Returns a copy of the color with a 180 degree hue shift.
Returns a copy of the color with each of its RBG components inverted (newRed = 255 - red, newGreen = 255 - green, newBlue = 255 - blue).
Returns a copy of the color with the specified adjustments applied to it. The only argument should be an object whos keys are the components you wish to adjust with the adjustment values. The "luminance" component is immutable. The adjustments are applied in the order they are specified.
var color = new Color(51, 102, 153);
var newColor = color.adjust({
hue: 15, // shift the hue up 15 degrees
saturation: -10, // decrease the saturation by 10 degrees
red: -20, // decrease the red component by 20 (out of 255)
brightness: 20 // increase the brightness by 20%
});
console.log(newColor); // #386fc2