add themed colored elements

source/Ox/js/Color.js

@@ -97,4 +97,23 @@ Ox.rgb = function(hsl) {
     return rgb.map(function(v) {
         return v * 255;
     });
-};
+};
+
+/*@
+Ox.toHex <f> Format RGB array as hex value
+@*/
+Ox.toHex = function(rgb) {
+    return rgb.map(function(val) {
+        return Ox.pad(val.toString(16).toUpperCase(), 2);
+    }).join('');
+};
+
+/*@
+Ox.toRGB <f> Format hex value as RGB array
+@*/
+Ox.toRGB = function(hex) {
+    return Ox.range(3).map(function(i) {
+        return parseInt(hex.substr(i * 2, 2), 16);
+    });
+};
+

source/Ox/js/Format.js

@@ -13,65 +13,6 @@ Ox.formatArea = function(num, dec) {
     ) + ' ' + (km ? 'k' : '') + 'm\u00B2';
 };
 
-/*@
-Ox.formatColor <f> (strange one)
-@*/
-// FIXME: implement invert
-Ox.formatColor = function(val, type, invert) {
-    var background, color, element;
-    if (type == 'hue') {
-        background = Ox.rgb(val, 1, 0.25).map(function(val) {
-            return Math.round(val);
-        });
-        color = Ox.rgb(val, 1, 0.75).map(function(val) {
-            return Math.round(val);
-        });
-    } else if (type == 'saturation') {
-        background = Ox.range(7).map(function(i) {
-            return Ox.rgb(i * 60, val, 0.25).map(function(val) {
-                return Math.round(val);
-            });
-        });
-        color = Ox.range(3).map(function() {
-            return Math.round(128 + val * 127);
-        });
-    } else if (type == 'lightness') {
-        background = Ox.range(3).map(function() {
-            return Math.round(val * 255);
-        });
-        color = Ox.range(3).map(function() {
-            var v = Math.round(val * 255);
-            return val < 0.5 ? 128 + v : v - 128;
-        });
-    }
-    element = Ox.element('<div>')
-        .css({
-            borderRadius: '8px',
-            padding: '0 4px 1px 4px',
-            color: 'rgb(' + color.join(', ') + ')',
-            overflow: 'hidden',
-            textAlign: 'right',
-            textOverflow: 'ellipsis',
-            //textShadow: 'black 1px 1px 1px'
-        })
-        .html(Ox.formatNumber(val, 3));
-    if (Ox.isNumber(background[0])) {
-        element.css({background: 'rgb(' + background.join(', ') + ')'});
-    } else {
-        ['moz', 'o', 'webkit'].forEach(function(browser) {
-            element.css({
-                background: '-' + browser + '-linear-gradient(left, '
-                    + background.map(function(rgb, i) {
-                        return 'rgb(' + rgb.join(', ') + ') '
-                            + Math.round(i * 100 / 6) + '%';
-                    }).join(', ')
-                    + ')'
-            });
-        });
-    }
-    return element
-};
-
 /*@
 Ox.formatCurrency <f> Formats a number with a currency symbol
     > Ox.formatCurrency(1000, '$', 2)