diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..8d4ae25
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+bower_components
diff --git a/README.md b/README.md
index a10c0b4..70a3b5a 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1 @@
-# paper-color-picker
-A color picker with all the Material Design colours
+# polymer-color-picker
diff --git a/bower.json b/bower.json
new file mode 100644
index 0000000..4380d15
--- /dev/null
+++ b/bower.json
@@ -0,0 +1,41 @@
+{
+  "name": "paper-swatch-picker",
+  "version": "1.0.0",
+  "description": "A color picker element using all the Material Design colours",
+  "authors": [
+    "The Polymer Authors"
+  ],
+  "keywords": [
+    "web-components",
+    "polymer",
+    "color",
+    "picker"
+  ],
+  "main": [
+    "paper-swatch-picker.html"
+  ],
+  "ignore": [],
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/paper-swatch-picker.git"
+  },
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "homepage": "https://github.com/PolymerElements/paper-swatch-picker",
+  "ignore": [],
+  "dependencies": {
+    "iron-iconset-svg": "PolymerElements/iron-iconset-svg#^1.0.0",
+    "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
+    "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
+    "paper-item": "PolymerElements/paper-item#^1.0.0",
+    "paper-listbox": "PolymerElements/paper-listbox#^1.1.1",
+    "paper-menu-button": "PolymerElements/paper-menu-button#^1.0.0",
+    "polymer": "Polymer/polymer#^1.1.0"
+  },
+  "devDependencies": {
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
+    "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
+    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
+    "web-component-tester": "polymer/web-component-tester#^3.4.0"
+  }
+}
diff --git a/demo/index.html b/demo/index.html
new file mode 100644
index 0000000..7b66a8e
--- /dev/null
+++ b/demo/index.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+  <head>
+    <title>paper-swatch-picker demo</title>
+
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <link rel="import" href="../paper-swatch-picker.html">
+
+    <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
+    <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
+
+    <style is="custom-style" include="demo-pages-shared-styles">
+      paper-swatch-picker {
+        margin: 0 10px;
+      }
+    </style>
+  </head>
+  <body unresolved>
+    <div class="vertical-section-container centered">
+      <h3>A color picker of all the Material Design colours</h3>
+      <demo-snippet class="centered-demo">
+        <template>
+          <paper-swatch-picker></paper-swatch-picker>
+          <paper-swatch-picker color="#E91E63"></paper-swatch-picker>
+          <!-- Disable the ripple on the color picker button -->
+          <paper-swatch-picker color="#2196F3" noink></paper-swatch-picker>
+        </template>
+      </demo-snippet>
+
+      <h3>The palette used by the color picker can be configured</h3>
+      <demo-snippet class="centered-demo">
+        <template>
+          <paper-swatch-picker column-count=5 color-list='["#65a5f2", "#2b63ba", "#83be54", "#3b8638", "#f0d551", "#d7be48", "#e5943c", "#cf712e", "#a96ddb", "#6f4196"]' ></paper-swatch-picker>
+        </template>
+      </demo-snippet>
+
+      <h3>The picker can be styled using custom properties</h3>
+      <demo-snippet class="centered-demo">
+        <template>
+          <style is="custom-style">
+            paper-swatch-picker.fancy {
+              --paper-swatch-picker-color-size: 10px;
+              --paper-swatch-picker-icon-size: 40px;
+            }
+          </style>
+          <paper-swatch-picker class="fancy"></paper-swatch-picker>
+        </template>
+      </demo-snippet>
+    </div>
+  </body>
+</html>
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..23b0dd4
--- /dev/null
+++ b/index.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <title>paper-swatch-picker</title>
+
+  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../iron-component-page/iron-component-page.html">
+
+</head>
+<body>
+
+<iron-component-page></iron-component-page>
+
+</body>
+</html>
diff --git a/paper-swatch-picker-icon.html b/paper-swatch-picker-icon.html
new file mode 100644
index 0000000..cad1ec5
--- /dev/null
+++ b/paper-swatch-picker-icon.html
@@ -0,0 +1,8 @@
+<link rel="import" href="../iron-icon/iron-icon.html">
+<link rel="import" href="../iron-iconset-svg/iron-iconset-svg.html">
+
+<iron-iconset-svg size="24" name="swatch">
+<svg><defs>
+<g id="format-color-fill"><path d="M16.56 8.94L7.62 0 6.21 1.41l2.38 2.38-5.15 5.15c-.59.59-.59 1.54 0 2.12l5.5 5.5c.29.29.68.44 1.06.44s.77-.15 1.06-.44l5.5-5.5c.59-.58.59-1.53 0-2.12zM5.21 10L10 5.21 14.79 10H5.21zM19 11.5s-2 2.17-2 3.5c0 1.1.9 2 2 2s2-.9 2-2c0-1.33-2-3.5-2-3.5z"></path><path fill-opacity=".36" d="M0 20h24v4H0z"></path></g>
+</defs></svg>
+</iron-iconset-svg>
diff --git a/paper-swatch-picker.html b/paper-swatch-picker.html
new file mode 100644
index 0000000..6225c1e
--- /dev/null
+++ b/paper-swatch-picker.html
@@ -0,0 +1,270 @@
+<!--
+@license
+Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="../paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../paper-listbox/paper-listbox.html">
+<link rel="import" href="../paper-item/paper-item.html">
+<link rel="import" href="../paper-menu-button/paper-menu-button.html">
+<link rel="import" href="./paper-swatch-picker-icon.html">
+
+<!--
+This is a simple color picker element that will allow you to choose one
+of the Material Design colors from a list of available swatches.
+
+Example:
+
+    <paper-swatch-picker></paper-swatch-picker>
+
+    <paper-swatch-picker color="{{selectedColor}}"></paper-swatch-picker>
+
+You can configure the color palette being used using the `colorList` array and
+the `columnCount` property, which specifies how many "generic" colours (i.e. columns
+in the picker) you want to display.
+
+    <paper-swatch-picker column-count=5 color-list='["#65a5f2", "#83be54", "#f0d551", "#e5943c", "#a96ddb"]'></paper-swatch-picker>
+
+### Styling
+
+The following custom properties and mixins are available for styling:
+
+Custom property | Description | Default
+----------------|-------------|----------
+`--paper-swatch-picker-color-size` | The size of each of the color boxes | `20px`
+`--paper-swatch-picker-icon-size` | The size of the color picker icon | `24px`
+`--paper-swatch-picker-icon` | Mixin applied to the color picker icon | `{}`
+
+@element paper-swatch-picker
+@demo demo/index.html
+-->
+
+<dom-module id="paper-swatch-picker">
+  <template>
+    <style>
+      :host {
+        display: inline-block;
+        position: relative;
+      }
+
+      :host(:focus) {
+        outline: none;
+      }
+
+      .color {
+        box-sizing: border-box;
+        width: var(--paper-swatch-picker-color-size, 20px);
+        height: var(--paper-swatch-picker-color-size, 20px);
+        display: inline-block;
+        padding: 0;
+        margin: 0;
+        cursor: pointer;
+        font-size: 0;
+        position: relative;
+      }
+
+      /* If we just scale the paper-item when hovering, this will end up
+       * adding scrollbars to the paper-listbox that are hard to get rid of.
+       * An easy workaround is to use an :after pseudo element instead. */
+      .color:after {
+        @apply(--layout-fit);
+        background: currentColor;
+        content: '';
+        -webkit-transition: -webkit-transform 0.2s;
+        transition: transform .2s;
+        z-index: 0;
+      }
+
+      .color:hover:after, .color:focus:after {
+        -webkit-transform: scale(1.3, 1.3);
+        transform: scale(1.3, 1.3);
+        outline: none;
+        z-index: 1;
+      }
+
+      paper-icon-button {
+        @apply(--paper-swatch-picker-icon);
+      }
+
+      paper-item {
+        --paper-item: {
+          margin: 0;
+          padding: 0;
+          min-height: 0;
+        };
+
+        --paper-item-focused-before: {
+          opacity: 0;
+        };
+      }
+
+      paper-listbox {
+        padding: 0;
+        font-size: 0;
+        overflow: hidden;
+        @apply(--layout-vertical);
+        @apply(--layout-wrap);
+      }
+    </style>
+
+    <paper-menu-button id="menu">
+      <paper-icon-button
+          id="iconButton"
+          icon="swatch:format-color-fill"
+          class="dropdown-trigger" alt="color picker"
+          noink$="[[noink]]">
+      </paper-icon-button>
+      <paper-listbox class="dropdown-content" id="container">
+        <template is="dom-repeat" items="{{colorList}}">
+          <paper-item class="color">{{item}}</paper-item>
+        </template>
+      </paper-listbox>
+    </paper-menu-button>
+
+  </template>
+
+  <script>
+    Polymer({
+      is: 'paper-swatch-picker',
+
+      hostAttributes: {
+        'tabindex': 0
+      },
+
+      listeners: {
+        'paper-dropdown-open': '_onOpen',
+        'iron-select': '_onColorTap'
+      },
+
+      /**
+       * Fired when a color has been selected
+       *
+       * @event color-picker-selected
+       */
+
+      properties: {
+        /**
+         * The selected color, as hex (i.e. #ffffff).
+         * value.
+         */
+        color: {
+          type: String,
+          observer: '_colorChanged'
+        },
+
+        /**
+         * The colors to be displayed. By default, these are the Material Design
+         * colors. This array is arranged by "generic color", so for example,
+         * all the reds (from light to dark), then the pinks, then the blues, etc.
+         * Depending on how many of these generic colors you have, you should
+         * update the `columnCount` property.
+         */
+        colorList: {
+          type: Array,
+          value: function() {
+            return ["#ffebee", "#ffcdd2", "#ef9a9a", "#e57373", "#ef5350", "#f44336", "#e53935", "#d32f2f", "#c62828", "#b71c1c", "#fce4ec", "#f8bbd0", "#f48fb1", "#f06292", "#ec407a", "#e91e63", "#d81b60", "#c2185b", "#ad1457", "#880e4f", "#f3e5f5", "#e1bee7", "#ce93d8", "#ba68c8", "#ab47bc", "#9c27b0", "#8e24aa", "#7b1fa2", "#6a1b9a", "#4a148c", "#ede7f6", "#d1c4e9", "#b39ddb", "#9575cd", "#7e57c2", "#673ab7", "#5e35b1", "#512da8", "#4527a0", "#311b92", "#e8eaf6", "#c5cae9", "#9fa8da", "#7986cb", "#5c6bc0", "#3f51b5", "#3949ab", "#303f9f", "#283593", "#1a237e", "#e3f2fd", "#bbdefb", "#90caf9", "#64b5f6", "#42a5f5", "#2196f3", "#1e88e5", "#1976d2", "#1565c0", "#0d47a1", "#e1f5fe", "#b3e5fc", "#81d4fa", "#4fc3f7", "#29b6f6", "#03a9f4", "#039be5", "#0288d1", "#0277bd", "#01579b", "#e0f7fa", "#b2ebf2", "#80deea", "#4dd0e1", "#26c6da", "#00bcd4", "#00acc1", "#0097a7", "#00838f", "#006064", "#e0f2f1", "#b2dfdb", "#80cbc4", "#4db6ac", "#26a69a", "#009688", "#00897b", "#00796b", "#00695c", "#004d40", "#e8f5e9", "#c8e6c9", "#a5d6a7", "#81c784", "#66bb6a", "#4caf50", "#43a047", "#388e3c", "#2e7d32", "#1b5e20", "#f1f8e9", "#dcedc8", "#c5e1a5", "#aed581", "#9ccc65", "#8bc34a", "#7cb342", "#689f38", "#558b2f", "#33691e", "#f9fbe7", "#f0f4c3", "#e6ee9c", "#dce775", "#d4e157", "#cddc39", "#c0ca33", "#afb42b", "#9e9d24", "#827717", "#fffde7", "#fff9c4", "#fff59d", "#fff176", "#ffee58", "#ffeb3b", "#fdd835", "#fbc02d", "#f9a825", "#f57f17", "#fff8e1", "#ffecb3", "#ffe082", "#ffd54f", "#ffca28", "#ffc107", "#ffb300", "#ffa000", "#ff8f00", "#ff6f00", "#fff3e0", "#ffe0b2", "#ffcc80", "#ffb74d", "#ffa726", "#ff9800", "#fb8c00", "#f57c00", "#ef6c00", "#e65100", "#fbe9e7", "#ffccbc", "#ffab91", "#ff8a65", "#ff7043", "#ff5722", "#f4511e", "#e64a19", "#d84315", "#bf360c", "#efebe9", "#d7ccc8", "#bcaaa4", "#a1887f", "#8d6e63", "#795548", "#6d4c41", "#5d4037", "#4e342e", "#3e2723", "#fafafa", "#f5f5f5", "#eeeeee", "#e0e0e0", "#bdbdbd", "#9e9e9e", "#757575", "#616161", "#424242", "#212121"];
+          }
+        },
+
+        /* The number of columns to display in the picker. This corresponds to
+         * the number of generic colors (i.e. not counting the light/dark) variants
+         * of a specific color) you are using in your `colorList`. For example,
+         * the Material Design palette has 18 colors */
+        columnCount: {
+          type: Number,
+          value: 18
+        },
+
+        /**
+         * If true, the color picker button will not produce a ripple effect when interacted
+         * with via the pointer.
+         */
+        noink: {
+          type: Boolean
+        }
+      },
+
+      created: function() {
+        // Note: we won't actually render these color boxes unless the menu is
+        // actually tapped.
+        this._renderedColors = false;
+      },
+
+      attached: function() {
+        // Fit the color boxes in columns. We first need to get the width of
+        // a color box (which is customizable), and then change the box's
+        // width to fit all the columns.
+        var sizeOfAColorDiv = this.getComputedStyleValue('--paper-swatch-picker-color-size');
+        if (!sizeOfAColorDiv || sizeOfAColorDiv == '') {  // Default value case
+          sizeOfAColorDiv = 20;
+        } else {
+          sizeOfAColorDiv = sizeOfAColorDiv.replace('px', '');
+        }
+
+        var rowCount = this.colorList.length / this.columnCount;
+        this.$.container.style.height = rowCount * sizeOfAColorDiv + 'px';
+        this.$.container.style.width = this.columnCount * sizeOfAColorDiv + 'px';
+      },
+
+      _onOpen: function() {
+        // Fill in the colors if we haven't already.
+        if (this._renderedColors)
+          return;
+
+        var colorBoxes = this.$.container.querySelectorAll('.color');
+        for (var i = 0; i < colorBoxes.length; i++) {
+          colorBoxes[i].style.color = colorBoxes[i].innerHTML;
+          colorBoxes[i].innerHTML = '';
+        }
+        this._renderedColors = true;
+      },
+
+      _addOverflowClass: function() {
+        this.$.container.toggleClass('opened', true);
+      },
+
+      _removeOverflowClass: function() {
+        this.$.container.toggleClass('opened', false);
+      },
+
+      _onColorTap: function(event) {
+        var item = event.detail.item;
+        // The inner `span` element has the background color;
+        var color = item.style.color;
+
+        // If it's in rgb format, convert it first.
+        this.color = color.indexOf('rgb') === -1 ? color : this._rgbToHex(color);
+        this.fire('color-picker-selected', {color: this.color});
+      },
+
+      _colorChanged: function() {
+        this.$.iconButton.style.color = this.color;
+      },
+
+      /**
+       * Takes an rgb(r, g, b) style string and converts it to a #ffffff hex value.
+       */
+      _rgbToHex: function(rgb) {
+        // Split the rgb(r, g, b) string up.
+        var split = rgb.split("(")[1].split(")")[0].split(",");
+
+        if (split.length != 3)
+          return '';
+
+        // From https://gist.github.com/lrvick/2080648.
+        var bin = split[0] << 16 | split[1] << 8 | split[2];
+        return (function(h) {
+          return '#' + new Array(7 - h.length).join("0") + h;
+        })(bin.toString(16).toLowerCase());
+      }
+    });
+  </script>
+
+</dom-module>
diff --git a/test/basic.html b/test/basic.html
new file mode 100644
index 0000000..1793e09
--- /dev/null
+++ b/test/basic.html
@@ -0,0 +1,164 @@
+<!doctype html>
+<!--
+Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>paper-swatch-picker basic tests</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../iron-test-helpers/mock-interactions.js"></script>
+  <script src="../../iron-test-helpers/test-helpers.js"></script>
+
+  <link rel="import" href="../paper-swatch-picker.html">
+</head>
+<body>
+  <style is="custom-style">
+    paper-swatch-picker.custom {
+      --paper-swatch-picker-color-size: 10px;
+    }
+  </style>
+
+  <test-fixture id="basic">
+    <template>
+      <paper-swatch-picker></paper-swatch-picker>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="preselected">
+    <template>
+      <paper-swatch-picker class="preselected" color="#ffcdd2"></paper-swatch-picker>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="custom">
+    <template>
+      <paper-swatch-picker class="custom" column-count="5" color-list='["#ff0000", "#00ff00", "#0000ff", "#000", "#fff"]'></paper-swatch-picker>
+    </template>
+  </test-fixture>
+
+  <script>
+    suite('basic', function() {
+      var picker, container;
+
+      setup(function() {
+        picker = fixture('basic');
+        container = picker.$.container;
+      });
+
+      test('clicking the button opens a rendered menu', function(done) {
+        Polymer.dom.flush();
+
+        // No color is selected.
+        assert.equal(picker.color, undefined);
+        MockInteractions.tap(picker.$.iconButton);
+
+        Polymer.Base.async(function() {
+          // There are 18 default columns, and each column is 20px wide.
+          assert.equal(container.style.width, 18 * 20 +'px');
+          // There are 10 default rows, and each row is 20px wide.
+          assert.equal(container.style.height, 10 * 20 +'px');
+
+          // The colors have been filled in. The first box is #ffebee.
+          var box = container.querySelector('.color');
+          assert.equal('#ffebee', picker._rgbToHex(box.style.color));
+          done();
+        }, 1);
+      });
+
+      test('clicking a color selects it', function(done) {
+        Polymer.dom.flush();
+
+        // No color is selected.
+        assert.equal(picker.color, undefined);
+        MockInteractions.tap(picker.$.iconButton);
+
+        Polymer.Base.async(function() {
+          // The colors have been filled in. The first box is #ffebee.
+          var box = container.querySelector('.color');
+          MockInteractions.tap(box);
+          Polymer.Base.async(function() {
+            assert.equal('#ffebee', picker.color);
+            assert.equal('#ffebee', picker._rgbToHex(picker.$.iconButton.style.color));
+            done();
+          }, 1);
+        });
+      });
+    });
+
+    suite('initial selection', function() {
+      var picker, container;
+
+      setup(function() {
+        picker = fixture('preselected');
+        container = picker.$.container;
+      });
+
+      test('the picker can have an initially selected color', function() {
+        Polymer.dom.flush();
+        assert.equal(picker.color, '#ffcdd2');
+        assert.equal('#ffcdd2', picker._rgbToHex(picker.$.iconButton.style.color));
+      });
+
+      test('selecting a different color updates the button color', function(done) {
+        Polymer.dom.flush();
+        assert.equal(picker.color, '#ffcdd2');
+        assert.equal('#ffcdd2', picker._rgbToHex(picker.$.iconButton.style.color));
+
+        MockInteractions.tap(picker.$.iconButton);
+
+        Polymer.Base.async(function() {
+          // Select a different color. The first box is #ffebee.
+          var box = container.querySelector('.color');
+          MockInteractions.tap(box);
+          Polymer.Base.async(function() {
+            assert.equal('#ffebee', picker.color);
+            assert.equal('#ffebee', picker._rgbToHex(picker.$.iconButton.style.color));
+            done();
+          }, 1);
+        }, 1);
+      });
+    });
+
+    suite('custom color list', function() {
+      var picker, container;
+
+      setup(function() {
+        picker = fixture('custom');
+        container = picker.$.container;
+      });
+
+      test('the picker shows the right colors', function(done) {
+        Polymer.dom.flush();
+        assert.equal(picker.colorList.length, 5);
+
+        MockInteractions.tap(picker.$.iconButton);
+
+        Polymer.Base.async(function() {
+          // There are 5 default columns, and each column is 10px wide.
+          assert.equal(container.style.width, 5 * 10 +'px');
+          // There is 1 default row, and each row is 10px wide.
+          assert.equal(container.style.height, 10 +'px');
+
+          // The colors have been filled in correctly
+          var boxes = container.querySelectorAll('.color');
+          assert.equal('#ff0000', picker._rgbToHex(boxes[0].style.color));
+          assert.equal('#00ff00', picker._rgbToHex(boxes[1].style.color));
+          assert.equal('#0000ff', picker._rgbToHex(boxes[2].style.color));
+          assert.equal('#000000', picker._rgbToHex(boxes[3].style.color));
+          assert.equal('#ffffff', picker._rgbToHex(boxes[4].style.color));
+          done();
+        }, 1);
+      });
+    });
+  </script>
+</body>
+</html>
diff --git a/test/index.html b/test/index.html
new file mode 100644
index 0000000..befe80a
--- /dev/null
+++ b/test/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!--
+Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html><head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+  <title>paper-swatch-picker tests</title>
+  <script src="../../web-component-tester/browser.js"></script>
+</head>
+<body>
+  <script>
+    WCT.loadSuites([
+      'basic.html',
+      'basic.html?dom=shadow'
+    ]);
+  </script>
+</body></html>
