Color

In this example, we will show you how to use the CreativeEditor SDK's CreativeEngine to modify a fill block's solid color through the block API.

Setup#

This example uses the headless CreativeEngine. See the Setup article for a detailed guide. To get started right away, you can also access the block API within a running CE.SDK instance via cesdk.engine.block. Check out the APIs Overview to see that illustrated in more detail.

JavaScript


setColor(id: DesignBlockId, property: string, value: Color): void

Set a color property of the given design block to the given value.

id: The block whose property should be set.
property: The name of the property to set.
value: The value to set.

JavaScript


getColor(id: DesignBlockId, property: string): Color

Get the value of a color property of the given design block.

id: The block whose property should be queried.
property: The name of the property to query.
Returns The value of the property.


// Create a new fill block and assign it to an existing block.
const solidColor = engine.block.createFill('color');
engine.block.setFill(block, solidColor);
engine.block.setFillEnabled(block, true);
// Create a few colors using different color spaces: sRGB, CMYK and spot.
const rgbaBlack = { r: 0, g: 0, b: 0, a: 1 };
const cmykRed = { c: 0, m: 1, y: 1, k: 0, tint: 1 };
engine.editor.setSpotColorRGB('Yellow', 1, 1, 0);
engine.editor.setSpotColorCMYK('Yellow', 0, 0, 1, 0);
const spotPartialYellow = { name: 'Yellow', tint: 0.5, externalReference: '' };
// Assign the various colors to the fill block.
engine.block.setColor(solidColor, 'fill/color/value', rgbaBlack);
engine.block.setColor(solidColor, 'fill/color/value', cmykRed);
engine.block.setColor(solidColor, 'fill/color/value', spotPartialYellow);
// Retrieve the last set color.
const currentColor = engine.block.getColor(block, 'fill/color/value');