This demo shows how you can change the color of certain part of an Object.

var sceneId = 'd3534f41-d552-4636-92d9-3016176db7b8';
var state = {
  BaseColor: 'Blue',
  StripeColor1: 'Red',
  StripeColor2: 'White',
  StripeColor3: 'Black',
};
var colors = {
  'White': {r:1, g:1, b:1},
   'Light Grey': {r:0.5, g:0.5, b:0.5},
   'Dark Grey': {r:0.25, g:0.25, b:0.25},
   'Black': {r:0, g:0, b:0},
   'Red': {r:1.0, g:0, b:0},
   'Orange': {r:1.0, g:0.65, b:0},
   'Yellow': {r:1.0, g:0.9, b:0},
   'Green': {r:0, g:0.5, b:0},
   'Blue': {r:0, g:0, b:1.0}
};

var api = claraplayer('player');

api.sceneIO.fetchAndUse(sceneId).then(function() {
  api.commands.setCommandOptions('orbit', { turnTable: true});

  addCustomOptions();
  selectHandler();
  document.getElementById('baseScene').setAttribute('href','https://clara.io/view/'+sceneId);
});

function selectHandler(stateName){
  return function (event){
    state[stateName] = event.target.value;
    api.scene.set({name:'Canvas-Body', plug:'Image', properties:{name:stateName}, property:'tintColor'}, colors[state[stateName]])
  }
}

function addCustomOptions(){
  var content = document.getElementById('selections');
  Object.keys(state).forEach(function(name,i){
      var text = document.createElement("u");  
      text.innerText = 'Accent Color ' + (i + 1);
      var subTitle = document.createElement('p');
      subTitle.appendChild(text);
      content.appendChild(subTitle)
      var selection = document.createElement('select');
      selection.setAttribute('id',name);
      Object.keys(colors).forEach(function(colorName,i){
        selection.options[i] = new Option(colorName,colorName);
      })
      selection.value = state[name]
      selection.onchange = selectHandler(name);
      content.appendChild(selection);
  })
}