Namespace fiveui.color

Defined in: prelude.js.

Namespace Summary
Constructor Attributes	Constructor Name and Description
	fiveui.color Utilities for dealing with color.

Method Summary
Method Attributes	Method Name and Description
<static>	fiveui.color.alphaCombine(top, bot) Combines two colors, accounting for alpha values less than 1.
<static>	fiveui.color.colorCheck(selector, colorSet) Color check compiler.
<static>	fiveui.color.colorToHex(color) Covert rgb colors to hex and abreviated hex colors to their full 3 byte and uppercase normal form.
<static>	fiveui.color.colorToHexWithDefault(color) Attemps to convert a given string to a hexadecimal color code.
<static>	fiveui.color.colorToRGB(color) Covert color to RGB color object.
<static>	fiveui.color.contrast(lum1, lum2) Compute the contrast ratio, according to {@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef WCAG 2.0}
<static>	fiveui.color.findBGColor(A) Computationally determine the actual displayed background color for an object.
<static>	fiveui.color.hexToRGB(color) Convert a 3-byte hex value to base-10 RGB Given a hexadecimal color code as a string, returns an object with `r`, `g`, and `b` properties that give the red, green, and blue components of the color.
<static>	fiveui.color.luminance(An) Calculate the relative {@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef luminance} of an sRGB color.
<static>	fiveui.color.rgbToHex(red, green, blue) Convert RGB values to Hex.

Namespace Detail

fiveui.color

Utilities for dealing with color.

Method Detail

<static> {color} fiveui.color.alphaCombine(top, bot)

Combines two colors, accounting for alpha values less than 1.

Both colors must specify an alpha value in addition to red, green, and blue components. Colors are given as objects with `r`, `g`, `b`, and `a` properties.

var combined = fiveui.color.alphaCombine(
    { r: 152, g: 188, b: 75,  a: 0.8 },
    { r: 136, g: 226, b: 202, a: 0.8 }
);

combined //> { r: 143, g: 186, b: 92, a: 0.96 }

Parameters:
{color} top: The color "on top"
{color} bot: The color "on bottom"

Returns:: {color} the composite RGBA color.

<static> {!function()} fiveui.color.colorCheck(selector, colorSet)

Color check compiler. It is recommended to use the jQuery plugin fiveui.jquery.cssIsNot instead.

Parameters:
{!string} selector: The HTML element selector to check.
{string[]} colorSet: An array of strings containing the HEX values of colors in the desired color set.

Returns:: {!function()} A function which checks the rule

See:: fiveui.jquery.cssIsNot

<static> {!string} fiveui.color.colorToHex(color)

Covert rgb colors to hex and abreviated hex colors to their full 3 byte and uppercase normal form.

Throws an error if the given color cannot be parsed.

fiveui.color.colorToHex('#ffffff') === "#FFFFFF"
fiveui.color.colorToHex('#fff') === "#FFFFFF"
fiveui.color.colorToHex('rgb(255, 255, 255)') === "#FFFFFF"
fiveui.color.colorToHex('rgba(255, 255, 255)') === "#FFFFFF"

Parameters:
{!string} color: The color string to convert. This should be either of the form rgb(...) or #...

Throws:
{ParseError}: if the rgb color string cannot be parsed

Returns:: {!string} The color string in #XXXXXX form

<static> {!string} fiveui.color.colorToHexWithDefault(color)

Attemps to convert a given string to a hexadecimal color code.

Behaves like fiveui.color.colorToHex - except that in case there are parse errors during the conversion, i.e. color values that are not understood, the input is returned unchanged.

Parameters:
{!string} color: The color string to convert. This should be either of the form rgb(...) or #...

Returns:: {!string} The color string in #XXXXXX form

<static> {!Object} fiveui.color.colorToRGB(color)

Covert color to RGB color object.

fiveui.color.colorToRGB('#ffffff') //> { r: 255, g: 255, b: 255 }
fiveui.color.colorToRGB('#fff') //> { r: 255, g: 255, b: 255 }
fiveui.color.colorToRGB('rgb(255, 255, 255)') //> { r: 255, g: 255, b: 255 }
fiveui.color.colorToRGB('rgba(255, 255, 255)') //> { r: 255, g: 255, b: 255 }

Parameters:
{!string} color: The color string to convert. This should be either of the form rgb(...) or #...

Throws:
{ParseError}: if the rgb color string cannot be parsed

Returns:: {!Object} An RGB color object with attributes: r, g, b, a

<static> {!double} fiveui.color.contrast(lum1, lum2)

Compute the contrast ratio, according to {@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef WCAG 2.0}

var color_a = fiveui.color.colorToRGB('#98BC4B');
var color_b = fiveui.color.colorToRGB('#88E2CA');

var contrast = fiveui.color.contrast(
    fiveui.color.luminance(color_a),
    fiveui.color.luminance(color_b)
);

contrast === 1.4307674054056414

Parameters:
{!double} lum1: The relative luminance of the first color.
{!double} lum2: The relative luminance of the second color.

Returns:: {!double} The contrast ratio.

<static> {color} fiveui.color.findBGColor(A)

Computationally determine the actual displayed background color for an object. This accounts for parent colors that may appear when a bg color is unspecified, or fully transparent.

It does not account for elements that are shifted out of their parent containers.

var sidebar = $('div.sidebar');
fiveui.color.findBGColor(sidebar) //> { r: 136, g: 226, b: 202 }

Parameters:
{!Object} A: jquery object.

Returns:: {color} an RGB color object. (no alpha - this does not return transparent colors)

<static> {color} fiveui.color.hexToRGB(color)

Convert a 3-byte hex value to base-10 RGB

Given a hexadecimal color code as a string, returns an object with `r`, `g`, and `b` properties that give the red, green, and blue components of the color.

fiveui.color.hexToRGB('#ffffff') //> { r: 255, g: 255, b: 255 }
fiveui.color.hexToRGB('ffffff') //> { r: 255, g: 255, b: 255 }

Parameters:
{!string} color

Returns:: {color}

<static> {!doubl} fiveui.color.luminance(An)

Calculate the relative {@link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef luminance} of an sRGB color.

This function does not account for alpha values that are not 1. That is, it assumes that the incomming color is fully opaque, or displayed on a white background.

fiveui.color.luminance({ r: 255, g: 255, b: 255 }) === 1

Parameters:
{!Object} An: RGB color object with attributes: r, g, b, a

Returns:: {!doubl} A measure of the relative luminance according to the WCAG 2.0 specification.

<static> {!string} fiveui.color.rgbToHex(red, green, blue)

Convert RGB values to Hex.

Accepts three arguments representing red, green, and blue color components. Returns a hexadecimal representation of the corresponding color.

fiveui.color.rgbToHex(255, 255, 255) === '#FFFFFF'

Parameters:
{!number} red
{!number} green
{!number} blue

Returns:: {!string}

Open Source

Classes

Namespace fiveui.color