Color Palette - Angular

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 cesdk.ui.updateAssetLibraryEntry('ly.img.colors', { sourceIds: [...] }). 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), create your custom asset source and update the entry to use it.

cesdk.ui.updateAssetLibraryEntry('ly.img.colors', {
  sourceIds: ['myDefaultPalette']
});

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:
cesdk.engine.asset.addLocalSource('myDefaultPalette');
cesdk.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.62.0/index.js';

const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  ui: {
    stylesheets: {
      /* ... */
    },
    elements: {
      /* ... */
    }
  }
};

CreativeEditorSDK.create('#cesdk_container', config).then(async (cesdk) => {
  // Set the UI scale using the new API method
  cesdk.ui.setScale('normal');

  cesdk.i18n.setTranslations({
    en: {
      'libraries.myDefaultPalette.label': 'My Default Palette'
    }
  });

  // Do something with the instance of CreativeEditor SDK
  // Populate the asset library with default / demo asset sources.
  cesdk.addDefaultAssetSources();
  cesdk.addDemoAssetSources({
    sceneMode: 'Design',
    withUploadAssetSources: true
  });

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

  // Configure the color library to use our custom palette
  cesdk.ui.updateAssetLibraryEntry('ly.img.colors', {
    sourceIds: ['myDefaultPalette']
  });

  await cesdk.createDesignScene();
});