UIZE JavaScript Framework

MODULES Uize.Color.xHsv

1. Introduction

The Uize.Color.xHsv module extends the Uize.Color object by adding a profile for the HSV color space, and by providing encodings for this color space.

DEVELOPERS: Chris van Rensburg

The Uize.Color.colorSpaces.HSV property - defined in this extension - provides a profile for the HSV (Hue, Saturation, Value) color space. The HSV color space is essentially an alternate representation / mapping of the sRGB color space, but might be considered to be a more intuitive representation of the qualities of color.

1.1. Examples

The following example pages are good showcases for the Uize.Color.xHsv module...

Color Format Converter - Easily convert color values from one format to another. Convert between RGB hex, RGB tuple string, HSL, HSV, CMYK, and SVG color names.

SEARCH FOR EXAMPLES

Use the link below to search for example pages on the UIZE Web site that reference the Uize.Color.xHsv module...

SEARCH

1.2. Implementation Info

The Uize.Color.xHsv module defines the Uize.Color.xHsv extension module under the Uize.Color namespace.

1.2.1. Features Introduced in This Module

The features listed in this section have been introduced in this module.

STATIC PROPERTIES

Uize.Color.xHsv.moduleName | Uize.Color.xHsv.pathToResources

1.2.2. Features Overridden in This Module

No features have been overridden in this module.

1.2.3. Features Inherited From Other Modules

This module has no inherited features.

1.2.4. Modules Directly Under This Namespace

There are no modules directly under this namespace.

1.2.5. Unit Tests

There is no dedicated unit tests module for the Uize.Color.xHsv module.

2. Color Encodings

The Uize.Color.xHsv extension implements support for the following color encodings / formats...

2.1. HSV array

An array, containing three elements for hue, saturation, and value components of the color, whose values may be floating point numbers (e.g. the color chartreuse is encoded as [90,100,100]).

SYNTAX

[ hue0to360FLOAT, saturation0to100FLOAT, value0to100FLOAT ]

2.1.1. Encoding

When a color is encoded as HSV array, the resulting array is made up of three number type elements that represent the values of the source color's hue, saturation, and value components, respectively.

EXAMPLES
COLOR NAME HSV array
fuchsia [300,100,100]
yellow [60,100,100]
blue [240,100,100]
white [0,0,100]

2.1.2. Decoding

When a color is decoded from HSV array, the values of the array's three elements may be numbers, strings, or any object that implements a valueOf interface (such as an instance of a Uize.Class subclass that implements the value state property).

The values will be coerced to number type by invoking the valueOf Intrinsic Method.

EXAMPLES

[300,100,100]         // fuchsia
['300','100','100']   // fuchsia
[hueSlider,saturationSlider,valueSlider]

NOTES

string values for the saturation and value components in the array may not contain a "%" (percent) suffix

2.2. HSV object

An object, containing hue, saturation, and value properties, whose values may be floating point numbers (e.g. the color chartreuse is encoded as {hue:90,saturation:100,value:100}).

SYNTAX

{ hue:hue0to360FLOAT, saturation:saturation0to100FLOAT, value:value0to100FLOAT }

2.2.1. Encoding

When a color is encoded as HSV object, the resulting object will contain the three number type properties hue, saturation, and value, reflecting the values of the source color's hue, saturation, and value.

EXAMPLES
COLOR NAME HSV object
fuchsia {hue:300,saturation:100,value:100}
yellow {hue:60,saturation:100,value:100}
blue {hue:240,saturation:100,value:100}
white {hue:0,saturation:0,value:100}

2.2.2. Decoding

When a color is decoded from HSV object, the values of the object's hue, saturation, and value properties may be numbers, strings, or any object that implements a valueOf interface (such as an instance of a Uize.Class subclass that implements the value state property).

The values will be coerced to number type by invoking the valueOf Intrinsic Method.

EXAMPLES

{hue:300,saturation:100,value:100}         // fuchsia
{hue:'300',saturation:'100',value:'100'}   // fuchsia
{hue:hueSlider,saturation:saturationSlider,value:valueSlider}

NOTES

string values for the saturation and value properties of the object may not contain a "%" (percent) suffix

2.3. HSV string

An Hsv(...) formatted 3-tuple string (e.g. the color chartreuse is encoded as 'hsv(90,100%,100%)').

SYNTAX

hsv([hue0to360],[saturation0to100]%,[value0to100]%)

2.3.1. Encoding

When a color is encoded as HSV string, the resulting string will always be all lowercase, without any spaces.

Furthermore, the values for hue, saturation, and value will be rounded to the nearest integer, the value for hue will be constrained to the range of 0 to 360, and the values for saturation and value will be constrained to a range of 0 to 100 and a "%" (percent symbol) character will be appended to each.

EXAMPLES
COLOR NAME HSV string
fuchsia hsv(300,100%,100%)
yellow hsv(60,100%,100%)
blue hsv(240,100%,100%)
white hsv(0,0%,100%)

NOTES

because encoding as HSV string rounds the values for hue, saturation, and value, colors encoded as HSV string may not produce exactly the same original color when decoding the encoded HSV string

2.3.2. Decoding

When a color is decoded from HSV string, the string may contain separating spaces, may be in upper, lower, or mixed case (i.e. not case sensitive), and the "%" (percent symbol) character for the saturation and value values may be omitted.

FUCHSIA

hsv(300,100,100)
hsv(300,100%,100%)
HSV(300,100%,100%)
Hsv (300, 100%, 100%)
HSV ( 300 , 100% , 100% )
Hsv ( 300 , 100 , 100 )

3. Static Properties

3.1. Uize.Color.xHsv.moduleName

IMPLEMENTATION INFO

this feature was introduced in this module

3.2. Uize.Color.xHsv.pathToResources

IMPLEMENTATION INFO

this feature was introduced in this module