Tron Designer Integration - Suggested Design Colors Example

Suggested Design Colors

Pass your customer's brand colors as custom properties EDITOR:DESIGN_COLOR_<number> (e.g. EDITOR:DESIGN_COLOR_1, EDITOR:DESIGN_COLOR_10). Keys are case-sensitive, the suffix must be a non-negative integer, colors are shown in numeric order and gaps are allowed. Each value has the format Source:ColorValue:

PMS:PANTONE 185 C — full Pantone name from the color map
RGB:#EB002A or RGB:#EB002AFF — 6 (RGB) or 8 (RGBA) hex digits
CMYK:#00F8D000 — four channel bytes #CCMMYYKK (00 = 0 %, FF = 100 %)

The value must match the color map exactly (case and surrounding whitespace are ignored); the nearest color is not chosen.

What it does:

Suggested Colors section at the top of the logo and text color selectors (Pantone and CMYK). Unmatched or invalid entries stay visible but disabled, with an error icon.
Automatic logo recoloring — when exactly one non-empty color is supplied and it matches the map, logo adaptation recolors the whole logo to it for Pantone, CMYK and SingleColor print modes. Colorless modes keep their normal behavior. Applies to the initial integration logo and later uploads/replacements, never to logos already placed in a saved design.

Verified values (DEV color map)

Pantone	PMS	RGB	CMYK
PANTONE 185 C	`PMS:PANTONE 185 C`	`RGB:#EB002A`	`CMYK:#00F8D000`
PANTONE 286 C	`PMS:PANTONE 286 C`	`RGB:#0033A0`	`CMYK:#FED40000`
PANTONE 354 C	`PMS:PANTONE 354 C`	`RGB:#00AE42`	`CMYK:#C301EB00`
PANTONE Yellow C	`PMS:PANTONE Yellow C`	`RGB:#FFDE00`	`CMYK:#0616E900`

1. Suggested Colors in the color selectors

JSON

Mixed list — Pantone printing

Open the logo Colors tab and the text dialog color selector. Expected order: 185 C, Yellow C, 286 C, UNKNOWN COLOR (disabled), CMYK:#0021FF00 (disabled, not in map), RGB:#12345 (disabled, invalid), 354 C (slot 10 last). Several colors → no automatic recoloring.

JSON

Mixed list — CMYK printing

Same list in the CMYK color selector. Picking a suggestion should set the map's CMYK equivalent (e.g. 185 C → #00F8D000).

JS Builder

addCustomProperties()

Two matched colors (185 C, 286 C) passed through the builder. Suggestions shown, no automatic recoloring.

HTML Attribute

data-td-custom-properties

Single color via data attribute (no logo preselected). Upload a logo in the editor — expected: it is recolored to 354 C, and 354 C is offered in Suggested Colors.

2. Automatic logo recoloring (exactly one color)

Pantone

front / PAD03

Expected: adaptation dialog lists step "Recolored to suggested color …" and the preview is fully in the selected color. Customer can still keep the original.

Pantone 1 color

wrap1color / GPE02

Pantone mode limited to one color. Expected: logo recolored to the selected color.

CMYK

wrap / DRD03

Expected: logo recolored to the CMYK equivalent of the selected color.

Colorless

front / LAS02

Laser engraving. Expected: no recoloring — normal colorless adaptation.

Upload later

No preselected logo

Select No logo above (or open and replace the logo). Upload a logo in the editor — expected: the uploaded logo is recolored as well.

3. No automatic recoloring expected

Two colors, same result

PMS:PANTONE 185 C + RGB:#EB002A both resolve to 185 C. Multiple supplied colors prevent recoloring. Both appear in Suggested Colors.

One matched + one unmatched

Only one matches, but two are supplied → no recoloring.

Single unmatched

RGB:#EB002B is valid syntax but not in the map (no nearest match) → normal adaptation, disabled suggestion with error icon.

Invalid keys

editor:design_color_1 (wrong case), EDITOR:DESIGN_COLOR_A, EDITOR:DESIGN_COLOR_-1 → ignored: no Suggested Colors section at all, no recoloring.

4. Tolerance

Empty values + gaps

_1 and _2 are empty / whitespace, _7 is 286 C → counts as exactly one color: single suggestion and logo recolored to 286 C.

Case & whitespace

