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 )