Skip to main content
CESDK/Web/Configuration/Presets
Language:

Adding Color Palettes

The CreativeEditor SDK can be configured with a series of colors that can be directly used whenever a color needs to be chosen.

Explore a full code sample of the integration on CodeSandbox or view the code on GitHub.

By default, the CE.SDK ships with a predefined set of default colors:



Configuring a Custom Color Palette#

You can define your custom color palettes in the configuration under presets.colorPalettes. The keys of this object should be i18n localization keys and the contained items of the following structure:

  • meta: object describes the metadata of the preset item including whether it's the default item via default: true. Currently, CESDK only shows the default palette.
  • entries: array is a list of colors, specifying the available colors in the palette. Up to 8 colors can be shown at the top of the color picker. The colors can be declared in different ways:

Color Formats#

  • Hex: string
    Provide the color as a hexadecimal color value (RGB or RGBA) that starts with a '#'.
  • RGB: { r: number, g: number, b: number }
    Provide the color as red, blue, and green components in the [0-1] range.
  • RGBA: { r: number, g: number, b: number, a: number }
    Provide the color as red, blue, green, and alpha components in the [0-1] range.
File:
import 'https://cdn.img.ly/packages/imgly/cesdk-js/1.7.0/cesdk.umd.js';
let config = {
baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.7.0/assets',
presets: {
colorPalettes: {
rgb: {
meta: { default: true },
entries: [
'#FF0000',
{ r: 0.0, g: 1.0, b: 0.0 },
{ r: 0.0, g: 0.0, b: 1.0, a: 1.0 },
]
}
}
}
};
CreativeEditorSDK.init('#cesdk_container', config).then((instance) => {
/** do something with the instance of CreativeEditor SDK **/
});