Adding Color Libraries to the CreativeEditor SDK

In this example, we will show you how to configure the CreativeEditor SDK. CE.SDK has full support for custom color libraries. These appear in the color picker, and allow users to choose from pre-defined sets of colors to use in their design. They can include RGB colors, CMYK colors, and spot colors. They can be used to support your users with a variety of palettes, brand colors, or color books for printing. Note that many providers of color books (e.g. Pantone) require a license to use their data.

Explore a full code sample on Stackblitz or view the code on Github.

General Concept#

Color libraries are implemented as asset sources, containing individual colors as assets. Each color library is identified by a source ID, a unique string used when establishing and configuring the source.

Defining Colors#

To integrate colors into a library, we need to supply them in the shape of an AssetDefinition. For more details on the AssetDefinition type, please consult our Guide on integrating custom asset sources.

For colors, we are utilizing the payload key, providing an AssetColor to the AssetPayload.color property. In this example, we define one color for every type; see below for the applicable types:

`AssetRGBColor`#

Member	Type	Description
Member colorSpace	Type `'sRGB'`	Description
Member r, g, b, a	Type `number`	Description Red, green, blue, and alpha color channel components

`AssetCMYKColor`#

Member	Type	Description
Member colorSpace	Type `'CMYK'`	Description
Member c, m, y, k	Type `number`	Description Cyan, magenta, yellow, and black color channel components

`AssetSpotColor`#

Member	Type	Description
Member colorSpace	Type `'SpotColor'`	Description
Member name	Type `string`	Description Unique identifier of this spot color. Make sure this matches the standardized name of the spot color when using color books like those supplied by Pantone.
Member externalReference	Type `string`	Description Reference to the source of this spot color (e.g. name of color book), if applicable.
Member representation	Type `AssetRGBColor` \| `AssetCMYKColor`	Description Note that spot colors also require a CMYK or RGB color representation, which is used to display an approximate color on screen during editing.

In this example, we are defining one of each color type, and add them to a single library, for demonstration purposes. Although there is no technical requirement to do so, it is recommended to separate different color types (RGB, CMYK, Spot) into separate libraries, to avoid confusing users.

Configuration#

Labels#

To show the correct labels for your color library, provide a matching i18n key in your configuration. Color libraries use keys in the format libraries.<your-library-source-id>.label to look up the correct label.

Order#

Color libraries appear in the color picker in a specific order. To define this order, provide an array of source IDs to the ui.colorLibraries configuration key. The special source 'ly.img.colors.defaultPalette' is used to place the default palette (See: Configuring the Default Color Palette). If you want to hide this default palette, just remove the key from this array.

Adding the library#

After initializing the engine, use the Asset API to add a local asset source using addLocalSource. Afterwards, add colors to the new source using addAssetToSource. Make sure to use the same source ID as is referenced in the configuration. See also Local Asset Sources in our Guide on Integrating custom asset sources


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

const colors = [
  {
    id: 'RGB Murky Magenta',
    label: { en: 'RGB Murky Magenta' },
    tags: { en: ['RGB', 'Murky', 'Magenta'] },
    payload: {
      color: {
        colorSpace: 'sRGB',
        r: 0.65,
        g: 0.3,
        b: 0.65,
        a: 1
      }
    }
  },
  {
    id: 'Spot Goo Green',
    label: { en: 'Spot Goo Green' },
    tags: { en: ['Spot', 'Goo', 'Green'] },
    payload: {
      color: {
        colorSpace: 'SpotColor',
        name: 'Spot Goo Green',
        externalReference: 'My Spot Color Book',
        representation: {
          colorSpace: 'sRGB',
          r: 0.7,
          g: 0.98,
          b: 0.13,
          a: 1
        }
      }
    }
  },
  {
    id: 'CMYK Baby Blue',
    label: { en: 'CMYK Baby Blue' },
    tags: { en: ['CMYK', 'Baby', 'Blue'] },
    payload: {
      color: {
        colorSpace: 'CMYK',
        c: 0.5,
        m: 0,
        y: 0,
        k: 0
      }
    }
  }
];

const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  locale: 'en',
  i18n: {
    en: {
      'libraries.myCustomColors.label': 'Custom Color Library'
    }
  },
  ui: {
    colorLibraries: ['ly.img.colors.defaultPalette', 'myCustomColors'],
    elements: {
      view: 'default',
      panels: {
        settings: true
      }
    }
  }
};

CreativeEditorSDK.create('#cesdk_container', config).then(async (cesdk) => {
  cesdk.addDefaultAssetSources();
  cesdk.addDemoAssetSources();

  cesdk.engine.asset.addLocalSource('myCustomColors', ['text/plain']);
  for (const asset of colors) {
    cesdk.engine.asset.addAssetToSource('myCustomColors', asset);
  }

  cesdk.createDesignScene();
});