CKEDITOR.tools.color

class since 4.16.0

Class representing a color. Provides conversion between various color formats:

Named colors.
Hexadecimal format (with alpha support).
RGB and RGBA formats.
HSL and HSLA formats.

It can be used to validate and convert color between above formats.

var color = new CKEDITOR.tools.color( 'rgb( 225, 225, 225 )' );
console.log( color.getHex() ); // #FFFFFF

var color = new CKEDITOR.tools.color( 'red' );
console.log( color.getHexWithAlpha() ); // #FF0000FF

Filtering

Public
Inherited
Mixed
Protected
Private
Deprecated

Properties

private
alpha : Number

See source
Alpha channel value. Ranges between 0-1 (inclusive).

Defaults to 1
private
blue : Number

See source
Blue channel value. Ranges between 0-255 (inclusive).

Defaults to 0
private
green : Number

See source
Green channel value. Ranges between 0-255 (inclusive).

Defaults to 0
private
hue : Number

See source
Hue value. Ranges between 0-360 (inclusive).

Used in HSL colors.

Defaults to 0
private
initialColorCode : String

See source
Initial color code provided to object constructor.

Defaults to ''
private
isValidColor : Boolean

See source
Whether valid color input was passed.

Defaults to true
private
lightness : Number

See source
Lightness value. Ranges between 0-100 (inclusive).

The value of 0 means that the color will be black, while the value of 100 means that it will be white.

Used in HSL colors.

Defaults to 0
private
red : Number

See source
Red channel value. Ranges between 0-255 (inclusive).

Defaults to 0
private
saturation : Number

See source
Saturation value. Ranges between 0-100 (inclusive).

The value of 0 means that the color will be a shade of gray.

Used in HSL colors.

Defaults to 0

private
`type : Number`

See source

Original color type.

Available types:

+------+---------------+---------------------------------------+
| Type | Integer value |                Constant               |
+------+---------------+---------------------------------------+
|  RGB |       1       |                TYPE_RGB               |
+------+---------------+---------------------------------------+
|  HSL |       2       |                TYPE_HSL               |
+------+---------------+---------------------------------------+

Defaults to 0

Static properties

static
namedColors : Object

See source
Color list based on W3 named colors list.

