Using Color

Creating colors

Colors in Adobe Express are created as instances of the Color class: objects with red, green, blue, and alpha (optional) values in the range from 0 to 1. The alpha value represents the opacity of the color, with 0 being fully transparent and 1 fully opaque.

The entrypoint for creating colors is the colorUtils class, imported from the "express-document-sdk", so we're talking about Document APIs here. Especially the static fromRgb() and fromHex() methods.

Copy
// sandbox/code.js
import { editor, colorUtils } from "express-document-sdk";

// Alpha is optional, defaults to 1
const red = colorUtils.fromRgb(1, 0, 0);
const green = colorUtils.fromHex("#00FF00");

// With alpha
const feldgrau = colorUtils.fromRgb(0.28, 0.32, 0.39, 0.5); // 50% opacity
const heliotrope = colorUtils.fromHex("#C768F780"); // 50% opacity
Copied to your clipboard
// sandbox/code.js
import { editor, colorUtils } from "express-document-sdk";

// Alpha is optional, defaults to 1
const red = colorUtils.fromRgb(1, 0, 0);
const green = colorUtils.fromHex("#00FF00");

// With alpha
const feldgrau = colorUtils.fromRgb(0.28, 0.32, 0.39, 0.5); // 50% opacity
const heliotrope = colorUtils.fromHex("#C768F780"); // 50% opacity

In case you need it, you can also convert a color to a HEX string using the toHex() method. Please note that the alpha value is always included in the output string.

Copy
const red = colorUtils.fromRgb(1, 0, 0);
const redHex = colorUtils.toHex(red); // #FF0000FF
Copied to your clipboard
const red = colorUtils.fromRgb(1, 0, 0);
const redHex = colorUtils.toHex(red); // #FF0000FF

Applying colors

You can directly set the color property of a Text node via applyCharacterStyles():

Example: Text color

Copy
// sandbox/code.js
import { editor, colorUtils } from "express-document-sdk";

// Assuming the user has selected a text frame
const textNode = editor.context.selection[0];

// Apply character styles to the first three letters
textNode.fullContent.applyCharacterStyles(
  { color: colorUtils.fromHex("#E1A141") }, // 👈
  { start: 0, length: 3 }
);
Copied to your clipboard
// sandbox/code.js
import { editor, colorUtils } from "express-document-sdk";

// Assuming the user has selected a text frame
const textNode = editor.context.selection[0];

// Apply character styles to the first three letters
textNode.fullContent.applyCharacterStyles(
  { color: colorUtils.fromHex("#E1A141") }, // 👈
  { start: 0, length: 3 }
);

See the Using Text page for more examples.

Example: Fill and Stroke colors

Colors are not directly applied, instead, to shapes; more generally, they are used to create Fill and Stroke objects with the editor.makeColorFill() and editor.makeStroke() methods, respectively, that you can then apply to Fillable and Strokable nodes.

If you're confused, worry not! This is the wondrous word of object oriented programming. The following example should clarify things:

Copy
// sandbox/code.js
import { editor, colorUtils } from "express-document-sdk";

// Create the shape
const ellipse = editor.createEllipse();
ellipse.width = 100;
ellipse.height = 50;
ellipse.translation = { x: 50, y: 50 };

// Generate the needed colors
const innerColor = colorUtils.fromHex("#A38AF0");
const outerColor = colorUtils.fromHex("#2ACfA9");

// Make the colorFill and the Stroke
const innerColorFill = editor.makeColorFill(innerColor);
const outerColorStroke = editor.makeStroke({
  color: outerColor,
  width: 20,
});

// 👇 Apply the fill and stroke
ellipse.fill = innerColorFill;
ellipse.stroke = outerColorStroke;

// Add the shape to the document
editor.context.insertionParent.children.append(ellipse);
Copied to your clipboard
// sandbox/code.js
import { editor, colorUtils } from "express-document-sdk";

// Create the shape
const ellipse = editor.createEllipse();
ellipse.width = 100;
ellipse.height = 50;
ellipse.translation = { x: 50, y: 50 };

// Generate the needed colors
const innerColor = colorUtils.fromHex("#A38AF0");
const outerColor = colorUtils.fromHex("#2ACfA9");

// Make the colorFill and the Stroke
const innerColorFill = editor.makeColorFill(innerColor);
const outerColorStroke = editor.makeStroke({
  color: outerColor,
  width: 20,
});

// 👇 Apply the fill and stroke
ellipse.fill = innerColorFill;
ellipse.stroke = outerColorStroke;

// Add the shape to the document
editor.context.insertionParent.children.append(ellipse);

While the fill property is more straightforward to create, the color is just one of the possible properties of a stroke, as you can read in the SolitColorStroke interface reference.

Simplifying the example above:

Copy
// ...
ellipse.fill = editor.makeColorFill(colorUtils.fromHex("#A38AF0"));
ellipse.stroke = editor.makeStroke({
  color: colorUtils.fromHex("#2ACfA9"),
  width: 20,
});
// ...
Copied to your clipboard
// ...
ellipse.fill = editor.makeColorFill(colorUtils.fromHex("#A38AF0"));
ellipse.stroke = editor.makeStroke({
  color: colorUtils.fromHex("#2ACfA9"),
  width: 20,
});
// ...

Last updated 2/23/2025

Was this helpful?

Yes

No