Using Spot Colors

Other than specifying a color by its RGBA components, you can also use a spot color to specify the color of a block's solid fill, stroke or background. Spot colors are useful for special printers or other devices that understand how to use them. When exporting a scene to a PDF file, spot colors will be saved as a Separation Color Space.

A spot color is defined by its name and an associated RGB approximation. You manage the list of defined spot colors at the editor level. You can:

list the defined spot colors.
define a new a spot color with a name and its RGB approximation.
re-define an existing spot color's RGB approximation.
retrieve the RGB approximation of a defined spot color.
undefine a spot color.

Warning#

When saving a scene to file, spot colors are not serialized. You should define them again when loading a scene containing blocks that use spot colors.

To set a block's color, you use the name of a defined spot color to refer to. You can optionally specify a tint value, between 0.0 and 1.0. The tint value defaults to 1.0. When rendered to screen, the RGB approximation of that spot color will be used and the tint will act as an alpha component. Multiple blocks and their properties can refer to the same spot color and each can have a specific tint. The following block color properties can be set to a spot color:

'fill/solid/color'
'stroke/color'
'backgroundColor/color'

Warning#

If a block's color property refers to an undefined spot color, the default color magenta with an RGB approximation of `(1, 0, 1)` will be used.

Explore a full code sample of the integration on CodeSandbox or view the code on GitHub

Setup the scene#

We first create a new scene with a star shape and a text element.

Create spot colors#

Here we define a few new spot colors and list them.

Applying spot colors to a shape#

We can use the defined spot colors to color certain properties of a shape. Here we apply it to 'fill/solid/color' and 'stroke/color'. We apply a specific tint value to the stroke. The fill color's tint will default to 100%.

We also read back the spot color name and tint of the color properties we've just set.

Applying spot colors to a text block#

We can use the defined spot colors to color certain properties of a text block. Here we apply it to 'fill/solid/color', 'stroke/color' and 'backgroundColor/color'.

Redefine a spot color#

We can re-define the RGB approximation of an already defined spot color. Doing so will change the rendered color of the blocks. We change it for 'Yellow'. The properties that have 'Yellow' as their spot color will change when re-rendered.

Removing the definition of a spot color#

We can undefine a spot color. Doing so will make all the properties still referring to that spot color ('Yellow' in this case) use the default magenta RGB approximation.

File:

import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.16.1/index.js';

const config = {
  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.16.1/assets'
};

CreativeEngine.init(config).then(async (engine) => {
  document.getElementById('cesdk_container').append(engine.element);

  const scene = engine.scene.create();

  const page = engine.block.create('page');
  engine.block.setWidth(page, 800);
  engine.block.setHeight(page, 600);
  engine.block.appendChild(scene, page);

  engine.scene.zoomToBlock(page, 40, 40, 40, 40);

  const text = engine.block.create("text");
  engine.block.setPositionX(text, 350);
  engine.block.setPositionY(text, 100);

  const star = engine.block.create('shapes/star');
  engine.block.setPositionX(star, 350);
  engine.block.setPositionY(star, 400);
  engine.block.setWidth(star, 100);
  engine.block.setHeight(star, 100);

  engine.editor.setSpotColorRGB('Crayola-Pink-Flamingo', 0.988, 0.455, 0.992);
  engine.editor.setSpotColorRGB('Pantone-ColorOfTheYear-2022', 0.4, 0.404, 0.671);
  engine.editor.setSpotColorRGB('Yellow', 1, 1, 0);
  engine.editor.getSpotColorRGBA('Yellow') // (r: 1, g: 1, b: 0, a: 1)
  engine.editor.findAllSpotColors();  // ['Crayola-Pink-Flamingo', 'Pantone-ColorOfTheYear-2022', 'Yellow']

  engine.block.setColorSpot(star, 'fill/solid/color', 'Crayola-Pink-Flamingo')

  engine.block.setColorSpot(star, 'stroke/color', 'Yellow', 0.8)
  engine.block.setStrokeEnabled(star, true);

  engine.block.getColorSpotName(star, 'fill/solid/color') // 'Crayola-Pink-Flamingo'
  engine.block.getColorSpotTint(star, 'stroke/color') // 0.8

  engine.block.setColorSpot(text, 'fill/solid/color', 'Yellow')

  engine.block.setColorSpot(text, 'stroke/color', 'Crayola-Pink-Flamingo', 0.5)
  engine.block.setStrokeEnabled(text, true);
  
  engine.block.setColorSpot(text, 'backgroundColor/color', 'Pantone-ColorOfTheYear-2022', 0.9)
  engine.block.setBackgroundColorEnabled(text, true);

  engine.editor.setSpotColorRGB('Yellow', 1, 1, 0.4);

  engine.editor.removeSpotColor('Yellow')
});