diff --git a/.eslintrc b/.eslintrc
index fa3171c..cabc09e 100755
--- a/.eslintrc
+++ b/.eslintrc
@@ -9,7 +9,7 @@
   },
   "rules": {
     "new-cap": [0],
-    "max-params": [2, 4],
+    "max-params": [2, 5],
     "require-jsdoc": [2, {
       "require": {
         "FunctionDeclaration": true,
diff --git a/README.md b/README.md
index f46a69b..8b24725 100755
--- a/README.md
+++ b/README.md
@@ -292,11 +292,16 @@ A dropdown menu containing multiple options.
 
 ---
 
-#### Color
+#### Color Picker
 
 **Manipulator:** [`color`](#color)
 
-A color picker containing the 64 supported colors on Basalt and Chalk.
+A color picker that allows users to choose a color from the ones that are compatible with their Pebble smartwatch. 
+The color picker will automatically show a different layout depending on the watch connected: 
+
+ - Aplite (Firmware 2.x) - Black and white
+ - Aplite (Firmware 3.x) - Black and white. Will also include gray (`#AAAAAA`) if `allowGray` is set to `true`
+ - Basalt/chalk - The 64 colors compatible with color Pebble smartwatches. 
 
 ##### Properties
 
@@ -306,9 +311,11 @@ A color picker containing the 64 supported colors on Basalt and Chalk.
 | id | string (unique) | Set this to a unique string to allow this item to be looked up using `Clay.getItemsById()` in your [custom function](#custom-function). |
 | appKey | string (unique) | The AppMessage key matching the `appKey` item defined in your `appinfo.json`.  Set this to a unique string to allow this item to be looked up using `Clay.getItemsByAppKey()` in your custom function. You must set this if you wish for the value of this item to be persisted after the user closes the config page. |
 | label | string | The label that should appear next to this item. |
-| defaultValue | string OR int | The default color. Always use the uncorrected value even if `sunlight` is true. The component will do the conversion internally. |
+| defaultValue | string OR int | The default color. One of the [64 colors](https://developer.pebble.com/guides/tools-and-resources/color-picker/) compatible with Pebble smartwatches. Always use the uncorrected value even if `sunlight` is true. The component will do the conversion internally. |
 | description | string | Optional sub-text to include below the component |
 | sunlight | boolean | Use the color-corrected sunlight color palette if `true`, else the uncorrected version. Defaults to `true` if not specified. |
+| layout | string OR array | Optional. Use a custom layout for the color picker. Defaults to automatically choosing the most appropriate layout for the connected watch. The layout is represented by a two dimensional array. Use `false` to insert blank spaces. You may also use one of the preset layouts by setting `layout` to: `"COLOR"`, `"GRAY"` or `"BLACK_WHITE"` |
+| allowGray | boolean | Optional. Set this to `true` to include gray (`#AAAAAA`) in the color picker for aplite running on firmware 3 and above. This is optional because only a subset of the drawing operations support gray on aplite. Defaults to `false` |
 
 ##### Example
 
@@ -316,9 +323,40 @@ A color picker containing the 64 supported colors on Basalt and Chalk.
 {
   "type": "color",
   "appKey": "background",
-  "defaultValue": "FF0000",
+  "defaultValue": "ff0000",
   "label": "Background Color",
-  "sunlight": true
+  "sunlight": true,
+  "layout": [
+    [false, "00aaff", false],
+    ["0055ff", "0000ff", "0000aa"],
+    [false, "5555ff", false]
+  ]
+}
+```
+
+##### Example
+
+```javascript
+{
+  "type": "color",
+  "appKey": "background",
+  "defaultValue": "ffffff",
+  "label": "Background Color",
+  "sunlight": false,
+  "layout": "BLACK_WHITE"
+}
+```
+
+##### Example
+
+```javascript
+{
+  "type": "color",
+  "appKey": "background",
+  "defaultValue": "aaaaaa",
+  "label": "Background Color",
+  "sunlight": false,
+  "allowGray": true
 }
 ```
 
diff --git a/src/scripts/components/color.js b/src/scripts/components/color.js
index cebb6f0..fcc1228 100644
--- a/src/scripts/components/color.js
+++ b/src/scripts/components/color.js
@@ -9,117 +9,225 @@ module.exports = {
     label: '',
     description: ''
   },
-  initialize: function(minified) {
+  initialize: function(minified, clay) {
     var HTML = minified.HTML;
     var self = this;
-    var useSunlight = self.config.sunlight !== false;
-    var sunlightColorMap = {
-      '000000': '000000',
-      '000055': '001e41',
-      '0000aa': '004387',
-      '0000ff': '0068ca',
-      '005500': '2b4a2c',
-      '005555': '27514f',
-      '0055aa': '16638d',
-      '0055ff': '007dce',
-      '00aa00': '5e9860',
-      '00aa55': '5c9b72',
-      '00aaaa': '57a5a2',
-      '00aaff': '4cb4db',
-      '00ff00': '8ee391',
-      '00ff55': '8ee69e',
-      '00ffaa': '8aebc0',
-      '00ffff': '84f5f1',
-      '550000': '4a161b',
-      '550055': '482748',
-      '5500aa': '40488a',
-      '5500ff': '2f6bcc',
-      '555500': '564e36',
-      '555555': '545454',
-      '5555aa': '4f6790',
-      '5555ff': '4180d0',
-      '55aa00': '759a64',
-      '55aa55': '759d76',
-      '55aaaa': '71a6a4',
-      '55aaff': '69b5dd',
-      '55ff00': '9ee594',
-      '55ff55': '9de7a0',
-      '55ffaa': '9becc2',
-      '55ffff': '95f6f2',
-      'aa0000': '99353f',
-      'aa0055': '983e5a',
-      'aa00aa': '955694',
-      'aa00ff': '8f74d2',
-      'aa5500': '9d5b4d',
-      'aa5555': '9d6064',
-      'aa55aa': '9a7099',
-      'aa55ff': '9587d5',
-      'aaaa00': 'afa072',
-      'aaaa55': 'aea382',
-      'aaaaaa': 'ababab',
-      'ffffff': 'ffffff',
-      'aaaaff': 'a7bae2',
-      'aaff00': 'c9e89d',
-      'aaff55': 'c9eaa7',
-      'aaffaa': 'c7f0c8',
-      'aaffff': 'c3f9f7',
-      'ff0000': 'e35462',
-      'ff0055': 'e25874',
-      'ff00aa': 'e16aa3',
-      'ff00ff': 'de83dc',
-      'ff5500': 'e66e6b',
-      'ff5555': 'e6727c',
-      'ff55aa': 'e37fa7',
-      'ff55ff': 'e194df',
-      'ffaa00': 'f1aa86',
-      'ffaa55': 'f1ad93',
-      'ffaaaa': 'efb5b8',
-      'ffaaff': 'ecc3eb',
-      'ffff00': 'ffeeab',
-      'ffff55': 'fff1b5',
-      'ffffaa': 'fff6d3'
-    };
 
     /**
      * @param {string|boolean|number} color
      * @returns {string}
      */
     function cssColor(color) {
-      if (color === false) { return 'transparent'; }
       if (typeof color === 'number') {
         color = color.toString(16);
+      } else if (!color) {
+        return 'transparent';
       }
-      while (color.length < 6) {
-        color = '0' + color;
-      }
+
+      color = padColorString(color);
 
       return '#' + (useSunlight ? sunlightColorMap[color] : color);
     }
 
+    /**
+     * @param {string} color
+     * @return {string}
+     */
+    function padColorString(color) {
+      color = color.toLowerCase();
+
+      while (color.length < 6) {
+        color = '0' + color;
+      }
+
+      return color;
+    }
+
+    /**
+     * @param {number|string} value
+     * @returns {string|*}
+     */
+    function normalizeColor(value) {
+      switch (typeof value) {
+        case 'number': return padColorString(value.toString(16));
+        case 'string': return value.replace(/^#|^0x/, '');
+        default: return value;
+      }
+    }
+
+    /**
+     * @param {Array.<Array>} layout
+     * @returns {Array}
+     */
+    function flattenLayout(layout) {
+      return layout.reduce(function(a, b) {
+        return a.concat(b);
+      }, []);
+    }
+
+    /**
+     * Convert HEX color to LAB.
+     * Adapted from: https://github.com/antimatter15/rgb-lab
+     * @param {string} hex
+     * @returns {Array} - [l, a, b]
+     */
+    function hex2lab(hex) {
+      hex = hex.replace(/^#|^0x/, '');
+
+      var r = parseInt(hex.slice(0, 2), 16) / 255;
+      var g = parseInt(hex.slice(2, 4), 16) / 255;
+      var b = parseInt(hex.slice(4), 16) / 255;
+
+      r = (r > 0.04045) ? Math.pow((r + 0.055) / 1.055, 2.4) : r / 12.92;
+      g = (g > 0.04045) ? Math.pow((g + 0.055) / 1.055, 2.4) : g / 12.92;
+      b = (b > 0.04045) ? Math.pow((b + 0.055) / 1.055, 2.4) : b / 12.92;
+
+      var x = (r * 0.4124 + g * 0.3576 + b * 0.1805) / 0.95047;
+      var y = (r * 0.2126 + g * 0.7152 + b * 0.0722) / 1.00000;
+      var z = (r * 0.0193 + g * 0.1192 + b * 0.9505) / 1.08883;
+
+      x = (x > 0.008856) ? Math.pow(x, 1 / 3) : (7.787 * x) + 16 / 116;
+      y = (y > 0.008856) ? Math.pow(y, 1 / 3) : (7.787 * y) + 16 / 116;
+      z = (z > 0.008856) ? Math.pow(z, 1 / 3) : (7.787 * z) + 16 / 116;
+
+      return [(116 * y) - 16, 500 * (x - y), 200 * (y - z)];
+    }
+
+    /**
+     * Find the perceptual color distance between two LAB colors
+     * @param {Array} labA
+     * @param {Array} labB
+     * @returns {number}
+     */
+    function deltaE(labA, labB) {
+      var deltaL = labA[0] - labB[0];
+      var deltaA = labA[1] - labB[1];
+      var deltaB = labA[2] - labB[2];
+
+      return Math.sqrt(Math.pow(deltaL, 2) +
+                       Math.pow(deltaA, 2) +
+                       Math.pow(deltaB, 2));
+    }
+
+    /**
+     * Returns the layout based on the connected watch
+     * @returns {Array}
+     */
+    function autoLayout() {
+      if (!clay.meta.activeWatchInfo ||
+          clay.meta.activeWatchInfo.firmware.major === 2 ||
+          clay.meta.activeWatchInfo.platform === 'aplite' &&
+          !self.config.allowGray) {
+        return standardLayouts.BLACK_WHITE;
+      }
+
+      if (clay.meta.activeWatchInfo.platform === 'aplite' && self.config.allowGray) {
+        return standardLayouts.GRAY;
+      }
+
+      return standardLayouts.COLOR;
+    }
+
+    /**
+     * @param {number|string} color
+     * @return {number}
+     */
+    self.roundColorToLayout = function(color) {
+      var itemValue = normalizeColor(color);
+
+      // if the color is not in the layout we will need find the closest match
+      if (colorList.indexOf(itemValue) === -1) {
+        var itemValueLAB = hex2lab(itemValue);
+        var differenceArr = colorList.map(function(color) {
+          var colorLAB = hex2lab(normalizeColor(color));
+          return deltaE(itemValueLAB, colorLAB);
+        });
+
+        // Get the lowest number from the differenceArray
+        var lowest = Math.min.apply(Math, differenceArr);
+
+        // Get the index for that lowest number
+        var index = differenceArr.indexOf(lowest);
+        itemValue = colorList[index];
+      }
+
+      return parseInt(itemValue, 16);
+    };
+
+    var useSunlight = self.config.sunlight !== false;
+    var sunlightColorMap = {
+      '000000': '000000', '000055': '001e41', '0000aa': '004387', '0000ff': '0068ca',
+      '005500': '2b4a2c', '005555': '27514f', '0055aa': '16638d', '0055ff': '007dce',
+      '00aa00': '5e9860', '00aa55': '5c9b72', '00aaaa': '57a5a2', '00aaff': '4cb4db',
+      '00ff00': '8ee391', '00ff55': '8ee69e', '00ffaa': '8aebc0', '00ffff': '84f5f1',
+      '550000': '4a161b', '550055': '482748', '5500aa': '40488a', '5500ff': '2f6bcc',
+      '555500': '564e36', '555555': '545454', '5555aa': '4f6790', '5555ff': '4180d0',
+      '55aa00': '759a64', '55aa55': '759d76', '55aaaa': '71a6a4', '55aaff': '69b5dd',
+      '55ff00': '9ee594', '55ff55': '9de7a0', '55ffaa': '9becc2', '55ffff': '95f6f2',
+      'aa0000': '99353f', 'aa0055': '983e5a', 'aa00aa': '955694', 'aa00ff': '8f74d2',
+      'aa5500': '9d5b4d', 'aa5555': '9d6064', 'aa55aa': '9a7099', 'aa55ff': '9587d5',
+      'aaaa00': 'afa072', 'aaaa55': 'aea382', 'aaaaaa': 'ababab', 'ffffff': 'ffffff',
+      'aaaaff': 'a7bae2', 'aaff00': 'c9e89d', 'aaff55': 'c9eaa7', 'aaffaa': 'c7f0c8',
+      'aaffff': 'c3f9f7', 'ff0000': 'e35462', 'ff0055': 'e25874', 'ff00aa': 'e16aa3',
+      'ff00ff': 'de83dc', 'ff5500': 'e66e6b', 'ff5555': 'e6727c', 'ff55aa': 'e37fa7',
+      'ff55ff': 'e194df', 'ffaa00': 'f1aa86', 'ffaa55': 'f1ad93', 'ffaaaa': 'efb5b8',
+      'ffaaff': 'ecc3eb', 'ffff00': 'ffeeab', 'ffff55': 'fff1b5', 'ffffaa': 'fff6d3'
+    };
+
     /* eslint-disable  comma-spacing, no-multi-spaces, max-len,
-        standard/array-bracket-even-spacing */
-    var layout = self.config.layout || [
-      [false   , false   , '55ff00', 'aaff55', false   , 'ffff55', 'ffffaa', false   , false   ],
-      [false   , 'aaffaa', '55ff55', '00ff00', 'aaff00', 'ffff00', 'ffaa55', 'ffaaaa', false   ],
-      ['55ffaa', '00ff55', '00aa00', '55aa00', 'aaaa55', 'aaaa00', 'ffaa00', 'ff5500', 'ff5555'],
-      ['aaffff', '00ffaa', '00aa55', '55aa55', '005500', '555500', 'aa5500', 'ff0000', 'ff0055'],
-      [false   , '55aaaa', '00aaaa', '005555', 'ffffff', '000000', 'aa5555', 'aa0000', false   ],
-      ['55ffff', '00ffff', '00aaff', '0055aa', 'aaaaaa', '555555', '550000', 'aa0055', 'ff55aa'],
-      ['55aaff', '0055ff', '0000ff', '0000aa', '000055', '550055', 'aa00aa', 'ff00aa', 'ffaaff'],
-      [false   , '5555aa', '5555ff', '5500ff', '5500aa', 'aa00ff', 'ff00ff', 'ff55ff', false   ],
-      [false   , false   , false   , 'aaaaff', 'aa55ff', 'aa55aa', false   , false   , false   ]
-    ];
+     standard/array-bracket-even-spacing */
+    var standardLayouts = {
+      COLOR: [
+        [false   , false   , '55ff00', 'aaff55', false   , 'ffff55', 'ffffaa', false   , false   ],
+        [false   , 'aaffaa', '55ff55', '00ff00', 'aaff00', 'ffff00', 'ffaa55', 'ffaaaa', false   ],
+        ['55ffaa', '00ff55', '00aa00', '55aa00', 'aaaa55', 'aaaa00', 'ffaa00', 'ff5500', 'ff5555'],
+        ['aaffff', '00ffaa', '00aa55', '55aa55', '005500', '555500', 'aa5500', 'ff0000', 'ff0055'],
+        [false   , '55aaaa', '00aaaa', '005555', 'ffffff', '000000', 'aa5555', 'aa0000', false   ],
+        ['55ffff', '00ffff', '00aaff', '0055aa', 'aaaaaa', '555555', '550000', 'aa0055', 'ff55aa'],
+        ['55aaff', '0055ff', '0000ff', '0000aa', '000055', '550055', 'aa00aa', 'ff00aa', 'ffaaff'],
+        [false   , '5555aa', '5555ff', '5500ff', '5500aa', 'aa00ff', 'ff00ff', 'ff55ff', false   ],
+        [false   , false   , false   , 'aaaaff', 'aa55ff', 'aa55aa', false   , false   , false   ]
+      ],
+      GRAY: [
+        ['000000', 'aaaaaa', 'ffffff']
+      ],
+      BLACK_WHITE: [
+        ['000000', 'ffffff']
+      ]
+    };
     /* eslint-enable */
 
+    var layout = self.config.layout || autoLayout();
+
+    if (typeof layout === 'string') {
+      layout = standardLayouts[layout];
+    }
+
+    // make sure layout is a 2D array
+    if (!Array.isArray(layout[0])) {
+      layout = [layout];
+    }
+
+    var colorList = flattenLayout(layout).map(function(item) {
+      return normalizeColor(item);
+    }).filter(function(item) {
+      return item;
+    });
+
     var grid = '';
-    var itemWidth = 100 / layout[0].length;
-    var itemHeight = 100 / layout.length;
+    var rows = layout.length;
+    var cols = 0;
+    layout.forEach(function(row) {
+      cols = row.length > cols ? row.length : cols;
+    });
+    var itemWidth = 100 / cols;
+    var itemHeight = 100 / rows;
     var $elem = self.$element;
 
-    for (var i = 0; i < layout.length; i++) {
-      for (var j = 0; j < layout[i].length; j++) {
+    for (var i = 0; i < rows; i++) {
+      for (var j = 0; j < cols; j++) {
 
-        var color = layout[i][j];
+        var color = normalizeColor(layout[i][j]);
         var selectable = (color ? ' selectable' : '');
 
         var roundedTL = (i === 0 && j === 0) || i === 0 && !layout[i][j - 1] ||
@@ -146,7 +254,7 @@ module.exports = {
         grid += '<i ' +
           'class="color-box ' + selectable + roundedTL + roundedTR + roundedBL +
               roundedBR + '" ' +
-          'data-value="' + parseInt(color, 16) + '" ' +
+          (color ? 'data-value="' + parseInt(color, 16) + '" ' : '') +
           'style="' +
             'width:' + itemWidth + '%; ' +
             'height:' + itemHeight + '%; ' +
@@ -155,13 +263,34 @@ module.exports = {
       }
     }
 
-    $elem.select('.color-box-container').add(HTML(grid));
+    // on very small layouts the boxes end up huge. The following adds extra padding
+    // to prevent them from being so big.
+    var extraPadding = 0;
+    if (cols === 3) {
+      extraPadding = 5;
+    }
+    if (cols === 2) {
+      extraPadding = 8;
+    }
+    var vPadding = (extraPadding * itemWidth / itemHeight) + '%';
+    var hPadding = extraPadding + '%';
+    $elem.select('.color-box-container')
+      .add(HTML(grid))
+      .set('$paddingTop', vPadding)
+      .set('$paddingRight', hPadding)
+      .set('$paddingBottom', vPadding)
+      .set('$paddingLeft', hPadding);
+
+    $elem.select('.color-box-wrap').set(
+      '$paddingBottom',
+      (itemWidth / itemHeight * 100) + '%'
+    );
 
     var $valueDisplay = $elem.select('.value');
     var $picker = $elem.select('.picker-wrap');
     var disabled = self.$manipulatorTarget.get('disabled');
 
-    $elem.select('label').on('click', function(ev) {
+    $elem.select('label').on('click', function() {
       if (!disabled) {
         $picker.set('show'); // toggle visibility
       }
@@ -191,5 +320,7 @@ module.exports = {
       disabled = false;
     });
 
+    // expose layout for testing
+    self._layout = layout;
   }
 };
diff --git a/src/scripts/lib/manipulators.js b/src/scripts/lib/manipulators.js
index d5e5ee3..25fd76b 100755
--- a/src/scripts/lib/manipulators.js
+++ b/src/scripts/lib/manipulators.js
@@ -160,16 +160,12 @@ module.exports = {
   },
   color: {
     get: function() {
-      return parseInt(this.$manipulatorTarget.get('value'), 16);
+      return parseInt(this.$manipulatorTarget.get('value'), 10) || 0;
     },
     set: function(value) {
-      switch (typeof value) {
-        case 'number': value = value.toString(16); break;
-        case 'string': value = value.replace(/^#|^0x/, ''); break;
-      }
-      value = value || '000000';
+      value = this.roundColorToLayout(value || 0);
 
-      if (this.get() === parseInt(value, 16)) { return this; }
+      if (this.get() === value) { return this; }
       this.$manipulatorTarget.set('value', value);
       return this.trigger('change');
     },
diff --git a/src/styles/clay/_base.scss b/src/styles/clay/_base.scss
index ebc24fd..9e76657 100644
--- a/src/styles/clay/_base.scss
+++ b/src/styles/clay/_base.scss
@@ -113,6 +113,7 @@ label {
 
 .tap-highlight {
   @include tap-highlight();
+  border-radius: $border-radius;
 }
 
 .component {
diff --git a/src/styles/clay/_vars.scss b/src/styles/clay/_vars.scss
index acb1d5e..a6a11ed 100644
--- a/src/styles/clay/_vars.scss
+++ b/src/styles/clay/_vars.scss
@@ -11,8 +11,6 @@ $item-spacing-v: $base-height / 2;
 $item-spacing-h: 0.75rem;
 $small-component-width: $base-height * $golden;
 
-
-
 // ---- Colors ------
 $color-orange: #ff4700;
 $color-orange-dark: #993d19;
@@ -37,4 +35,5 @@ $color-gray-11: #f2f2f2;
 $button-padding: 0.6rem;
 $button-padding-ios: 0.5rem;
 
-$box-shadow-small-components: $color-gray-1 0 0.1rem 0.1rem;
+$box-shadow-small-components: 0 0.1rem 0.1rem $color-gray-1;
+$box-shadow-large-components: 0 rem(3px) rem(15px) rgba(0,0,0,0.4);
diff --git a/src/styles/clay/components/color.scss b/src/styles/clay/components/color.scss
index a6c2752..c1db27a 100644
--- a/src/styles/clay/components/color.scss
+++ b/src/styles/clay/components/color.scss
@@ -20,17 +20,25 @@
     right: 0;
     bottom: 0;
     position: fixed;
-    padding: 1rem;
-    background: rgba(0,0,0,0.7);
+    padding: $item-spacing-v $item-spacing-h /2;
+    background: rgba(0, 0, 0, 0.65);
     opacity: 0;
-    transition: opacity 70ms ease-in 175ms;
+    transition: opacity 100ms ease-in 175ms;
     pointer-events: none;
     z-index: 100;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 
     .picker {
-      padding: 1rem;
-      background: $color-gray-11;
+      padding: $item-spacing-v $item-spacing-h;
+      background: $color-gray-4;
+      box-shadow: $box-shadow-large-components;
       border-radius: $border-radius;
+      width: 100%;
+      max-width: 26rem;
+      overflow: auto;
     }
 
     &.show {
@@ -46,7 +54,6 @@
     height: 0;
     width: 100%;
     padding: 0 0 100% 0; // overridden with inline style
-    margin: 0.6em 0 0;
 
     .color-box-container {
       position: absolute;
@@ -77,7 +84,7 @@
         }
 
         &.selected {
-          transform: scale(1.15);
+          transform: scale(1.1);
           border-radius: $border-radius;
           box-shadow: #111 0 0 0.24rem;
           position: relative;
diff --git a/test/fixture.js b/test/fixture.js
index 20c9e99..37a2183 100644
--- a/test/fixture.js
+++ b/test/fixture.js
@@ -95,14 +95,15 @@ module.exports.config = function(types, autoRegister) {
  * @param {boolean} [build=true] - run the build method on the result
  * @param {boolean} [autoRegister=true]
  * @param {Object} [settings] - settings to pass to constructor
+ * @param {Object} [meta] - override the meta
  * @returns {ClayConfig}
  */
-module.exports.clayConfig = function(types, build, autoRegister, settings) {
+module.exports.clayConfig = function(types, build, autoRegister, settings, meta) {
   var clayConfig = new ClayConfig(
     settings || {},
     module.exports.config(types, autoRegister),
     $(HTML('<div>')),
-    module.exports.meta()
+    module.exports.meta(meta)
   );
   return build === false ? clayConfig : clayConfig.build();
 };
diff --git a/test/karma.conf.js b/test/karma.conf.js
index 9311873..ff82618 100644
--- a/test/karma.conf.js
+++ b/test/karma.conf.js
@@ -12,6 +12,12 @@ module.exports = function(config) {
     // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
     frameworks: ['browserify', 'source-map-support', 'mocha'],
 
+    client: {
+      mocha: {
+        timeout: 10000 // 10 sec because Travis struggles sometimes.
+      }
+    },
+
     browserify: {
       debug: true,
       transform: [
diff --git a/test/spec/components/color.js b/test/spec/components/color.js
index 37e0274..21650e5 100644
--- a/test/spec/components/color.js
+++ b/test/spec/components/color.js
@@ -3,6 +3,48 @@
 var assert = require('chai').assert;
 var fixture = require('../../fixture');
 
+var sunlightColorMap = {
+  '000000': '000000', '000055': '001e41', '0000aa': '004387', '0000ff': '0068ca',
+  '005500': '2b4a2c', '005555': '27514f', '0055aa': '16638d', '0055ff': '007dce',
+  '00aa00': '5e9860', '00aa55': '5c9b72', '00aaaa': '57a5a2', '00aaff': '4cb4db',
+  '00ff00': '8ee391', '00ff55': '8ee69e', '00ffaa': '8aebc0', '00ffff': '84f5f1',
+  '550000': '4a161b', '550055': '482748', '5500aa': '40488a', '5500ff': '2f6bcc',
+  '555500': '564e36', '555555': '545454', '5555aa': '4f6790', '5555ff': '4180d0',
+  '55aa00': '759a64', '55aa55': '759d76', '55aaaa': '71a6a4', '55aaff': '69b5dd',
+  '55ff00': '9ee594', '55ff55': '9de7a0', '55ffaa': '9becc2', '55ffff': '95f6f2',
+  'aa0000': '99353f', 'aa0055': '983e5a', 'aa00aa': '955694', 'aa00ff': '8f74d2',
+  'aa5500': '9d5b4d', 'aa5555': '9d6064', 'aa55aa': '9a7099', 'aa55ff': '9587d5',
+  'aaaa00': 'afa072', 'aaaa55': 'aea382', 'aaaaaa': 'ababab', 'ffffff': 'ffffff',
+  'aaaaff': 'a7bae2', 'aaff00': 'c9e89d', 'aaff55': 'c9eaa7', 'aaffaa': 'c7f0c8',
+  'aaffff': 'c3f9f7', 'ff0000': 'e35462', 'ff0055': 'e25874', 'ff00aa': 'e16aa3',
+  'ff00ff': 'de83dc', 'ff5500': 'e66e6b', 'ff5555': 'e6727c', 'ff55aa': 'e37fa7',
+  'ff55ff': 'e194df', 'ffaa00': 'f1aa86', 'ffaa55': 'f1ad93', 'ffaaaa': 'efb5b8',
+  'ffaaff': 'ecc3eb', 'ffff00': 'ffeeab', 'ffff55': 'fff1b5', 'ffffaa': 'fff6d3'
+};
+
+/* eslint-disable  comma-spacing, no-multi-spaces, max-len,
+ standard/array-bracket-even-spacing */
+var standardLayouts = {
+  COLOR: [
+    [false   , false   , '55ff00', 'aaff55', false   , 'ffff55', 'ffffaa', false   , false   ],
+    [false   , 'aaffaa', '55ff55', '00ff00', 'aaff00', 'ffff00', 'ffaa55', 'ffaaaa', false   ],
+    ['55ffaa', '00ff55', '00aa00', '55aa00', 'aaaa55', 'aaaa00', 'ffaa00', 'ff5500', 'ff5555'],
+    ['aaffff', '00ffaa', '00aa55', '55aa55', '005500', '555500', 'aa5500', 'ff0000', 'ff0055'],
+    [false   , '55aaaa', '00aaaa', '005555', 'ffffff', '000000', 'aa5555', 'aa0000', false   ],
+    ['55ffff', '00ffff', '00aaff', '0055aa', 'aaaaaa', '555555', '550000', 'aa0055', 'ff55aa'],
+    ['55aaff', '0055ff', '0000ff', '0000aa', '000055', '550055', 'aa00aa', 'ff00aa', 'ffaaff'],
+    [false   , '5555aa', '5555ff', '5500ff', '5500aa', 'aa00ff', 'ff00ff', 'ff55ff', false   ],
+    [false   , false   , false   , 'aaaaff', 'aa55ff', 'aa55aa', false   , false   , false   ]
+  ],
+  GRAY: [
+    ['000000', 'aaaaaa', 'ffffff']
+  ],
+  BLACK_WHITE: [
+    ['000000', 'ffffff']
+  ]
+};
+/* eslint-enable */
+
 /**
  * @param {ClayItem} colorItem
  * @returns {void}
@@ -11,6 +53,182 @@ function openPicker(colorItem) {
   colorItem.$element.select('label')[0].click();
 }
 
+/**
+ * @param {string} hex
+ * @returns {string} - eg: "rgb(1, 2, 3)"
+ */
+function hexToRgb(hex) {
+  var result = /^(?:#|0x)?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ?
+    'rgb(' +
+      parseInt(result[1], 16) + ', ' +
+      parseInt(result[2], 16) + ', ' +
+      parseInt(result[3], 16) + ')' :
+    hex;
+}
+
+/**
+ * @param {number|string} value
+ * @returns {string}
+ */
+function normalizeColor(value) {
+  switch (typeof value) {
+    case 'number': value = value.toString(16); break;
+    case 'string': value = value.replace(/^#|^0x/, ''); break;
+  }
+  return value || '000000';
+}
+
+/**
+ * @param {Array.<Array>} layout
+ * @returns {Array}
+ */
+function flattenLayout(layout) {
+  return layout.reduce(function(a, b) {
+    return a.concat(b);
+  }, []);
+}
+
+/**
+ * @param {Array|string} [layout=color]
+ * @param {Array} [expectedColors]
+ * @return {void}
+ */
+function testCustomLayout(layout, expectedColors) {
+
+  describe('layout: ' + JSON.stringify(layout || 'default'), function() {
+
+    describe('Normal', function() {
+      testColors(false, layout, expectedColors);
+    });
+
+    describe('Sunlight', function() {
+      testColors(true, layout, expectedColors);
+    });
+  });
+}
+
+/**
+ * @param {string} platform
+ * @param {Array} layout
+ * @param {boolean} allowGray
+ * @param {string} desc
+ * @param {Object} activeWatchInfo
+ * @return {void}
+ */
+function testAutoLayout(platform, layout, allowGray, desc, activeWatchInfo) {
+  it('chooses the best layout for the ' + (desc || platform) +
+     ' platform when allowGray is ' + allowGray,
+  function() {
+    var clayConfig = fixture.clayConfig(
+      [{type: 'color', allowGray: allowGray}],
+      true,
+      true,
+      {},
+      {
+        activeWatchInfo: activeWatchInfo
+      }
+    );
+    var colorItem = clayConfig.getItemsByType('color')[0];
+    assert.deepEqual(colorItem._layout, layout);
+  });
+}
+
+/**
+ * @param {number|string} input
+ * @param {number} expected
+ * @param {array|string} layout
+ * @return {void}
+ */
+function testClosestToLayout(input, expected, layout) {
+  it('rounds ' + input + ' to ' + expected.toString(16) +
+     ' in layout: ' + JSON.stringify(layout),
+  function() {
+    var clayConfig;
+    var colorItem;
+
+    clayConfig = fixture.clayConfig([{
+      type: 'color',
+      sunlight: false,
+      layout: layout
+    }]);
+    colorItem = clayConfig.getItemsByType('color')[0];
+    colorItem.set(input);
+    assert.strictEqual(colorItem.get(), expected);
+
+    clayConfig = fixture.clayConfig([{
+      type: 'color',
+      sunlight: false,
+      layout: layout
+    }]);
+    colorItem = clayConfig.getItemsByType('color')[0];
+    colorItem.set(input);
+    assert.strictEqual(colorItem.get(), expected);
+  });
+}
+
+/**
+ * @param {boolean} sunlight
+ * @param {Array|string} [layout=color]
+ * @param {Array} [expectedColors]
+ * @return {void}
+ */
+function testColors(sunlight, layout, expectedColors) {
+  var clayConfig;
+  var colorItem;
+  var $colorBoxes;
+  var colors;
+
+  beforeEach(function() {
+    clayConfig = fixture.clayConfig([
+      {
+        type: 'color',
+        layout: layout,
+        sunlight: sunlight
+      }
+    ]);
+    colorItem = clayConfig.getItemsByType('color')[0];
+
+    layout = layout || 'COLOR';
+    if (typeof layout === 'string') {
+      layout = standardLayouts[layout];
+    }
+
+    colors = expectedColors || flattenLayout(layout);
+    $colorBoxes = colorItem.$element.select('.color-box');
+  });
+
+  it('Has the correct items in the layout', function() {
+    colors.forEach(function(color, index) {
+      if (color === false) {
+        assert.strictEqual($colorBoxes[index].dataset.value, undefined);
+      } else {
+        assert.strictEqual(
+          parseInt($colorBoxes[index].dataset.value, 10),
+          parseInt(color || 0, 16)
+        );
+      }
+    });
+  });
+
+  it('sets the color correctly', function() {
+    colors.forEach(function(color, index) {
+      if (color === false) {
+        assert.strictEqual(
+          $colorBoxes[index].style.backgroundColor,
+          'transparent'
+        );
+      } else {
+        var normalizedColor = normalizeColor(color);
+        assert.strictEqual(
+          $colorBoxes[index].style.backgroundColor,
+          hexToRgb(sunlight ? sunlightColorMap[normalizedColor] : normalizedColor)
+        );
+      }
+    });
+  });
+}
+
 describe('component - color', function() {
   it('shows the sunlit colors in the value display', function() {
     var clayConfig = fixture.clayConfig([
@@ -105,4 +323,158 @@ describe('component - color', function() {
     $picker[0].click();
     assert.strictEqual($picker.get('classList').contains('show'), false);
   });
+
+  describe('color rounding', function() {
+    var layout = 'GRAY';
+    testClosestToLayout('000000', 0x000000, layout);
+    testClosestToLayout('005500', 0x000000, layout);
+    testClosestToLayout('55aa55', 0xaaaaaa, layout);
+    testClosestToLayout('ffaaff', 0xaaaaaa, layout);
+    testClosestToLayout('ffffaa', 0xffffff, layout);
+    testClosestToLayout('ffffff', 0xffffff, layout);
+
+    layout = 'BLACK_WHITE';
+    testClosestToLayout('000000', 0x000000, layout);
+    testClosestToLayout('005500', 0x000000, layout);
+    testClosestToLayout('55aa55', 0xffffff, layout);
+    testClosestToLayout('ffaaff', 0xffffff, layout);
+    testClosestToLayout('ffffaa', 0xffffff, layout);
+    testClosestToLayout('ffffff', 0xffffff, layout);
+
+    layout = 'COLOR';
+    testClosestToLayout('000000', 0x000000, layout);
+    testClosestToLayout('005500', 0x005500, layout);
+    testClosestToLayout('55bb55', 0x55aa55, layout);
+    testClosestToLayout('ff99ff', 0xffaaff, layout);
+    testClosestToLayout('ffffee', 0xffffff, layout);
+    testClosestToLayout('ffffff', 0xffffff, layout);
+
+    layout = ['ff0000', 'ff5500', 'ff00ff', '00ff00', '555555'];
+    testClosestToLayout('000000', 0x555555, layout);
+    testClosestToLayout('ff0000', 0xff0000, layout);
+    testClosestToLayout('ff1111', 0xff0000, layout);
+    testClosestToLayout('00aa00', 0x00ff00, layout);
+    testClosestToLayout('ff55ff', 0xff00ff, layout);
+    testClosestToLayout('aaaaaa', 0x555555, layout);
+    testClosestToLayout('ffffff', 0x555555, layout);
+  });
+
+  describe('layouts', function() {
+
+    // allow gray does nothing for 2.x
+    testAutoLayout('aplite', standardLayouts.BLACK_WHITE, true, 'aplite (2.x)',
+      null
+    );
+    testAutoLayout('aplite', standardLayouts.BLACK_WHITE, true, 'aplite (2.x)', {
+      platform: 'aplite',
+      model: 'qemu_platform_aplite',
+      language: 'en_US',
+      firmware: {
+        major: 2,
+        minor: 10,
+        patch: 0,
+        suffix: ''
+      }
+    });
+    testAutoLayout('aplite', standardLayouts.BLACK_WHITE, false, 'aplite (2.x)',
+      null
+    );
+    testAutoLayout('aplite', standardLayouts.BLACK_WHITE, false, 'aplite (2.x)', {
+      platform: 'aplite',
+      model: 'qemu_platform_aplite',
+      language: 'en_US',
+      firmware: {
+        major: 2,
+        minor: 10,
+        patch: 0,
+        suffix: ''
+      }
+    });
+    testAutoLayout('aplite', standardLayouts.BLACK_WHITE, false, 'aplite (3.x)', {
+      platform: 'aplite',
+      model: 'qemu_platform_aplite',
+      language: 'en_US',
+      firmware: {
+        major: 3,
+        minor: 10,
+        patch: 0,
+        suffix: ''
+      }
+    });
+    testAutoLayout('aplite', standardLayouts.GRAY, true, 'aplite (3.x)', {
+      platform: 'aplite',
+      model: 'qemu_platform_aplite',
+      language: 'en_US',
+      firmware: {
+        major: 3,
+        minor: 10,
+        patch: 0,
+        suffix: ''
+      }
+    });
+    testAutoLayout('basalt', standardLayouts.COLOR, true, '', {
+      platform: 'basalt',
+      model: 'qemu_platform_basalt',
+      language: 'en_US',
+      firmware: {
+        major: 3,
+        minor: 10,
+        patch: 0,
+        suffix: ''
+      }
+    });
+    testAutoLayout('chalk', standardLayouts.COLOR, true, '', {
+      platform: 'chalk',
+      model: 'qemu_platform_chalk',
+      language: 'en_US',
+      firmware: {
+        major: 3,
+        minor: 10,
+        patch: 0,
+        suffix: ''
+      }
+    });
+
+    testCustomLayout();
+    testCustomLayout('COLOR');
+    testCustomLayout('GRAY');
+    testCustomLayout('BLACK_WHITE');
+    testCustomLayout(['aaffaa', '55ff55', '00ff00']);
+    testCustomLayout([false, '55ff55', '00ff00']);
+    testCustomLayout([['aaffaa', '55ff55', '00ff00']]);
+    testCustomLayout(
+      [['AAFFAA', '#55ff55', '0x00ff00', 0xff5500, null]],
+      ['aaffaa', '55ff55', '00ff00', 'ff5500', false]
+    );
+    testCustomLayout([
+      ['aaffaa', '55ff55', '00ff00'],
+      ['005555', 'ffffff', '000000']]
+    );
+    testCustomLayout([
+      ['aaffaa', '55ff55', '00ff00'],
+      [false, 'ffffff', false]]
+    );
+    testCustomLayout(
+      [
+        ['aaffaa', '55ff55', '00ff00'],
+        [false, 'ffffff']
+      ],
+      ['aaffaa', '55ff55', '00ff00', false, 'ffffff', false]
+    );
+    testCustomLayout(
+      [
+        ['aaffaa', '55ff55', false],
+        [false, 'ffffff']
+      ],
+      ['aaffaa', '55ff55', false, false, 'ffffff', false]
+    );
+    testCustomLayout(
+      [
+        ['aaffaa', '55ff55'],
+        [false, 'ffffff', '000000']
+      ],
+      ['aaffaa', '55ff55', false, false, 'ffffff', '000000']
+    );
+
+  });
 });
diff --git a/test/spec/index.js b/test/spec/index.js
index 734e690..38cf8a0 100644
--- a/test/spec/index.js
+++ b/test/spec/index.js
@@ -62,8 +62,6 @@ describe('Clay', function() {
 
     it('handles the "showConfiguration" event if autoHandleEvents is not false',
     function() {
-      this.timeout(10000); // 10 seconds
-
       stubPebble();
       var clay = fixture.clay([]);