diff --git a/loleaflet/src/control/Control.JSDialogBuilder.js b/loleaflet/src/control/Control.JSDialogBuilder.js
index 6a8a3d9be..1854e8e57 100644
--- a/loleaflet/src/control/Control.JSDialogBuilder.js
+++ b/loleaflet/src/control/Control.JSDialogBuilder.js
@@ -1309,7 +1309,7 @@ L.Control.JSDialogBuilder = L.Control.extend({
 		 return false;
 	},
 
-	_getColorCommandToSend: function(builder, data, color) {
+	_sendColorCommand: function(builder, data, color) {
 		var gradientItem;
 
 		if (data.id === 'fillgrad1') {
@@ -1322,7 +1322,13 @@ L.Control.JSDialogBuilder = L.Control.extend({
 			return '.uno:FillGradient?FillGradientJSON:string=' + JSON.stringify(gradientItem);
 		}
 
-		return data.command + '?Color:string=' + color;
+		var command = data.command + '?Color:string=' + color;
+
+		// update the item state as we send
+		var items = builder.map['stateChangeHandler'];
+		items.setItemValue(data.command, parseInt('0x' + color));
+
+		builder.map.sendUnoCommand(command);
 	},
 
 	_getDefaultColorForCommand: function(command) {
@@ -1381,8 +1387,7 @@ L.Control.JSDialogBuilder = L.Control.extend({
 		var noColorControl = (data.command !== '.uno:FontColor' && data.command !== '.uno:Color');
 
 		var callback = function(color) {
-			var command = builder._getColorCommandToSend(builder, data, color);
-			builder.map.sendUnoCommand(command);
+			builder._sendColorCommand(builder, data, color);
 		};
 
 		var colorPickerControl = new L.ColorPicker(
diff --git a/loleaflet/src/map/handler/Map.StateChanges.js b/loleaflet/src/map/handler/Map.StateChanges.js
index a6b5d3f81..f8382ce28 100644
--- a/loleaflet/src/map/handler/Map.StateChanges.js
+++ b/loleaflet/src/map/handler/Map.StateChanges.js
@@ -64,6 +64,14 @@ L.Map.StateChangeHandler = L.Handler.extend({
 		}
 
 		return this._items[unoCmd];
+	},
+
+	setItemValue: function(unoCmd, value) {
+		if (unoCmd && unoCmd.substring(0, 5) !== '.uno:') {
+			unoCmd = '.uno:' + unoCmd;
+		}
+
+		this._items[unoCmd] = value;
 	}
 });