CKEDITOR.tools.color

classsince 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

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

privatealpha : NumberCKEDITOR.tools.color#alpha

privateblue : NumberCKEDITOR.tools.color#blue

privategreen : NumberCKEDITOR.tools.color#green

privatehue : NumberCKEDITOR.tools.color#hue

privateinitialColorCode : StringCKEDITOR.tools.color#initialColorCode

privateisValidColor : BooleanCKEDITOR.tools.color#isValidColor

privatelightness : NumberCKEDITOR.tools.color#lightness

privatered : NumberCKEDITOR.tools.color#red

privatesaturation : NumberCKEDITOR.tools.color#saturation

privatetype : NumberCKEDITOR.tools.color#type

Static properties

staticnamedColors : ObjectCKEDITOR.tools.color#namedColors

private readonly staticMAX_ALPHA_CHANNEL_VALUE : NumberCKEDITOR.tools.color#MAX_ALPHA_CHANNEL_VALUE

private readonly staticMAX_HUE_CHANNEL_VALUE : NumberCKEDITOR.tools.color#MAX_HUE_CHANNEL_VALUE

private readonly staticMAX_RGB_CHANNEL_VALUE : NumberCKEDITOR.tools.color#MAX_RGB_CHANNEL_VALUE

private readonly staticMAX_SATURATION_LIGHTNESS_CHANNEL_VALUE : NumberCKEDITOR.tools.color#MAX_SATURATION_LIGHTNESS_CHANNEL_VALUE

private readonly staticTYPE_HSL : NumberCKEDITOR.tools.color#TYPE_HSL

private readonly staticTYPE_RGB : NumberCKEDITOR.tools.color#TYPE_RGB

private statichex3CharsRegExp : RegExpCKEDITOR.tools.color#hex3CharsRegExp

private statichex4CharsRegExp : RegExpCKEDITOR.tools.color#hex4CharsRegExp

private statichex6CharsRegExp : RegExpCKEDITOR.tools.color#hex6CharsRegExp

private statichex8CharsRegExp : RegExpCKEDITOR.tools.color#hex8CharsRegExp

private statichslRegExp : RegExpCKEDITOR.tools.color#hslRegExp

private staticrgbRegExp : 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

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

Parameters

Returns

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

Parameters

Returns

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

Parameters

Returns

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

Parameters

Returns

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

Parameters

Returns

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

Parameters

Returns

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

Parameters

Returns

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

Parameters

Returns

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

Parameters

Returns

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

Parameters

Returns

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

Parameters

Returns

privatehslToRgb( 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`