Use the color lib for all color things

package.json

@@ -32,7 +32,6 @@
     "react-addons-pure-render-mixin": "^15.4.0",
     "react-collapse": "^2.3.3",
     "react-color": "^2.10.0",
-    "react-colorpickr": "^4.3.0",
     "react-dom": "^15.4.0",
     "react-file-reader-input": "^1.1.0",
     "react-height": "^2.1.1",

src/fields/color.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
+import Color from 'color'
 import inputStyle from './input.js'
-import { getColor } from 'react-colorpickr/dist/colorfunc'
 import ChromePicker from 'react-color/lib/components/chrome/Chrome'
 
 function formatColor(color) {
@@ -35,7 +35,7 @@ class ColorField extends React.Component {
         left: 287
       }}>
       <ChromePicker
-        color={this.props.value ? getColor(this.props.value) : null}
+        color={this.props.value ? Color(this.props.value).object() : null}
         onChange={c => this.props.onChange(formatColor(c))}
       />
       <div

src/layers/listitem.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import Radium from 'radium'
 import Immutable from 'immutable'
-import color from 'color'
+import Color from 'color'
 
 import Heading from 'rebass/dist/Heading'
 import Toolbar from 'rebass/dist/Toolbar'
@@ -60,10 +60,10 @@ class LayerListItem extends React.Component {
         cursor: 'pointer',
         position: 'relative',
         padding: theme.scale[1],
-        borderColor: color(theme.colors.gray).lighten(0.1).hexString(),
+        borderColor: Color(theme.colors.gray).lighten(0.1).string(),
         backgroundColor: theme.colors.gray,
         ":hover": {
-          backgroundColor: color(theme.colors.gray).lighten(0.15).hexString(),
+          backgroundColor: Color(theme.colors.gray).lighten(0.15).string(),
         }
     }}>
       <LayerTypeDragHandle type={this.props.layerType} />