Not getting the color in the renderer

I have created a custom element which I am rendering as svg-image in my CustomRenderer. This is working. Now I want to Now I want to use the ColorPicker. I have now installed an extension in the CustomRenderer to read the color from the business object and adjust the svg accordingly. Unfortunately I don’t get a value for tp:color after setting the color via ColorPicker.
Is something missing here or am I doing something wrong?

Here is my Renderer

export default function RegularBPMNRenderer(eventBus) {, eventBus, 1500);

    this.canRender = function (element) {
        return is(element, 'regularBPMN:Entity') || is(element, 'regularBPMN:Resource');
    this.drawShape = function (parent, shape) {
        let url = '';
        if (is(shape, "regularBPMN:Resource")) {
            url = Resource.dataURL;
        } else if (is(shape, "regularBPMN:Entity")) {
            url = Entity.dataURL;
        var entityGfx = svgCreate('image', {
            x: 0,
            y: 0,
            width: shape.width,
            height: shape.height,
            href: url
        svgAppend(parent, entityGfx);
        var bo, color;
        bo = getBusinessObject(shape);
        color = bo.get('tp:color');

        if (color) {
            svgAttr(entityGfx, 'fill', color);
        return entityGfx;

Thanks for your help.

What does your model extension look like?

Here is my model extension for the Resource-Element (I have removed my other parts):

    "name": "RegularBPMN",
    "prefix": "regularBPMN",
    "uri": "http://regularBPMN",
    "xml": {
      "tagAlias": "lowerCase"
    "associations": [],
    "types": [
        "name": "Resource",
        "superClass": [
        "properties": [
            "name": "color",
            "isAttr": true,
            "type": "String"

Without seeing the rest of the extension (e.g. how is LogicObject defined) we can’t help you. Is there a reason you’re using a fully custom mechanism for color? It’s actually supported out of the box: GitHub - bpmn-io/bpmn-js-color-picker: A simple color picker for your BPMN elements.

sorry, I have removed to much. Hiere is the LogicObject:

        "name": "LogicObject",
        "isAbstract": true,
        "superClass": [

I am using the built in ColorPicker, but I think, it will write the selected color to the property tp:color and then I have to implement in my custom-render-class the rendering with the selected color of my custom elements - isn’t this right? My custom elements are drawing as svg-graphics. should the built in ColorPicker be able to colorize my custom elements? Right now, it do not. Do I have to something take into account that this will work out of the box for my custom elements?

You can set the color of an element using Modeling#setColor (e.g. modeling.setColor(task, { stroke: 'red', fill: 'green' });). This information will be persisted in the DI:


bioc attributes will also be set for legacy reasons.

CodeSandbox: Set color example - CodeSandbox

I don’t know if we’re talking about the same thing. I try to describe my request again.
I created my own element, which I draw using CustomRenderer (drawShape). This works perfectly so far. Now I have activated the BpmnColorPickerModule, which offers the possibility to choose the color via ContextPad.
Now I have to somehow get the selected color so that I can color my element accordingly in the drawShape of my CustomRenderer. That’s where I stand now - i.e. I’m looking for a way to get the selected color.
I’ve now tried it like this:

    drawShape(parent, shape) {

        // ... drawing logic for my custom element

        var bo, color;
        bo = getBusinessObject(shape);
        color = bo.get('tp:color');

but color is always undefined - even after I’ve selected the color via ColorPicker.
You know what I mean?