Add support for writing CSS color names

README.md

@@ -46,6 +46,7 @@ We take the entered color, convert it to HSL and render the same hue and saturat
 - [💅 `styled-components`](https://github.com/styled-components/styled-components)
 - [✨ `polished`](https://github.com/styled-components/polished)
 - [clipboard.js](https://clipboardjs.com/)
+- [`color-name`](https://npm.im/color-name)
 
 ## License
 

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "clipboard": "^1.6.1",
+    "color-name": "^1.1.1",
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
     "styled-components": "^1.4.4"

src/App/index.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { invert } from 'polished';
+import cssColors from 'color-name';
 import Tiles from '../Tiles';
 
 import {
@@ -25,11 +26,17 @@ class App extends Component {
 
   render() {
 		try {
+			let temp = cssColors[this.state.color];
+			if (temp) {
+				temp = `rgb(${temp[0]}, ${temp[1]}, ${temp[2]})`;
+			} else {
+				temp = this.state.color;
+			}
 			// This will throw if this.state.color is invalid,
 			// leaving us with the old colors if somebody enters
 			// an invalid color
-			inverted = invert(this.state.color);
-			color = this.state.color;
+			inverted = invert(temp);
+			color = temp;
 		} catch (err) {}
     return (
 			<Wrapper>