Skip to content

Apply Colors

Setup the scene

We first create a new scene with a graphic block that has color fill.

  let scene = try engine.scene.create()


  let page = try engine.block.create(.page)
  try engine.block.setWidth(page, value: 800)
  try engine.block.setHeight(page, value: 600)
  try engine.block.appendChild(to: scene, child: page)


  let block = try engine.block.create(.graphic)
  try engine.block.setShape(block, shape: engine.block.createShape(.rect))
  try engine.block.setPositionX(block, value: 350)
  try engine.block.setPositionY(block, value: 400)
  try engine.block.setWidth(block, value: 100)
  try engine.block.setHeight(block, value: 100)


  let fill = try engine.block.createFill(.color)
  try engine.block.setFill(block, fill: fill)

Create colors

Here we instantiate a few colors with RGB and CMYK color spaces. We also define two spot colors, one with an RGB approximation and another with a CMYK approximation. Note that a spot colors can have both color space approximations.

  let rgbaBlue = Color.rgba(r: 0, g: 0, b: 1, a: 1)
  let cmykRed = Color.cmyk(c: 0, m: 1, y: 1, k: 0, tint: 1)
  let cmykPartialRed = Color.cmyk(c: 0, m: 1, y: 1, k: 0, tint: 0.5)


  engine.editor.setSpotColor(name: "Pink-Flamingo", r: 0.988, g: 0.455, b: 0.992)
  engine.editor.setSpotColor(name: "Yellow", c: 0, m: 0, y: 1, k: 0)
  let spotPinkFlamingo = Color.spot(name: "Pink-Flamingo", tint: 1.0, externalReference: "Crayola")
  let spotPartialYellow = Color.spot(name: "Yellow", tint: 0.3, externalReference: "")

Applying colors to a block

We can use the defined colors to modify certain properties of a fill or properties of a shape. Here we apply it to 'fill/color/value', 'stroke/color' and 'dropShadow/color'.

try engine.block.setColor(fill, property: "fill/color/value", color: rgbaBlue)
try engine.block.setColor(fill, property: "fill/color/value", color: cmykRed)
try engine.block.setColor(block, property: "stroke/color", color: cmykPartialRed)
try engine.block.setColor(fill, property: "fill/color/value", color: spotPinkFlamingo)
try engine.block.setColor(block, property: "dropShadow/color", color: spotPartialYellow)

Converting colors

Using the utility function convertColorToColorSpace we create a new color in the CMYK color space by converting the rgbaBlue color to the CMYK color space. We also create a new color in the RGB color space by converting the spotPinkFlamingo color to the RGB color space.

let cmykBlueConverted = try engine.editor.convertColorToColorSpace(color: rgbaBlue, colorSpace: .cmyk)
let rgbaPinkFlamingoConverted = try engine.editor.convertColorToColorSpace(
  color: spotPinkFlamingo,
  colorSpace: .sRGB
)

Listing spot colors

This function returns the list of currently defined spot colors.

engine.editor.findAllSpotColors() // ["Crayola-Pink-Flamingo", "Yellow"]

Redefine a spot color

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

engine.editor.setSpotColor(name: "Yellow", c: 0.2, m: 0, y: 1, k: 0)

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.

try engine.editor.removeSpotColor(name: "Yellow")

Full Code

Here’s the full code:

import Foundation
import IMGLYEngine


@MainActor
func colors(engine: Engine) async throws {
  let scene = try engine.scene.create()


  let page = try engine.block.create(.page)
  try engine.block.setWidth(page, value: 800)
  try engine.block.setHeight(page, value: 600)
  try engine.block.appendChild(to: scene, child: page)


  let block = try engine.block.create(.graphic)
  try engine.block.setShape(block, shape: engine.block.createShape(.rect))
  try engine.block.setPositionX(block, value: 350)
  try engine.block.setPositionY(block, value: 400)
  try engine.block.setWidth(block, value: 100)
  try engine.block.setHeight(block, value: 100)


  let fill = try engine.block.createFill(.color)
  try engine.block.setFill(block, fill: fill)


  let rgbaBlue = Color.rgba(r: 0, g: 0, b: 1, a: 1)
  let cmykRed = Color.cmyk(c: 0, m: 1, y: 1, k: 0, tint: 1)
  let cmykPartialRed = Color.cmyk(c: 0, m: 1, y: 1, k: 0, tint: 0.5)


  engine.editor.setSpotColor(name: "Pink-Flamingo", r: 0.988, g: 0.455, b: 0.992)
  engine.editor.setSpotColor(name: "Yellow", c: 0, m: 0, y: 1, k: 0)
  let spotPinkFlamingo = Color.spot(name: "Pink-Flamingo", tint: 1.0, externalReference: "Crayola")
  let spotPartialYellow = Color.spot(name: "Yellow", tint: 0.3, externalReference: "")


  try engine.block.setColor(fill, property: "fill/color/value", color: rgbaBlue)
  try engine.block.setColor(fill, property: "fill/color/value", color: cmykRed)
  try engine.block.setColor(block, property: "stroke/color", color: cmykPartialRed)
  try engine.block.setColor(fill, property: "fill/color/value", color: spotPinkFlamingo)
  try engine.block.setColor(block, property: "dropShadow/color", color: spotPartialYellow)


  let cmykBlueConverted = try engine.editor.convertColorToColorSpace(color: rgbaBlue, colorSpace: .cmyk)
  let rgbaPinkFlamingoConverted = try engine.editor.convertColorToColorSpace(
    color: spotPinkFlamingo,
    colorSpace: .sRGB
  )


  engine.editor.findAllSpotColors() // ["Crayola-Pink-Flamingo", "Yellow"]


  engine.editor.setSpotColor(name: "Yellow", c: 0.2, m: 0, y: 1, k: 0)


  try engine.editor.removeSpotColor(name: "Yellow")
}