Report an issue
Class

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

Properties

  • alpha : Number

    private

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

    Defaults to 1

  • blue : Number

    private

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

    Defaults to 0

  • green : Number

    private

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

    Defaults to 0

  • hue : Number

    private

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

    Used in HSL colors.

    Defaults to 0

  • initialColorCode : String

    private

    Initial color code provided to object constructor.

    Defaults to ''

  • isValidColor : Boolean

    private

    Whether valid color input was passed.

    Defaults to true

  • lightness : Number

    private

    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

  • red : Number

    private

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

    Defaults to 0

  • saturation : Number

    private

    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

  • type : Number

    private

    Original color type.

    Available types:

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

    Defaults to 0

Static properties

  • namedColors : Object

    static

    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'}

  • MAX_ALPHA_CHANNEL_VALUE : Number

    private readonly static

    The maximum value of alpha channel.

    Defaults to 1

  • MAX_HUE_CHANNEL_VALUE : Number

    private readonly static

    The maximum value of hue in HSL color format.

    Defaults to 360

  • MAX_RGB_CHANNEL_VALUE : Number

    private readonly static

    The maximum value of RGB channel.

    Defaults to 255

  • MAX_SATURATION_LIGHTNESS_CHANNEL_VALUE : Number

    private readonly static

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

    Defaults to 1

  • TYPE_HSL : Number

    private readonly static

    Indicates that the color is in HSL format.

    Defaults to 2

  • TYPE_RGB : Number

    private readonly static

    Indicates that the color is in RGB format.

    Defaults to 1

  • hex3CharsRegExp : RegExp

    private static

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

    Defaults to /#([0-9a-f]{3}$)/gim

  • hex4CharsRegExp : RegExp

    private static

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

    Defaults to /#([0-9a-f]{4}$)/gim

  • hex6CharsRegExp : RegExp

    private static

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

    Defaults to /#([0-9a-f]{6}$)/gim

  • hex8CharsRegExp : RegExp

    private static

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

    Defaults to /#([0-9a-f]{8}$)/gim

  • hslRegExp : RegExp

    private static

    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

  • rgbRegExp : RegExp

    private static

    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

    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 | *

    Gets hexadecimal color representation.

    Returns

    String | *

    Hexadecimal color code (e.g. #FF00FF) or default value.

  • getHexWithAlpha() → String | *

    Gets hexadecimal color representation with separate alpha channel.

    Returns

    String | *

    Hexadecimal color code (e.g. #FF00FF00) or default value.

  • getHsl() → String | *

    Gets HSL color representation.

    Returns

    String | *

    HSL color representation (e.g. hsl(360,100%,50%)) or default value.

  • getHsla() → String | *

    Gets HSLA color representation.

    Returns

    String | *

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

  • getInitialValue() → String

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

    Returns

    String

    Raw value passed during color object creation.

  • getRgb() → String | *

    Gets RGB color representation.

    Returns

    String | *

    RGB color representation (e.g. rgb(255,255,255)) or default value.

  • getRgba() → String | *

    Gets RGBA color representation.

    Returns

    String | *

    RGBA color representation (e.g. rgba(255,255,255,0)) or default value.

  • areColorChannelsValid( red, green, blue, alpha ) → Boolean

    private

    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
  • blendAlphaColor( red, green, blue, alpha ) → Array

    private

    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.

  • extractColorChannelsByPattern( value, regExp ) → Array | null

    private

    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.

  • extractColorChannelsFromHex( colorCode ) → Object | null

    private

    Extracts RGBA channels from given HEX string.

    Parameters

    colorCode : String

    HEX color representation.

    Returns

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

    private

    Extracts RGBA channels from given HSL or HSLA string.

    Parameters

    colorCode : String

    HSL or HSLA color representation.

    Returns

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

    private

    Extracts RGBA channels from given RGB or RGBA string.

    Parameters

    colorCode : String

    RGB or RGBA color representation.

    Returns

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

    private

    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).

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

    private

    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)).

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

    private

    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)).

  • hex3ToHex6( hex3ColorCode ) → String

    private

    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.

  • hex4ToHex8( hex4ColorCode ) → String

    private

    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.

  • hslToRgb( hue, saturation, lightness ) → Array

    private

    Converts HSL color channel values into RGB ones.

    Parameters

    hue : Number
    saturation : Number
    lightness : Number

    Returns

    Array

    Array of decimal RGB values.

  • matchStringToNamedColor( colorName ) → String | null

    private

    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.

  • parseInput( colorCode )

    private

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

    Parameters

    colorCode : String

    Color to parse.

  • rgbToHsl( red, green, blue ) → Array

    private

    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.