3.0.0 Color Store Component Proposal
## Problem
Each color picker needs a central state and handle transactions with components that want to change that state. There are many different color spaces and we want to support as many as we can ootb. Converting colors, storing them and transforming them back into different colorspaces can become quite cumbersome. 

## Current Solution
There is currently a HOC at (src/components/common/ColorWrap.js) that is doing this for us. It uses the `tinycolor2` package and accepts any arbitrary incoming color format [the package supports](https://www.npmjs.com/package/tinycolor2#accepted-string-input). On every color change, either from above or below this HOC, we use tinycolor2 to transform the color into a myriad of different color spaces and we store all of those in state. Every change calls the onChange handler. onChangeComplete is a debounced method for onChange. It also keeps track of the previous colors hue for the hue and saturation component. 

## Proposed Solution
We create a component to be used at the top level of each color picker and utilize render props to pass down values and onChange handlers. We store any incoming value in LAB (a lossless colorspace) in the state. Using `chroma-js` we get color conversion to and from lab into any colorspace for only 17kb. To align the expected behavior with most react components, `onChange` will fire with “debounced” value changes and we will send every event through to `onEveryChange`. 

## High-level API
The proposed signature is as follows:
```jsx
<ProposedComponent
    value={colorObject}
    onChange={(colorObject, event) => {}}
    onEveryChange={(colorObject, event) => {}}
    colorspaces={[...colorspace]}
>
    {renderProps}
</ProposedComponent>
```

### value
> {[colorSpace]: value}

Set the color of the color picker using a colorspace as the key with the value

### onChange
> ({ [colorSpace]: value, source }, event) => {}

This handler will be called when: a swatch is clicked, a debounce of the onChange on an input , an onMouseUp on a draggable field. It will provide the value, colorspace and source (swatch, input, drag)

### onEveryChange
> ({ [colorSpace]: value, source }, event) => {}

Same signature as onChange. It is inclusive of events from onChange as well as: onChange events from inputs and all drag events from a draggable field will call this. 

### colorpsaces (working name)
> […colorspaces] = ['hex', 'rgba']

An array of colorspace strings, it determines what values are returned in the change handlers. It defaults to hex and rgba, however, any colorspace can be passed in here that we support.  

### renderProps
> ({ [colorSpace]: value, onChange }) => React.Element

Passes down colors and onChange handler for react components.