" rgb : #00ae42 " → matches 354 C. Single color → logo recolored.

With design instructions

Combined with EDITOR:DESIGN_INSTRUCTION — both features work together.

5. Edit an existing print job

Last created print job:
(none — create one above first)

Edit

Reopen as saved

Saved colors are shown in Suggested Colors; logos already in the design are not recolored again.

Edit

Change color to 286 C

Overwrites EDITOR:DESIGN_COLOR_1. Existing logo stays as is; a newly uploaded logo is recolored to 286 C (if no other color slots are stored).

Edit

Clear color

Empty string → the slot is ignored; no Suggested Colors section if it was the only one.

6. Playground

Implementation Code

1 — HTML data attribute

<button
    data-td-action="OpenCreate"
    data-td-supplier-code="PFC"
    data-td-product-code="10086021"
    data-td-print-position-code="front"
    data-td-print-technology-code="PAD03"
    data-td-custom-properties='{"EDITOR:DESIGN_COLOR_1":"PMS:PANTONE 185 C"}'>
    Design your print
</button>

2 — JS builder

window.tronDesigner
    .addCustomProperties({
        'EDITOR:DESIGN_COLOR_1': 'PMS:PANTONE 185 C',
        'EDITOR:DESIGN_COLOR_2': 'RGB:#0033A0'
    })
    .setExactProduct('PFC', undefined, (p) => p.addVariant('10086021'))
    .addExactPrinting('front', 'PAD03')
    .open({ mode: 'dialog' });

3 — JSON editor arguments (single color → automatic logo recoloring)

window.tronDesigner.openDesigner({
    openMode: 'Create',
    dataMode: 'Exact',
    printJob: {
        logo: { url: 'https://cdn-webassets.promotron.com/images/td/logo-full-light-theme.svg' },
        customProperties: {
            'EDITOR:DESIGN_COLOR_1': 'CMYK:#00F8D000'   // = PANTONE 185 C
        },
        addProducts: { supplierCode: 'PFC', variants: [{ productCode: '10086021' }] },
        addPrintings: [{ printPositionCode: 'front', printTechnologyCode: 'PAD03' }]
    }
}, { mode: 'dialog' });

Encoding a CMYK value

// CMYK:#CCMMYYKK — each channel is one byte (00 = 0 %, FF = 100 %); the last pair is black, not alpha.
const toByte = (percent) => Math.round(percent * 255 / 100).toString(16).padStart(2, '0').toUpperCase();
const cmyk = 'CMYK:#' + [0, 97, 82, 0].map(toByte).join('');   // 'CMYK:#00F7D100'
// Note: rounding percentages does not guarantee an exact color-map match (185 C is CMYK:#00F8D000).

TronDesigner – Integration Examples
Docs: Developer documentation | Suggested design colors

Suggested Design Colors

Verified values (DEV color map)

1. Suggested Colors in the color selectors

Mixed list — Pantone printing

Mixed list — CMYK printing

addCustomProperties()

data-td-custom-properties

2. Automatic logo recoloring (exactly one color)

front / PAD03

wrap1color / GPE02

wrap / DRD03

front / LAS02

No preselected logo

3. No automatic recoloring expected

4. Tolerance

5. Edit an existing print job

Reopen as saved

Change color to 286 C

Clear color

6. Playground

Event Log

Implementation Code

1 — HTML data attribute

2 — JS builder

3 — JSON editor arguments (single color → automatic logo recoloring)

Encoding a CMYK value

TronDesigner – Integration Examples Docs: Developer documentation | Suggested design colors

Suggested Design Colors

Verified values (DEV color map)

1. Suggested Colors in the color selectors

Mixed list — Pantone printing

Mixed list — CMYK printing

addCustomProperties()

data-td-custom-properties

2. Automatic logo recoloring (exactly one color)

front / PAD03

wrap1color / GPE02

wrap / DRD03

front / LAS02

No preselected logo

3. No automatic recoloring expected

4. Tolerance

5. Edit an existing print job

Reopen as saved

Change color to 286 C

Clear color

6. Playground

Event Log

Implementation Code

1 — HTML data attribute

2 — JS builder

3 — JSON editor arguments (single color → automatic logo recoloring)

Encoding a CMYK value

TronDesigner – Integration Examples
Docs: Developer documentation | Suggested design colors