I'm trying to add a colorpicker to the style settings for an umbraco grid data type.

The colorpicker shows up fine, with the prevalues, but when i pick a value, the result on the page is 'broken'.

The full json for the styling settings looks like this:

[
{
"label": "Set a background image",
"description": "Set a row background",
"key": "background-image",
"view": "imagepicker",
"modifier": "url({0})"
},
{
"label": "Set a background color",
"description": "Set a row color",
"key": "background-color",
"view": "colorpicker",
"prevalues": [
  "#119D65",
  "#53B3AE"
]
}
]

and shows up fine when editing content:

But the html generated from this is broken:

<div class="icons-row" width="full-width" style="background-color:{
  &quot;value&quot;: &quot;119d65&quot;,
  &quot;label&quot;: &quot;#119D65&quot;,
  &quot;id&quot;: &quot;0&quot;
};">
...
</div>

Why is the colorpicking choosing the entire raw json as the picked value, instead of the value property ?

I got the setting json from an example somewhere, and haven't made any customization to colorpicker preview/editing templates