Color Palette

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

The CE.SDK can be configured with a series of colors that can be directly used whenever a color needs to be chosen. These color libraries need to be provided as asset sources - see our guide on Custom Color Libraries for more details on how this is achieved.

Configure library list

The list of libraries can be configured using the ui.colorLibraries key. Each asset source listed here will appear in the color picker, in the same order.
The pre-defined asset source 'ly.img.colors.defaultPalette' contains the default color palette. Use this source ID to re-position or remove the default color palette.
To replace it (like we do in this example), use the configuration keys ui.colorPalettes and ui.i18n to insert and label one (1) single new asset source.

    colorLibraries: ['myDefaultPalette'],
    i18n: {
      en: {
        'libraries.myDefaultPalette.label': 'My Default Palette'
      }
    },

Add custom library

Next, use the asset API to add the asset source, then populate it with your preferred colors. See our guide on Custom Color Libraries for more details.

// Add an asset source with your own colors:
instance.engine.asset.addLocalSource('myDefaultPalette');
instance.engine.asset.addAssetToSource('myDefaultPalette', {
  id: 'red',
  label: { en: 'red' },
  tags: { en: ['red'] },
  payload: {
    color: {
      colorSpace: 'sRGB',
      r: 1,
      g: 0,
      b: 0,
    },
  },
});

Full Code

Here’s the full code for configuring the default color palette:

import CreativeEditorSDK from 'https://cdn.img.ly/packages/imgly/cesdk-js/1.51.0/index.js';

const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  ui: {
    colorLibraries: ['myDefaultPalette'],
    i18n: {
      en: {
        'libraries.myDefaultPalette.label': 'My Default Palette',
      },
    },
    scale: 'normal',
    stylesheets: {
      /* ... */
    },
    elements: {
      /* ... */
    },
  },
  callbacks: { onUpload: 'local' }, // Enable local uploads in Asset Library.
};

CreativeEditorSDK.create('#cesdk_container', config).then(async instance => {
  // Do something with the instance of CreativeEditor SDK
  // Populate the asset library with default / demo asset sources.
  instance.addDefaultAssetSources();
  instance.addDemoAssetSources({ sceneMode: 'Design' });
  // Add an asset source with your own colors:
  instance.engine.asset.addLocalSource('myDefaultPalette');
  instance.engine.asset.addAssetToSource('myDefaultPalette', {
    id: 'red',
    label: { en: 'red' },
    tags: { en: ['red'] },
    payload: {
      color: {
        colorSpace: 'sRGB',
        r: 1,
        g: 0,
        b: 0,
      },
    },
  });
  await instance.createDesignScene();
});