Code Monkey home page Code Monkey logo

color.js's Introduction

color.js

Version 0.2.1.2

Create and manipulate colors with ease.

Examples

Making violet (#EE82EE):

Color.get("violet")
Color(0xEE82EE)
Color("#EE82EE")
Color("EE82EE")
Color(0xEE, 0x82, 0xEE)
Color("EE", "82", "EE")
Color(238, 130, 238)
Color.rgb(238, 130, 238)
Color.hsl(0.8333333333333334, 0.7605633802816902, 0.7215686274509804)
// 300°, 75.88652482269505%, 72.35294117647058%

Shorthand color notation:

Color("#ABC") // "#AABBCC"
Color("ABC")  // "#AABBCC"

Convert a hex color to RGBA:

var c = new Color('#ABC123', 0.6);
c.getRGBA(); // rgba(171,193,35,0.6)

setValue and channels

var myColor = new Color;
myColor.setValue(0xAA7F00);
myColor.hexTriplet() === "#aa7f00";
myColor.channels[0] = 0xFF;
myColor.hexTriplet() === "#ff7f00"; // orange

Defining a custom color:

Color.define("rind", [92, 163, 16])
Color.get("rind").hexTriplet() === "#5ca310"

Get a random color between green and blue

Color.random("green", "blue");

Parsing CSS color values

red   = Color.parse("rgb(255, 0, 0)");
green = Color.parse("rgb ,128"); // shorthand
blue  = Color.parse("hsl(240, 100%, 50%)");

red.hexTriplet()   === "#ff0000";
green.hexTriplet() === "#008000";
blue.hexTriplet()  === "#0000ff";

Supported Browsers

  • Firefox 1+
  • Safari 2+
  • IE 6+
  • Opera 7+
  • Google Chrome 0.1+

Usage

color.js can be used in any ECMAScript environment as it does not make use of the DOM. color.js is very useful on the server-side and the client-side.

color.js CSS Module

The color.js CSS module defines all of the standard CSS colors for use in color.js.

API

Note: HSL values are in the form of fractions (0 to 1). A hue value of 0.5 is equivalent to a hue of 180°.

Instantiation

Color objects can be instantiated in any of the following ways:

color = [new ]Color(color:int | string, [, alpha:float])
color = [new ]Color(red:int | string, green:int | string, blue:int | string [, alpha:float | string])
color = Color.rgb(red:int, green:int, blue:int [, alpha:float])
color = Color.hsl(hue:float, saturation:float, lightness:float [, alpha:float])

Instance methods and properties

channels : array
An array containing a color's red, green, blue, and alpha channels in that order.
rgb()
Returns a CSS rgb() function representing the color.
rgba()
Returns a CSS rgba() function representing the color.
hsl()
Returns a CSS hsl() function representing the color.
hsla()
Returns a CSS hsla() function representing the color.
css()
If the alpha channel is 1, this returns hexTriplet(). Otherwise, this returns rgba().
getValue() and valueOf()
Returns an integer representation of the color.
setValue(value:int)
Sets the to value.
hexTriplet()
Returns the hex triplet (#RRGGBB) representation of the color.
rgbData()
Returns an array containing the color's red, green, and blue channels in that order.
hslData()
Returns an array containing the color's hue, saturation, and lightness channels in that order.
toString()
Returns this[Color.TO_STRING_METHOD]().

Constructor methods

Color names are case-insensitive.

Color.define(colorName:string, RGB:array | string)
Saves the specified RGB color under colorName, for later retrieval.
Color.get(colorName:string)
Returns a new color instance instance using the RGB data from a previously defined color with the name, colorName.
Color.del(colorName:string)
Deletes a previously defined color with the name of colorName.
Color.clearColors()
Clears all color definitions.
Color.parse(cssFunction:string)
Returns the color represented by a CSS function (eg. hsl(0, 100%, 50%)) or hex triplet. If no color could be parsed, this returns null. This function intentionally allows invalid syntax when parsing css functions. As long as the first three non-whitespace characters (case-insensitive) are "rgb" or "hsl" and the arguments (which are all optional and default to zero) are separated by commas, this function will be able to parse the CSS function.
Color.random([rangeStart:int | string] [, rangeEnd:int | string])
Returns a random color from rangeStart to rangeEnd. If rangeStart is not specified, this returns a random color from #000000 to #FFFFFF. rangeStart and rangeEnd can also be color names.
Color.rgb(red:int, green:int, blue:int [, alpha:float])
Returns a color constructed from the specified RGB values.
Color.hsl(hue:float, saturation:float, lightness:float [, alpha:float])
Returns a color constructed from the specified HSL values.
Color.RGBtoHSL(rgb:array)
Returns the array of RGB values converted to HSL values.
Color.HSLtoRGB(hsl:array)
Returns the array of HSL values converted to RGB values.

Configuration properties

Color.TO_STRING_METHOD : string
The method name of which to call when a color instance's toString() method is called. This defaults to hexTriplet.

Tracking image

color.js's People

Contributors

eligrey avatar kjgorman avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.