JsGouache.js

JsGouache aims to offer a tool for javascript developers to manipulate colors within various color spaces while raising awareness for different types of color deficiencies.

About

JsGouache aims to offer a tool for javascript developers to manipulate colors within various color spaces while attempting to raise awareness for different types of color deficiencies.

The library offers various functions for manipulation of the more common color spaces used on the web: RGB, Hexadecimal, HSL.  It also implements a theoretical (limited) simulation of the LMS color space (http://en.wikipedia.org/wiki/LMS_Color_Space)

References

Note

Mike Koss has a pretty interesting approach at ‘class’ inheritance that he explains here: http://mckoss.com/jscript/object.htm

Version

  • Version: 0.4

Requirements

Copyright

copyright © 2008 Francois Lafortune ( aka: QuickRedFox )

License

This code is freely distributable under the terms of the GNU GENERAL PUBLIC LICENSE Version 3

Summary
JsGouache aims to offer a tool for javascript developers to manipulate colors within various color spaces while raising awareness for different types of color deficiencies.
Prototypes for the javascript “Function” Object.
addon to the core Function, mimmics inheritance
addon to the core Function, supplies parent name
addon to the core Function, mimmics Overriding
JsGouache namespace
The JsGouache.Color construct creates the main color object which can then be used within the various color spaces.
Creates a JsGouache.RGBColor Object
Creates a JsGouache.HexColor Object
Creates a JsGouache.HSLColor Object
These functions apply to all the color spaces
Get the complementary color
Fetch an array representation of a color’s saturation range
Fetch an array representation of a color’s luminance range
Fetch an adjacent color on the color wheel
Get a Hue-Shifted Color
Get a Luminance-shifted Color
Get a Saturation-Shifted Color
The soft complementary color
The triadic colors
The tetradic colors (square)
The alternate tetradic colors (rectangle)
The analogous colors
The analogic colors
Up-shifted hue
Down-shifted hue
Up-shifted luminance
Down-shifted luminance
Up-shifted Saturation
Down-shifted saturation
Transforms color to a css string representation
Switch color space to Hexadeciaml
Switch color space to RGB
Switch color space to HSL
Is the color ‘websafe’ ?
Color perception disability simulations.
Generates RGB and HSL color scales (256 colors), returns an array of JsGouache.Color Objects
Get the readability factor of two colors (foreground and background) According to current W3C Standards

Function

Prototypes for the javascript “Function” Object.  (I know, I dont like it either)

Summary
addon to the core Function, mimmics inheritance
addon to the core Function, supplies parent name
addon to the core Function, mimmics Overriding

Function. JSG_Inherits

addon to the core Function, mimmics inheritance

Parameters

klass(Object) Class to be inherited

Function. JSG_Inherits

addon to the core Function, supplies parent name

Function. JSG_Inherits

addon to the core Function, mimmics Overriding

JsGouache

JsGouache namespace

The JsGouache color object (constructor)

Constructor

The JsGouache.Color construct creates the main color object which can then be used within the various color spaces.  It is suggested though, that you use the proper constructs for the desired spaces.  (RGBColor, HexColor, HSLColor)

Parameters

colorRepresentation(Mixed) Either 3 arguments for and RGB triple or the Hexadecimal representation of a color or even a css-style string format representations or and rgb triple.

Returns

A JsGouache.Color Object

See Also

  • JsGouache.RGBColor
  • JsGouache.HexColor
  • JsGouache.HSLColor

The RGB color object (constructor)

Constructor

Creates a JsGouache.RGBColor Object

Parameters

colorRepresentation(Mixed) Either 3 arguments for and RGB triple or the Hexadecimal representation of a color or even a css-style string format representations or and rgb triple.

Returns

A JsGouache.RGBColor Object

See Also

  • JsGouache.HexColor
  • JsGouache.HSLColor

The Hexadecimal color object (constructor)

Constructor

Creates a JsGouache.HexColor Object

Parameters

colorRepresentation(Mixed) Either 3 arguments for and RGB triple or the Hexadecimal representation of a color or even a css-style string format representations or and rgb triple.

Returns

A JsGouache.HexColor Object

See Also

  • JsGouache.RGBColor
  • JsGouache.HSLColor

The HSL color object (constructor)

Constructor

Creates a JsGouache.HSLColor Object

Parameters

h(Integer) Hue (0-360)
s(Integer) Saturation (0.0-1.0)
l(Integer) Luminance (0.0-1.0)

Returns

A JsGouache.HSLColor Object

See Also

  • JsGouache.RGBColor
  • JsGouache.HexColor

JsGouache. Color

These functions apply to all the color spaces

Summary
Get the complementary color
Fetch an array representation of a color’s saturation range
Fetch an array representation of a color’s luminance range
Fetch an adjacent color on the color wheel
Get a Hue-Shifted Color
Get a Luminance-shifted Color
Get a Saturation-Shifted Color
The soft complementary color
The triadic colors
The tetradic colors (square)
The alternate tetradic colors (rectangle)
The analogous colors
The analogic colors
Up-shifted hue
Down-shifted hue
Up-shifted luminance
Down-shifted luminance
Up-shifted Saturation
Down-shifted saturation
Transforms color to a css string representation
Switch color space to Hexadeciaml
Switch color space to RGB
Switch color space to HSL
Is the color ‘websafe’ ?
Color perception disability simulations.

JsGouache. Color. complementary

Get the complementary color

Returns

JsGouache.Color Object representing the complementary color

JsGouache. Color. saturation_range

Fetch an array representation of a color’s saturation range

Parameters

limit(Integer) Limit to n results

Returns

Array of JsGouache.Color Objects

JsGouache. Color. luminance_range

Fetch an array representation of a color’s luminance range

Parameters

limit(Integer) Limit to n results

Returns

Array of JsGouache.Color Objects

JsGouache. Color. degree_offsets

Fetch an adjacent color on the color wheel

Parameters

degrees(Integer) Distance of color on color wheel in degrees.

Returns

JsGouache.Color Object

JsGouache. Color. hue_shift

Get a Hue-Shifted Color

Parameters

dir(String) ‘up’ or ‘down’ , direction to shift
cs(Integer) a ‘range’ of colors for the scale currently used (deault is 360)

Returns

JsGouache.Color Object

JsGouache. Color. luminance_shift

Get a Luminance-shifted Color

Parameters

dir(String) ‘up’ or ‘down’ , direction to shift
cs(Integer) a ‘range’ of colors for the scale currently used (deault is 360)

Returns

JsGouache.Color Object

JsGouache. Color. saturation_shift

Get a Saturation-Shifted Color

Parameters

dir(String) ‘up’ or ‘down’ , direction to shift
cs(Integer) a ‘range’ of colors for the scale currently used (deault is 360)

Returns

JsGouache.Color Object

JsGouache. Color. soft_complementary

The soft complementary color

Note

Convenience method

Returns

JsGouache.Color Object

JsGouache. Color. triad

The triadic colors

Note

Convenience method

Returns

Array of JsGouache.Color Objects

JsGouache. Color. tetrad

The tetradic colors (square)

Note

Convenience method

Returns

Array of JsGouache.Color Objects

JsGouache. Color. tetrad_alt

The alternate tetradic colors (rectangle)

Note

Convenience method

Returns

Array of JsGouache.Color Objects

JsGouache. Color. analogous

The analogous colors

Note

Convenience method

Returns

Array of JsGouache.Color Objects

JsGouache. Color. analogic

The analogic colors

Note

Convenience method

Returns

Array of JsGouache.Color Objects

JsGouache. Color. hue_up

Up-shifted hue

Note

Convenience method

Parameters

cs(Integer) ColorScale range length (defaults to 360)

Returns

JsGouache.Color Object

JsGouache. Color. hue_dn

Down-shifted hue

Note

Convenience method

Parameters

cs(Integer) ColorScale range length (defaults to 360)

Returns

JsGouache.Color Object

JsGouache. Color. luminance_up

Up-shifted luminance

Note

Convenience method

Parameters

cs(Integer) ColorScale range length (defaults to 360)

Returns

JsGouache.Color Object

JsGouache. Color. luminance_dn

Down-shifted luminance

Note

Convenience method

Parameters

cs(Integer) ColorScale range length (defaults to 360)

Returns

JsGouache.Color Object

JsGouache. Color. saturation_up

Up-shifted Saturation

Note

Convenience method

Parameters

cs(Integer) ColorScale range length (defaults to 360)

Returns

JsGouache.Color Object

JsGouache. Color. saturation_dn

Down-shifted saturation

Note

Convenience method

Parameters

cs(Integer) ColorScale range length (defaults to 360)

Returns

JsGouache.Color Object

JsGouache. Color. to_css

Transforms color to a css string representation

Parameters

asRGB(Boolean) Pass true to get a string representation of RGB : rgb( ###, ###, ###) Returns:

CSS string representation of the color

JsGouache. Color. to_hex

Switch color space to Hexadeciaml

JsGouache. Color. to_rgb

Switch color space to RGB

JsGouache. Color. to_hsl

Switch color space to HSL

JsGouache. Color. is_websafe

Is the color ‘websafe’ ?

Returns

Boolean

JsGouache. Color. simulate

Color perception disability simulations.  Most of this is based on code from http://www.fx.clemson.edu/~rkarl/c2g.html Which in turn, is based on the H.  Brettel, F.  Vienot and J.  Mollon Algorithm.

Parameters

what(String or Integer) One of either: 0 or ‘protanopia’, 1 or ‘deuteranopia’, 2 or ‘tritanopia’, 3 or ‘achromatopsia’

Returns

JsGouache.Color Object

JsGouache. ColorScales

Generates RGB and HSL color scales (256 colors), returns an array of JsGouache.Color Objects

JsGouache. ColorAccessible

JsGouache. ColorAccessible. readability

Get the readability factor of two colors (foreground and background) According to current W3C Standards

Parameters

clr1(JsGouache.Color)
clr2(JsGouache.Color)

Returns

Object containing the perceived hue contrast and perceived brightness contrast for the supplied colors for each type of deficiency.  (The more trusted one being hue contrast)