Defaults to {aliceblue: '#F0F8FF', antiquewhite: '#FAEBD7', aqua: '#00FFFF', aquamarine: '#7FFFD4', azure: '#F0FFFF', beige: '#F5F5DC', bisque: '#FFE4C4', black: '#000000', blanchedalmond: '#FFEBCD', blue: '#0000FF', blueviolet: '#8A2BE2', brown: '#A52A2A', burlywood: '#DEB887', cadetblue: '#5F9EA0', chartreuse: '#7FFF00', chocolate: '#D2691E', coral: '#FF7F50', cornflowerblue: '#6495ED', cornsilk: '#FFF8DC', crimson: '#DC143C', cyan: '#00FFFF', darkblue: '#00008B', darkcyan: '#008B8B', darkgoldenrod: '#B8860B', darkgray: '#A9A9A9', darkgreen: '#006400', darkgrey: '#A9A9A9', darkkhaki: '#BDB76B', darkmagenta: '#8B008B', darkolivegreen: '#556B2F', darkorange: '#FF8C00', darkorchid: '#9932CC', darkred: '#8B0000', darksalmon: '#E9967A', darkseagreen: '#8FBC8F', darkslateblue: '#483D8B', darkslategray: '#2F4F4F', darkslategrey: '#2F4F4F', darkturquoise: '#00CED1', darkviolet: '#9400D3', deeppink: '#FF1493', deepskyblue: '#00BFFF', dimgray: '#696969', dimgrey: '#696969', dodgerblue: '#1E90FF', firebrick: '#B22222', floralwhite: '#FFFAF0', forestgreen: '#228B22', fuchsia: '#FF00FF', gainsboro: '#DCDCDC', ghostwhite: '#F8F8FF', gold: '#FFD700', goldenrod: '#DAA520', gray: '#808080', green: '#008000', greenyellow: '#ADFF2F', grey: '#808080', honeydew: '#F0FFF0', hotpink: '#FF69B4', indianred: '#CD5C5C', indigo: '#4B0082', ivory: '#FFFFF0', khaki: '#F0E68C', lavender: '#E6E6FA', lavenderblush: '#FFF0F5', lawngreen: '#7CFC00', lemonchiffon: '#FFFACD', lightblue: '#ADD8E6', lightcoral: '#F08080', lightcyan: '#E0FFFF', lightgoldenrodyellow: '#FAFAD2', lightgray: '#D3D3D3', lightgreen: '#90EE90', lightgrey: '#D3D3D3', lightpink: '#FFB6C1', lightsalmon: '#FFA07A', lightseagreen: '#20B2AA', lightskyblue: '#87CEFA', lightslategray: '#778899', lightslategrey: '#778899', lightsteelblue: '#B0C4DE', lightyellow: '#FFFFE0', lime: '#00FF00', limegreen: '#32CD32', linen: '#FAF0E6', magenta: '#FF00FF', maroon: '#800000', mediumaquamarine: '#66CDAA', mediumblue: '#0000CD', mediumorchid: '#BA55D3', mediumpurple: '#9370DB', mediumseagreen: '#3CB371', mediumslateblue: '#7B68EE', mediumspringgreen: '#00FA9A', mediumturquoise: '#48D1CC', mediumvioletred: '#C71585', midnightblue: '#191970', mintcream: '#F5FFFA', mistyrose: '#FFE4E1', moccasin: '#FFE4B5', navajowhite: '#FFDEAD', navy: '#000080', oldlace: '#FDF5E6', olive: '#808000', olivedrab: '#6B8E23', orange: '#FFA500', orangered: '#FF4500', orchid: '#DA70D6', palegoldenrod: '#EEE8AA', palegreen: '#98FB98', paleturquoise: '#AFEEEE', palevioletred: '#DB7093', papayawhip: '#FFEFD5', peachpuff: '#FFDAB9', peru: '#CD853F', pink: '#FFC0CB', plum: '#DDA0DD', powderblue: '#B0E0E6', purple: '#800080', rebeccapurple: '#663399', red: '#FF0000', rosybrown: '#BC8F8F', royalblue: '#4169E1', saddlebrown: '#8B4513', salmon: '#FA8072', sandybrown: '#F4A460', seagreen: '#2E8B57', seashell: '#FFF5EE', sienna: '#A0522D', silver: '#C0C0C0', skyblue: '#87CEEB', slateblue: '#6A5ACD', slategray: '#708090', slategrey: '#708090', snow: '#FFFAFA', springgreen: '#00FF7F', steelblue: '#4682B4', tan: '#D2B48C', teal: '#008080', thistle: '#D8BFD8', tomato: '#FF6347', turquoise: '#40E0D0', violet: '#EE82EE', windowtext: 'windowtext', wheat: '#F5DEB3', white: '#FFFFFF', whitesmoke: '#F5F5F5', yellow: '#FFFF00', yellowgreen: '#9ACD32'}
private readonly static
MAX_ALPHA_CHANNEL_VALUE : Number

See source
The maximum value of alpha channel.

Defaults to 1
private readonly static
MAX_HUE_CHANNEL_VALUE : Number

See source
The maximum value of hue in HSL color format.

Defaults to 360
private readonly static
MAX_RGB_CHANNEL_VALUE : Number

See source
The maximum value of RGB channel.

Defaults to 255
private readonly static
MAX_SATURATION_LIGHTNESS_CHANNEL_VALUE : Number

See source
The maximum value of saturation and lightness in HSL color format.

Defaults to 1
private readonly static
TYPE_HSL : Number

See source
Indicates that the color is in HSL format.

Defaults to 2
private readonly static
TYPE_RGB : Number

See source
Indicates that the color is in RGB format.

Defaults to 1
private static
hex3CharsRegExp : RegExp

