Open Source

Class Index | File Index

Classes


Namespace fiveui.color


Defined in: prelude.js.

Namespace Summary
Constructor Attributes Constructor Name and Description
 

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}