Better custom color logic and updated readme

README.md

@@ -285,12 +285,12 @@ const colors = {
 };
 ```
 
-Custom colors in hex or rgb can be used by providing a `color` option with the
-desired color value. rgb, rgba, and hex values with or without alpha channel are all supported.
+Custom colors can be used by providing a `color` option with the desired color value. A color string parser is included
+to handle hex, rgb and other formats.
+See [color-parse](https://github.com/colorjs/color-parse/tree/master#parsed-strings) for information about supported formats.
 
-For example:
 ```js
-// Add a GeoJSON layer with a custom  inside a layer group called "Assets"
+// Add a GeoJSON layer with a custom color inside a layer group called "Assets"
 const opts = {
   title: 'Animals',
   url: '/farm/assets/geojson/animal/full',

src/styles/index.js

@@ -19,10 +19,17 @@ const colors = {
 
 // Returns an OpenLayers Style for a given color.
 const colorStyles = (color) => {
-  color = color.startsWith('#') || color.startsWith('rgb') ? color : colors[color] || colors.yellow;
+  let strokeColor;
+  if (!color) {
+    strokeColor = colors.yellow;
+  } else if (colors[color]) {
+    strokeColor = colors[color];
+  } else {
+    strokeColor = color;
+  }
 
   const stroke = new Stroke({
-    color: color,
+    color: strokeColor,
     width: 2,
   });
   const fill = new Fill({