diff --git a/source/Ox.UI/js/Form/ColorInput.js b/source/Ox.UI/js/Form/ColorInput.js
index 168be279..0750bb8c 100644
--- a/source/Ox.UI/js/Form/ColorInput.js
+++ b/source/Ox.UI/js/Form/ColorInput.js
@@ -4,49 +4,45 @@
 Ox.ColorInput <f> ColorInput Element
     ([options[, self]]) -> <o:Ox.InputGroup> ColorInput Element
     options <o> Options object
-        id <s> element id
-        value <s|0, 0, 0> rgb value
-    self <o>    Shared private variable
+        mode <s|'rgb'> Mode ('rgb' or 'hsl')
+        value <[n]|[0, 0, 0]> Value
+    self <o> Shared private variable
 @*/
 Ox.ColorInput = function(options, self) {
 
-    self = Ox.extend(self || {}, {
-            options: Ox.extend({
-                id: '',
-                mode: 'RGB',
-                value: options.mode == 'HSL' ? [0, 1, 0.5] : [0, 0, 0]
-            }, options)
-    });
-    var that;
+    self = self || {};
+    var that = Ox.Element({}, self)
+        .defaults({
+            mode: 'rgb',
+            value: options.mode == 'hsl' ? [0, 1, 0.5] : [0, 0, 0]
+        })
+        .options(options || {});
 
     self.$inputs = [];
     Ox.loop(3, function(i) {
         self.$inputs[i] = Ox.Input({
-            id: self.options.id + i,
-            max: self.options.mode == 'RGB' ? 255 : i == 0 ? 360 : 1,
-            type: self.options.mode == 'RGB' || i == 0 ? 'int' : 'float',
+            max: self.options.mode == 'rgb' ? 255 : i == 0 ? 360 : 1,
+            type: self.options.mode == 'rgb' || i == 0 ? 'int' : 'float',
             value: self.options.value[i],
             width: 40
         })
         .bindEvent('autovalidate', change);
     });
     self.$inputs[3] = Ox.Label({
-            id: 'color',
             width: 40
         })
         .css({
             background: 'rgb(' + getRGB().join(', ') + ')'
         });
     self.$inputs[4] = Ox.ColorPicker({
-            id: 'picker',
-            mode: self.options.mode
+            mode: self.options.mode,
+            width: 16
         })
         .bindEvent({
             change: function(data) {
-                //Ox.Log('Form', 'change function called');
                 self.options.value = data.value;
                 Ox.loop(3, function(i) {
-                    self.$inputs[i].value(self.options.value[i]);
+                    self.$inputs[i].options({value: self.options.value[i]});
                 });
                 self.$inputs[3].css({
                     background: 'rgb(' + getRGB().join(', ') + ')'
@@ -57,8 +53,7 @@ Ox.ColorInput = function(options, self) {
             width: 16 // this is just a hack to make the InputGroup layout work
         });
 
-    that = Ox.InputGroup({
-            id: self.options.id,
+    that.setElement(Ox.InputGroup({
             inputs: self.$inputs,
             separators: [
                 {title: ',', width: 8},
@@ -66,21 +61,23 @@ Ox.ColorInput = function(options, self) {
                 {title: '', width: 8},
                 {title: '', width: 8}
             ],
-            value: self.options.value
+            value: Ox.clone(self.options.value)
         })
-        .bindEvent('change', change);
+        .bindEvent('change', change)
+    );
 
     function change() {
-        self.options.value = self.$inputs.map(function(input, i) {
-            return i < 3 ? input.value() : null;
-        });
+        self.options.value = Ox.range(3).map(function(i) {
+            return self.$inputs[i].options('value');
+        })
         self.$inputs[3].css({
             background: 'rgb(' + getRGB().join(', ') + ')'
         });
+        that.triggerEvent('change', {value: self.options.value});
     }
 
     function getRGB() {
-        return self.options.mode == 'RGB'
+        return self.options.mode == 'rgb'
             ? self.options.value
             : Ox.rgb(self.options.value).map(function(value) {
                 return Math.round(value);
diff --git a/source/Ox.UI/js/Form/ColorPicker.js b/source/Ox.UI/js/Form/ColorPicker.js
index bd3767ee..8ebdd1f8 100644
--- a/source/Ox.UI/js/Form/ColorPicker.js
+++ b/source/Ox.UI/js/Form/ColorPicker.js
@@ -4,8 +4,8 @@
 Ox.ColorPicker <f> ColorPicker Element
     ([options[, self]]) -> <o:Ox.Picker> ColorPicker Element
     options <o> Options object
-        id <s> element id
-        value <s|0, 0, 0> rgb value
+        mode <s|'rgb'> Mode ('rgb' or 'hsl')
+        value <[n]|[0, 0, 0]> Value
     self <o>    Shared private variable
     change <!> triggered on change of value
 @*/
@@ -15,9 +15,8 @@ Ox.ColorPicker = function(options, self) {
     self = self || {};
     var that = Ox.Element({}, self)
             .defaults({
-                id: '',
-                mode: 'RGB',
-                value: options.mode == 'HSL' ? [0, 1, 0.5] : [0, 0, 0]
+                mode: 'rgb',
+                value: options && options.mode == 'hsl' ? [0, 1, 0.5] : [0, 0, 0]
             })
             .options(options || {});
 
@@ -29,9 +28,9 @@ Ox.ColorPicker = function(options, self) {
                 arrows: true,
                 changeOnDrag: true,
                 id: self.options.id + i,
-                max: self.options.mode == 'RGB' ? 255 : i == 0 ? 359 : 1,
-                size: self.options.mode == 'RGB' ? 328 : 432, // 256|360 + 16 + 40 + 16
-                step: self.options.mode == 'RGB' || i == 0 ? 1 : 0.01,
+                max: self.options.mode == 'rgb' ? 255 : i == 0 ? 359 : 1,
+                size: self.options.mode == 'rgb' ? 328 : 432, // 256|360 + 16 + 40 + 16
+                step: self.options.mode == 'rgb' || i == 0 ? 1 : 0.01,
                 thumbSize: 40,
                 thumbValue: true,
                 trackColors: getColors(i),
@@ -51,17 +50,14 @@ Ox.ColorPicker = function(options, self) {
         if (i == 0) {
             // fixme: this should go into Ox.UI.css
             self.$ranges[i].children('input.OxOverlapRight').css({
-                MozBorderRadius: 0,
-                WebkitBorderRadius: 0
+                borderRadius: 0
             });
             self.$ranges[i].children('input.OxOverlapLeft').css({
-                MozBorderRadius: '0 8px 0 0',
-                WebkitBorderRadius: '0 8px 0 0'
+                borderRadius: '0 8px 0 0'
             });
         } else {
             self.$ranges[i].children('input').css({
-                MozBorderRadius: 0,
-                WebkitBorderRadius: 0
+                borderRadius: 0
             });
         }
     });
@@ -69,8 +65,7 @@ Ox.ColorPicker = function(options, self) {
     that = Ox.Picker({
         element: that,
         elementHeight: 46,
-        elementWidth: self.options.mode == 'RGB' ? 328 : 432,
-        id: self.options.id
+        elementWidth: self.options.mode == 'rgb' ? 328 : 432
     });
 
     function change(index, value) {
@@ -85,14 +80,12 @@ Ox.ColorPicker = function(options, self) {
                 });
             }
         });
-        that.triggerEvent('change', {
-            value: self.options.value
-        });
+        that.triggerEvent('change', {value: self.options.value});
     }
 
     function getColors(index) {
         return (
-            self.options.mode == 'RGB' ? [
+            self.options.mode == 'rgb' ? [
                 Ox.range(3).map(function(i) {
                     return i == index ? 0 : self.options.value[i];
                 }),
@@ -116,7 +109,7 @@ Ox.ColorPicker = function(options, self) {
     }
 
     function getRGB(values) {
-        return self.options.mode == 'RGB'
+        return self.options.mode == 'rgb'
             ? values
             : Ox.rgb(values).map(function(value) {
                 return Math.round(value);
diff --git a/source/Ox.UI/js/Form/Picker.js b/source/Ox.UI/js/Form/Picker.js
index c1da93ab..82e192f8 100644
--- a/source/Ox.UI/js/Form/Picker.js
+++ b/source/Ox.UI/js/Form/Picker.js
@@ -21,7 +21,6 @@ Ox.Picker = function(options, self) {
                 element: null,
                 elementHeight: 128,
                 elementWidth: 256,
-                id: '',
                 overlap: 'none'
             })
             .options(options || {});
@@ -31,7 +30,9 @@ Ox.Picker = function(options, self) {
             title: 'select',
             type: 'image'
         })
-        .click(showMenu)
+        .bindEvent({
+            click: showMenu
+        })
         .appendTo(that);
 
     self.$menu = Ox.Element()
@@ -76,8 +77,7 @@ Ox.Picker = function(options, self) {
         self.$selectButton
             .removeClass('OxSelected')
             .css({
-                MozBorderRadius: '8px',
-                WebkitBorderRadius: '8px'
+                borderRadius: '8px'
             });
         that.triggerEvent('hide');
     }
@@ -89,16 +89,15 @@ Ox.Picker = function(options, self) {
         self.$selectButton
             .addClass('OxSelected')
             .css({
-                MozBorderRadius: '8px 8px 0 0',
-                WebkitBorderRadius: '8px 8px 0 0'
+                borderRadius: '8px 8px 0 0'
             });
-        self.$layer.appendTo(Ox.UI.$body);
+        self.$layer.appendTo(Ox.$body);
         self.$menu
             .css({
                 left: left + 'px',
                 top: top + 'px'
             })
-            .appendTo(Ox.UI.$body);
+            .appendTo(Ox.$body);
         that.triggerEvent('show');
     }