See source
Regular expression to match hash (#) followed by three characters long hexadecimal color value.

Defaults to /#([0-9a-f]{3}$)/gim
private static
hex4CharsRegExp : RegExp

See source
Regular expression to match hash (#) followed by four characters long hexadecimal color value.

Defaults to /#([0-9a-f]{4}$)/gim
private static
hex6CharsRegExp : RegExp

See source
Regular expression to match hash (#) followed by six characters long hexadecimal color value.

Defaults to /#([0-9a-f]{6}$)/gim
private static
hex8CharsRegExp : RegExp

See source
Regular expression to match hash (#) followed by eight characters long hexadecimal color value.

Defaults to /#([0-9a-f]{8}$)/gim
private static
hslRegExp : RegExp

See source
Regular expression to extract numbers from HSL and HSLA color value.

Allowed prefix is hsl or hsla. After prefix are values in parentheses. Only dots, coma, digit and percent sign are allowed.

Defaults to /hsla?$(\s*(?:[.\d]+(?:deg)?)(?:\s*,?\s*[.\d]+%){2})((?:(?:\s*\/\s*)|(?:\s*,\s*))[\d.]+%?)?\s*$/i
private static
rgbRegExp : RegExp

See source
Regular expression to extract numbers from RGB and RGBA color value.

Allowed prefix is rgb or rgba. After prefix are values in parentheses. Only dots, coma, digit and percent sign are allowed.

Defaults to /rgba?$([.,\d\s%]*)(\s*\/\s*[\d.%]+)?\s*$/i

Methods

constructor( colorCode, defaultValue ) → color

See source
Creates CKEDITOR.tools.color class instance.

Parameters

colorCode : String

defaultValue : *

Value which will be returned by any getter if passed color code is not valid.

Returns

color
getHex() → String | *

See source
Gets hexadecimal color representation.

Returns

String | *

Hexadecimal color code (e.g. #FF00FF) or default value.
getHexWithAlpha() → String | *

See source
Gets hexadecimal color representation with separate alpha channel.

Returns

String | *

Hexadecimal color code (e.g. #FF00FF00) or default value.
getHsl() → String | *

See source
Gets HSL color representation.

Returns

String | *

HSL color representation (e.g. hsl(360,100%,50%)) or default value.
getHsla() → String | *

See source
Gets HSLA color representation.

Returns

String | *

HSLA color representation (e.g. hsla(360,100%,50%,0)) or default value.
getInitialValue() → String

See source
Gets raw value passed to the constructor during color object creation.

Returns

String

Raw value passed during color object creation.
getRgb() → String | *

See source
Gets RGB color representation.

Returns

String | *

RGB color representation (e.g. rgb(255,255,255)) or default value.
getRgba() → String | *

See source
Gets RGBA color representation.

Returns

String | *

RGBA color representation (e.g. rgba(255,255,255,0)) or default value.
private
areColorChannelsValid( red, green, blue, alpha ) → Boolean

See source
Validates whether red, green, blue and alpha color channels are within required range.

For red, green and blue channels range is 0 to MAX_RGB_CHANNEL_VALUE inclusive. For alpha channel range is 0 to MAX_ALPHA_CHANNEL_VALUE inclusive.

Parameters

red : Number

Red channel value.

green : Number

Green channel value.

blue : Number

Blue channel value.

alpha : Number

Alpha channel value.

Returns

Boolean
private
blendAlphaColor( red, green, blue, alpha ) → Array

See source
Blends alpha into RGB color channels. Assumes that background is white.

Parameters

red : Number

Red channel value.

green : Number

Green channel value.

blue : Number

Blue channel value.

alpha : Number

Alpha channel value.

Returns

Array

Array containing RGB channels with alpha mixed.
private
extractColorChannelsByPattern( value, regExp ) → Array | null

See source
Extracts color channels values based on provided regular expression.

Parameters

value : String

String tested with pattern.

regExp : RegExp

Regular expression pattern.

Returns

Array | null

Array with extracted values or null if value doesn't match regular expression.
private
extractColorChannelsFromHex( colorCode ) → Object | null

See source
Extracts RGBA channels from given HEX string.

Parameters

colorCode : String

HEX color representation.

Returns

Object | null
private
extractColorChannelsFromHsla( colorCode ) → Object | null

See source
Extracts RGBA channels from given HSL or HSLA string.

Parameters

colorCode : String

HSL or HSLA color representation.

Returns

Object | null
private
extractColorChannelsFromRgba( colorCode ) → Object | null

See source
Extracts RGBA channels from given RGB or RGBA string.

Parameters

colorCode : String

RGB or RGBA color representation.

Returns

Object | null
private
formatHexString( red, green, blue, [ alpha ] ) → String

See source
Returns color channels formatted as hexadecimal color code preceded by '#'.

Parameters

red : Number

Red channel value.

green : Number

Green channel value.

blue : Number

Blue channel value.

[ alpha ] : Number

Optional alpha channel value.

Returns

String

Formatted color value (e.g. #FF00FF or with alpha #FF00FF00).
private
formatHslString( hslPrefix, hue, saturation, lightness, [ alpha ] ) → String

See source
Returns color channels formatted as HSL or HSLA color code preceded by given prefix.

Parameters

hslPrefix : String

Color code prefix: hsl or hsla.

hue : Number

Hue channel value.

saturation : Number

Saturation channel value.

lightness : Number

Lightness channel value.

[ alpha ] : Number

Optional alpha channel value. Should be used with hsla prefix only to create valid color value.

Returns

String

Formatted color value (e.g. hsl(360,50%,50%) or hsla(360,50%,50%,1)).
private
formatRgbString( rgbPrefix, red, green, blue, [ alpha ] ) → String

See source
Returns color channels formatted as RGB or RGBA color code preceded by given prefix.

Parameters

rgbPrefix : String

Color code prefix: rgb or rgba.

red : Number

Red channel value.

green : Number

Green channel value.

blue : Number

Blue channel value.

[ alpha ] : Number

Optional alpha channel value. Should be used with rgba prefix only to create valid color value.

Returns

String

Formatted color value (e.g. rgb(255,255,255) or with alpha rgba(255,255,255,1)).
private
hex3ToHex6( hex3ColorCode ) → String

See source
Converts 3-characters hexadecimal color format to 6-characters one.

Parameters

hex3ColorCode : String

3-characters hexadecimal color, e.g. #F0F.

Returns

String

6-characters hexadecimal color e.g. #FF00FF.
private
hex4ToHex8( hex4ColorCode ) → String

See source
Converts 4-characters hexadecimal color format to 8-characters one.

Parameters

hex4ColorCode : String

4-characters hexadecimal color, e.g. #F0F0.

Returns

String

8-characters hexadecimal color e.g. #FF00FF00.
private
hslToRgb( hue, saturation, lightness ) → Array

See source
Converts HSL color channel values into RGB ones.

Parameters

hue : Number

saturation : Number

lightness : Number

Returns

Array

Array of decimal RGB values.
private
matchStringToNamedColor( colorName ) → String | null

See source
Returns hexadecimal color value from namedColors based on provided color name.

Parameters

colorName : String

color name, e.g. red.

Returns

String | null

Hexadecimal color representation or null if such named color does not exists.
private
parseInput( colorCode )

See source
Parses color code string trying to match it to any supported format and extract RGBA channels.

Parameters

colorCode : String

Color to parse.
private
rgbToHsl( red, green, blue ) → Array

See source
Converts RGB color channel values to HSL ones.

Parameters

red : Number

Number of red channel.

green : Number

Number of green channel.

blue : Number

Number of blue channel.

Returns

Array

Array of HSL values.

CKEDITOR.tools.color

Filtering

Properties

private alpha : NumberCKEDITOR.tools.color#alpha

private blue : NumberCKEDITOR.tools.color#blue

private green : NumberCKEDITOR.tools.color#green

private hue : NumberCKEDITOR.tools.color#hue

private initialColorCode : StringCKEDITOR.tools.color#initialColorCode

private isValidColor : BooleanCKEDITOR.tools.color#isValidColor

private lightness : NumberCKEDITOR.tools.color#lightness

private red : NumberCKEDITOR.tools.color#red

private saturation : NumberCKEDITOR.tools.color#saturation

private type : NumberCKEDITOR.tools.color#type

Static properties

static namedColors : ObjectCKEDITOR.tools.color#namedColors

private readonly static MAX_ALPHA_CHANNEL_VALUE : NumberCKEDITOR.tools.color#MAX_ALPHA_CHANNEL_VALUE

private readonly static MAX_HUE_CHANNEL_VALUE : NumberCKEDITOR.tools.color#MAX_HUE_CHANNEL_VALUE

private readonly static MAX_RGB_CHANNEL_VALUE : NumberCKEDITOR.tools.color#MAX_RGB_CHANNEL_VALUE

private readonly static MAX_SATURATION_LIGHTNESS_CHANNEL_VALUE : NumberCKEDITOR.tools.color#MAX_SATURATION_LIGHTNESS_CHANNEL_VALUE

private readonly static TYPE_HSL : NumberCKEDITOR.tools.color#TYPE_HSL

private readonly static TYPE_RGB : NumberCKEDITOR.tools.color#TYPE_RGB

private static hex3CharsRegExp : RegExpCKEDITOR.tools.color#hex3CharsRegExp

private static hex4CharsRegExp : RegExpCKEDITOR.tools.color#hex4CharsRegExp

private static hex6CharsRegExp : RegExpCKEDITOR.tools.color#hex6CharsRegExp

private static hex8CharsRegExp : RegExpCKEDITOR.tools.color#hex8CharsRegExp

private static hslRegExp : RegExpCKEDITOR.tools.color#hslRegExp

private static rgbRegExp : RegExpCKEDITOR.tools.color#rgbRegExp

Methods

constructor( colorCode, defaultValue ) → colorCKEDITOR.tools.color#constructor

Parameters

Returns

getHex() → String | *CKEDITOR.tools.color#getHex

Returns

getHexWithAlpha() → String | *CKEDITOR.tools.color#getHexWithAlpha

Returns

getHsl() → String | *CKEDITOR.tools.color#getHsl

Returns

getHsla() → String | *CKEDITOR.tools.color#getHsla

Returns

getInitialValue() → StringCKEDITOR.tools.color#getInitialValue

Returns

getRgb() → String | *CKEDITOR.tools.color#getRgb

Returns

getRgba() → String | *CKEDITOR.tools.color#getRgba

Returns

private areColorChannelsValid( red, green, blue, alpha ) → BooleanCKEDITOR.tools.color#areColorChannelsValid

Parameters

Returns

private blendAlphaColor( red, green, blue, alpha ) → ArrayCKEDITOR.tools.color#blendAlphaColor

Parameters

Returns

private extractColorChannelsByPattern( value, regExp ) → Array | nullCKEDITOR.tools.color#extractColorChannelsByPattern

Parameters

Returns

private extractColorChannelsFromHex( colorCode ) → Object | nullCKEDITOR.tools.color#extractColorChannelsFromHex

Parameters

Returns

private extractColorChannelsFromHsla( colorCode ) → Object | nullCKEDITOR.tools.color#extractColorChannelsFromHsla

Parameters

Returns

private extractColorChannelsFromRgba( colorCode ) → Object | nullCKEDITOR.tools.color#extractColorChannelsFromRgba

Parameters

Returns

private formatHexString( red, green, blue, [ alpha ] ) → StringCKEDITOR.tools.color#formatHexString

Parameters

Returns

private formatHslString( hslPrefix, hue, saturation, lightness, [ alpha ] ) → StringCKEDITOR.tools.color#formatHslString

Parameters

Returns

private formatRgbString( rgbPrefix, red, green, blue, [ alpha ] ) → StringCKEDITOR.tools.color#formatRgbString

Parameters

Returns

private hex3ToHex6( hex3ColorCode ) → StringCKEDITOR.tools.color#hex3ToHex6

Parameters

Returns

private hex4ToHex8( hex4ColorCode ) → StringCKEDITOR.tools.color#hex4ToHex8

Parameters

Returns

private hslToRgb( hue, saturation, lightness ) → ArrayCKEDITOR.tools.color#hslToRgb

Parameters

private
`alpha : Number`

private
`blue : Number`

private
`green : Number`

private
`hue : Number`

private
`initialColorCode : String`

private
`isValidColor : Boolean`

private
`lightness : Number`

private
`red : Number`

private
`saturation : Number`

private
`type : Number`

static
`namedColors : Object`

private readonly static
`MAX_ALPHA_CHANNEL_VALUE : Number`

private readonly static
`MAX_HUE_CHANNEL_VALUE : Number`

private readonly static
`MAX_RGB_CHANNEL_VALUE : Number`

private readonly static
`MAX_SATURATION_LIGHTNESS_CHANNEL_VALUE : Number`

private readonly static
`TYPE_HSL : Number`

private readonly static
`TYPE_RGB : Number`

private static
`hex3CharsRegExp : RegExp`

private static
`hex4CharsRegExp : RegExp`

private static
`hex6CharsRegExp : RegExp`

private static
`hex8CharsRegExp : RegExp`

private static
`hslRegExp : RegExp`

private static
`rgbRegExp : RegExp`

`constructor( colorCode, defaultValue ) → color`

`getHex() → String | *`

`getHexWithAlpha() → String | *`

`getHsl() → String | *`

`getHsla() → String | *`

`getInitialValue() → String`

`getRgb() → String | *`

`getRgba() → String | *`

private
`areColorChannelsValid( red, green, blue, alpha ) → Boolean`

private
`blendAlphaColor( red, green, blue, alpha ) → Array`

private
`extractColorChannelsByPattern( value, regExp ) → Array | null`

private
`extractColorChannelsFromHex( colorCode ) → Object | null`

private
`extractColorChannelsFromHsla( colorCode ) → Object | null`

private
`extractColorChannelsFromRgba( colorCode ) → Object | null`

private
`formatHexString( red, green, blue, [ alpha ] ) → String`

private
`formatHslString( hslPrefix, hue, saturation, lightness, [ alpha ] ) → String`

private
`formatRgbString( rgbPrefix, red, green, blue, [ alpha ] ) → String`

private
`hex3ToHex6( hex3ColorCode ) → String`

private
`hex4ToHex8( hex4ColorCode ) → String`

private
`hslToRgb( hue, saturation, lightness ) → Array`

private
`matchStringToNamedColor( colorName ) → String | null`

private
`parseInput( colorCode )`

private
`rgbToHsl( red, green, blue ) → Array`