Class: Color

Oracle® JavaScript Extension Toolkit (JET)
3.2.0

E87541-01

QuickNav

Fields

oj. Color

Version:
  • 3.2.0
Immutable object representing a color.

Constructor

new Color(color)

Creates an object representing a color. The color may be defined using the RGB, HSL, and HSV model values as an object, or as a CSS3 color specification string (refer to https://developer.mozilla.org/en-US/docs/Web/CSS/color_value, and also https://www.w3.org/TR/css3-color/#svg-color for color visualization. The CSS3 named colors are available as oj.Color constants (e.g. oj.Color.ALICEBLUE)
Parameters:
Name Type Description
color string | Object
  • A valid CSS3 color specification string (refer to https://developer.mozilla.org/en-US/docs/Web/CSS/color_value for syntax)
  • An object containing one of the following groups of fields:
    • r:   the red value
    • g:   the green value
    • b:   the blue value
    • a:   the alpha value (optional)

    • h:   the hue value
    • s:   the saturation value
    • l:   the luminosity or lightness value
    • a:   the alpha value (optional)

    • h:   the hue value
    • s:   the saturation value
    • v:   the value
    • a:   the alpha value (optional)
Source:
Throws:
if the color specification cannot be parsed correctly.
Type
Error
Examples

Typical color definitions

 oj.Color.RED;
 oj.Color.ALICEBLUE;
 new oj.Color({r:30, g:128, b:201});
 new oj.Color({r:30, g:128, b:201, a:0.8});
 new oj.Color({h:310, s:50, l:80});
 new oj.Color({h:310, s:50, l:80, a:0.8});
 new oj.Color({h:310, s:50, v:80});
 new oj.Color({h:310, s:50, v:80, a:0.8});
 new oj.Color('#4bc');
 new oj.Color('#44ccbb');
 new oj.Color('rgb(27,128,254)');
 new oj.Color('rgba(27,128,254,0.8)');
 new oj.Color('hsl(87, 100%,50%)');
 new oj.Color('hsla(87, 100%,50%, 0.5)');
 new oj.Color('hsv(0, 100%, 100%)') ;
 oj.Color.TRANSPARENT;

Using a converter to obtain a different color format

var cf       = oj.Validation.converterFactory(oj.ConverterFactory.CONVERTER_TYPE_COLOR);
var convHsl  = cf.createConverter({"format": "hsl"}) ;

var c        = new oj.Color('rgb(0, 191, 255)');
var s        = convHsl.format(c) ;            // returns "hsl(197, 71%, 73%)"


Fields

<static> ALICEBLUE :oj.Color

CSS3 color aliceblue
Source:

<static> ANTIQUEWHITE :oj.Color

CSS3 color antiquewhite
Source:

<static> AQUA :oj.Color

CSS3 color aqua
Source:

<static> AQUAMARINE :oj.Color

CSS3 color aquamarine
Source:

<static> AZURE :oj.Color

CSS3 color azure
Source:

<static> BEIGE :oj.Color

CSS3 color beige
Source:

<static> BISQUE :oj.Color

CSS3 color bisque
Source:

<static> BLACK :oj.Color

CSS3 color black
Source:

<static> BLANCHEDALMOND :oj.Color

CSS3 color blanchedalmond
Source:

<static> BLUE :oj.Color

CSS3 color blue
Source:

<static> BLUEVIOLET :oj.Color

CSS3 color blueviolet
Source:

<static> BROWN :oj.Color

CSS3 color brown
Source:

<static> BURLYWOOD :oj.Color

CSS3 color burlywood
Source:

<static> CADETBLUE :oj.Color

CSS3 color cadetblue
Source:

<static> CHARTREUSE :oj.Color

CSS3 color chartreuse
Source:

<static> CHOCOLATE :oj.Color

CSS3 color chocolate
Source:

<static> CORAL :oj.Color

CSS3 color coral
Source:

<static> CORNFLOWERBLUE :oj.Color

CSS3 color cornflowerblue
Source:

<static> CORNSILK :oj.Color

CSS3 color cornsilk
Source:

<static> CRIMSON :oj.Color

CSS3 color crimson
Source:

<static> CYAN :oj.Color

CSS3 color cyan
Source:

<static> DARKBLUE :oj.Color

CSS3 color darkblue
Source:

<static> DARKCYAN :oj.Color

CSS3 color darkcyan
Source:

<static> DARKGOLDENROD :oj.Color

CSS3 color darkgoldenrod
Source:

<static> DARKGRAY :oj.Color

CSS3 color darkgray
Source:

<static> DARKGREEN :oj.Color

CSS3 color darkgreen
Source:

<static> DARKGREY :oj.Color

CSS3 color darkgrey
Source:

<static> DARKKHAKI :oj.Color

CSS3 color darkkhaki
Source:

<static> DARKMAGENTA :oj.Color

CSS3 color darkmagenta
Source:

<static> DARKOLIVEGREEN :oj.Color

CSS3 color darkolivegreen
Source:

<static> DARKORANGE :oj.Color

CSS3 color darkorange
Source:

<static> DARKORCHID :oj.Color

CSS3 color darkorchid
Source:

<static> DARKRED :oj.Color

CSS3 color darkred
Source:

<static> DARKSALMON :oj.Color

CSS3 color darksalmon
Source:

<static> DARKSEAGREEN :oj.Color

CSS3 color darkseagreen
Source:

<static> DARKSLATEBLUE :oj.Color

CSS3 color darkslateblue
Source:

<static> DARKSLATEGRAY :oj.Color

CSS3 color darkslategray
Source:

<static> DARKSLATEGREY :oj.Color

CSS3 color darkslategrey
Source:

<static> DARKTURQUOISE :oj.Color

CSS3 color darkturquoise
Source:

<static> DARKVIOLET :oj.Color

CSS3 color darkviolet
Source:

<static> DEEPPINK :oj.Color

CSS3 color deeppink
Source:

<static> DEEPSKYBLUE :oj.Color

CSS3 color deepskyblue
Source:

<static> DIMGRAY :oj.Color

CSS3 color dimgray
Source:

<static> DIMGREY :oj.Color

CSS3 color dimgrey
Source:

<static> DODGERBLUE :oj.Color

CSS3 color dodgerblue
Source:

<static> FIREBRICK :oj.Color

CSS3 color firebrick
Source:

<static> FLORALWHITE :oj.Color

CSS3 color floralwhite
Source:

<static> FORESTGREEN :oj.Color

CSS3 color forestgreen
Source:

<static> FUCHSIA :oj.Color

CSS3 color fuchsia
Source:

<static> GAINSBORO :oj.Color

CSS3 color gainsboro
Source:

<static> GHOSTWHITE :oj.Color

CSS3 color ghostwhite
Source:

<static> GOLD :oj.Color

CSS3 color gold
Source:

<static> GOLDENROD :oj.Color

CSS3 color goldenrod
Source:

<static> GRAY :oj.Color

CSS3 color gray
Source:

<static> GREEN :oj.Color

CSS3 color green
Source:

<static> GREENYELLOW :oj.Color

CSS3 color greenyellow
Source:

<static> GREY :oj.Color

CSS3 color grey
Source:

<static> HONEYDEW :oj.Color

CSS3 color honeydew
Source:

<static> HOTPINK :oj.Color

CSS3 color hotpink
Source:

<static> INDIANRED :oj.Color

CSS3 color indianred
Source:

<static> INDIGO :oj.Color

CSS3 color indigo
Source:

<static> IVORY :oj.Color

CSS3 color ivory
Source:

<static> KHAKI :oj.Color

CSS3 color khaki
Source:

<static> LAVENDER :oj.Color

CSS3 color lavender
Source:

<static> LAVENDERBLUSH :oj.Color

CSS3 color lavenderblush
Source:

<static> LAWNGREEN :oj.Color

CSS3 color lawngreen
Source:

<static> LEMONCHIFFON :oj.Color

CSS3 color lemonchiffon
Source:

<static> LIGHTBLUE :oj.Color

CSS3 color lightblue
Source:

<static> LIGHTCORAL :oj.Color

CSS3 color lightcoral
Source:

<static> LIGHTCYAN :oj.Color

CSS3 color lightcyan
Source:

<static> LIGHTGOLDENRODYELLOW :oj.Color

CSS3 color lightgoldenrodyellow
Source:

<static> LIGHTGRAY :oj.Color

CSS3 color lightgray
Source:

<static> LIGHTGREEN :oj.Color

CSS3 color lightgreen
Source:

<static> LIGHTGREY :oj.Color

CSS3 color lightgrey
Source:

<static> LIGHTPINK :oj.Color

CSS3 color lightpink
Source:

<static> LIGHTSALMON :oj.Color

CSS3 color lightsalmon
Source:

<static> LIGHTSEAGREEN :oj.Color

CSS3 color lightseagreen
Source:

<static> LIGHTSKYBLUE :oj.Color

CSS3 color lightskyblue
Source:

<static> LIGHTSLATEGRAY :oj.Color

CSS3 color lightslategray
Source:

<static> LIGHTSLATEGREY :oj.Color

CSS3 color lightslategrey
Source:

<static> LIGHTSTEELBLUE :oj.Color

CSS3 color lightsteelblue
Source:

<static> LIGHTYELLOW :oj.Color

CSS3 color lightyellow
Source:

<static> LIME :oj.Color

CSS3 color lime
Source:

<static> LIMEGREEN :oj.Color

CSS3 color limegreen
Source:

<static> LINEN :oj.Color

CSS3 color linen
Source:

<static> MAGENTA :oj.Color

CSS3 color magenta
Source:

<static> MAROON :oj.Color

CSS3 color maroon
Source:

<static> MEDIUMAQUAMARINE :oj.Color

CSS3 color mediumaquamarine
Source:

<static> MEDIUMBLUE :oj.Color

CSS3 color mediumblue
Source:

<static> MEDIUMORCHID :oj.Color

CSS3 color mediumorchid
Source:

<static> MEDIUMPURPLE :oj.Color

CSS3 color mediumpurple
Source:

<static> MEDIUMSEAGREEN :oj.Color

CSS3 color mediumseagreen
Source:

<static> MEDIUMSLATEBLUE :oj.Color

CSS3 color mediumslateblue
Source:

<static> MEDIUMSPRINGGREEN :oj.Color

CSS3 color mediumspringgreen
Source:

<static> MEDIUMTURQUOISE :oj.Color

CSS3 color mediumturquoise
Source:

<static> MEDIUMVIOLETRED :oj.Color

CSS3 color mediumvioletred
Source:

<static> MIDNIGHTBLUE :oj.Color

CSS3 color midnightblue
Source:

<static> MINTCREAM :oj.Color

CSS3 color mintcream
Source:

<static> MISTYROSE :oj.Color

CSS3 color mistyrose
Source:

<static> MOCCASIN :oj.Color

CSS3 color moccasin
Source:
CSS3 color navajowhite
Source:
CSS3 color navy
Source:

<static> OLDLACE :oj.Color

CSS3 color oldlace
Source:

<static> OLIVE :oj.Color

CSS3 color olive
Source:

<static> OLIVEDRAB :oj.Color

CSS3 color olivedrab
Source:

<static> ORANGE :oj.Color

CSS3 color orange
Source:

<static> ORANGERED :oj.Color

CSS3 color orangered
Source:

<static> ORCHID :oj.Color

CSS3 color orchid
Source:

<static> PALEGOLDENROD :oj.Color

CSS3 color palegoldenrod
Source:

<static> PALEGREEN :oj.Color

CSS3 color palegreen
Source:

<static> PALETURQUOISE :oj.Color

CSS3 color paleturquoise
Source:

<static> PALEVIOLETRED :oj.Color

CSS3 color palevioletred
Source:

<static> PAPAYAWHIP :oj.Color

CSS3 color papayawhip
Source:

<static> PEACHPUFF :oj.Color

CSS3 color peachpuff
Source:

<static> PERU :oj.Color

CSS3 color peru
Source:

<static> PINK :oj.Color

CSS3 color pink
Source:

<static> PLUM :oj.Color

CSS3 color plum
Source:

<static> POWDERBLUE :oj.Color

CSS3 color powderblue
Source:

<static> PURPLE :oj.Color

CSS3 color purple
Source:

<static> REBECCAPURPLE :oj.Color

CSS3 color rebeccapurple
Source:

<static> RED :oj.Color

CSS3 color red
Source:

<static> ROSYBROWN :oj.Color

CSS3 color rosybrown
Source:

<static> ROYALBLUE :oj.Color

CSS3 color royalblue
Source:

<static> SADDLEBROWN :oj.Color

CSS3 color saddlebrown
Source:

<static> SALMON :oj.Color

CSS3 color salmon
Source:

<static> SANDYBROWN :oj.Color

CSS3 color sandybrown
Source:

<static> SEAGREEN :oj.Color

CSS3 color seagreen
Source:

<static> SEASHELL :oj.Color

CSS3 color seashell
Source:

<static> SIENNA :oj.Color

CSS3 color sienna
Source:

<static> SILVER :oj.Color

CSS3 color silver
Source:

<static> SKYBLUE :oj.Color

CSS3 color skyblue
Source:

<static> SLATEBLUE :oj.Color

CSS3 color slateblue
Source:

<static> SLATEGRAY :oj.Color

CSS3 color slategray
Source:

<static> SLATEGREY :oj.Color

CSS3 color slategrey
Source:

<static> SNOW :oj.Color

CSS3 color snow
Source:

<static> SPRINGGREEN :oj.Color

CSS3 color springgreen
Source:

<static> STEELBLUE :oj.Color

CSS3 color steelblue
Source:

<static> TAN :oj.Color

CSS3 color tan
Source:

<static> TEAL :oj.Color

CSS3 color teal
Source:

<static> THISTLE :oj.Color

CSS3 color thistle
Source:

<static> TOMATO :oj.Color

CSS3 color tomato
Source:

<static> TRANSPARENT :oj.Color

CSS3 color transparent
Source:

<static> TURQUOISE :oj.Color

CSS3 color turquoise
Source:

<static> VIOLET :oj.Color

CSS3 color violet
Source:

<static> WHEAT :oj.Color

CSS3 color wheat
Source:

<static> WHITE :oj.Color

CSS3 color white
Source:

<static> WHITESMOKE :oj.Color

CSS3 color whitesmoke
Source:

<static> YELLOW :oj.Color

CSS3 color yellow
Source:

<static> YELLOWGREEN :oj.Color

CSS3 color yellowgreen
Source:

Methods

getAlpha() → {number}

Returns the alpha channel of the color.
Source:
Returns:
The alpha channel value contained in [0,1].
Type
number

getBlue(doNotRound) → {number}

Returns the blue channel value of the color.
Parameters:
Name Type Argument Description
doNotRound boolean <optional>
Omit or set to false to return an integer value. Set to true to return the possible fractional value. (Fractional values for the red, green, or blue channels can arise when a color is defined using the "hsl" format.)
Source:
Returns:
The blue channel value contained in [0,255].
Type
number

getGreen(doNotRound) → {number}

Returns the green channel value of the color.
Parameters:
Name Type Argument Description
doNotRound boolean <optional>
Omit or set to false to return an integer value. Set to true to return the possible fractional value. (Fractional values for the red, green, or blue channels can arise when a color is defined using the "hsl" format.)
Source:
Returns:
The green channel value contained in [0,255].
Type
number

getRed(doNotRound) → {number}

Returns the red channel value of the color.
Parameters:
Name Type Argument Description
doNotRound boolean <optional>
Omit or set to false to return an integer value. Set to true to return the possible fractional value. (Fractional values for the red, green, or blue channels can arise when a color is defined using the "hsl" format.)
Source:
Returns:
The red channel value in the range [0,255].
Type
number

isEqual(color) → {boolean}

Compares this color object with the supplied color specification, and returns true if they represent the same color, else false.
Parameters:
Name Type Description
color oj.Color The color to be compared.
Source:
Returns:
Returns true if the comperand represents the same color.
Type
boolean

toString() → {string}

Returns the color as an "rgb" or rgba" (if the alpha value is less than 1) CSS3 color specification string.
Source:
Returns:
The color as an "rgb" or "rgba" CSS3 color specification string.
Type
string