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.
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.
To integrate colors into a library, we need to supply them in the shape of an
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:
Memberr, g, b, a
DescriptionRed, green, blue, and alpha color channel components
Memberc, m, y, k
DescriptionCyan, magenta, yellow, and black color channel components
DescriptionUnique 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.
DescriptionReference to the source of this spot color (e.g. name of color book), if applicable.
DescriptionNote 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.
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.
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