Add clarity about color values to README.md

README.md

@@ -121,24 +121,24 @@ Note: setting a property to `undefined` will reset it to the default value.
 
 Name                            | Default Value     | Description
 ------------------------------- | ------------------| ---------------------------
-`borderColor`                   | `#000`            | The color of the line around the circumference of the wheel.
+`borderColor`                   | `#000`            | The [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) of the line around the circumference of the wheel.
 `borderWidth`                   | `0`               | The width (in pixels) of the line around the circumference of the wheel.
 `debug`                         | `false`           | Show debugging info.</p><p>This is particularly helpful when fine-tuning labels.
 `image`                         | `''`              | The url of an image that will be drawn over the center of the wheel which will rotate with the wheel.</p><p>It will be automatically scaled to fit `radius`.
 `isInteractive`                 | `true`            | Allow the user to spin the wheel using click-drag/touch-flick. </p><p>User interaction will only be detected within the bounds of `Wheel.radius`.
-`itemBackgroundColors`          | `['#fff']`        | The repeating pattern of background colors for all items.</p><p>Overridden by `Item.backgroundColor`.</p><p>Example: `['#fff','#000']`.
+`itemBackgroundColors`          | `['#fff']`        | The [CSS colors](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to use as a repeating pattern for the background colors of all items.</p><p>Overridden by `Item.backgroundColor`.</p><p>Example: `['#fff','#000']`.
 `itemLabelAlign`                | `'right'`         | The alignment of all item labels.</p><p>Accepted values: `'left'`,`'center'`,`'right'`.
 `itemLabelBaselineOffset`       | `0`               | The offset of the baseline (or line height) of all item labels (as a percent of the label's height).
-`itemLabelColors`               | `['#000']`        | The repeating pattern of colors for all item labels.</p><p>Overridden by `Item.labelColor`.</p><p>Example: `['#fff','#000']`.
+`itemLabelColors`               | `['#000']`        | The [CSS colors](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to use as a repeating pattern for the colors of all item labels.</p><p>Overridden by `Item.labelColor`.</p><p>Example: `['#fff','#000']`.
 `itemLabelFont`                 | `'sans-serif'`    | The font family for all item labels.</p><p>Example: `'sans-serif'`.
 `itemLabelFontSizeMax`          | `100`             | The maximum font size (in pixels) for all item labels.
 `itemLabelRadius`               | `0.85`            | The point along the radius (as a percent, starting from the center of the wheel) to start drawing all item labels.
 `itemLabelRadiusMax`            | `0.2`             | The point along the radius (as a percent, starting from the center of the wheel) to calculate the maximum font size for all item labels.
 `itemLabelRotation`             | `0`               | The rotation of all item labels.<p></p>Use this in combination with `itemLabelAlign` to flip the labels `180°`.
-`itemLabelStrokeColor`          | `#fff`            | The color of the stroke applied to the outside of the label text.
+`itemLabelStrokeColor`          | `#fff`            | The [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) of the stroke applied to the outside of the label text.
 `itemLabelStrokeWidth`          | `0`               | The width of the stroke applied to the outside of the label text.
 `items`                         | `[]`              | The items to show on the wheel.
-`lineColor`                     | `'#000'`          | The color of the lines between the items.
+`lineColor`                     | `'#000'`          | The [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) of the lines between the items.
 `lineWidth`                     | `1`               | The width (in pixels) of the lines between the items.
 `pixelRatio`                    | `0`               | The pixel ratio used to render the wheel.</p><p>Values above 0 will produce a sharper image at the cost of performance.</p><p>A value of `0` will cause the pixel ratio to be automatically determined using `window.devicePixelRatio`.
 `radius`                        | `0.95`            | The radius of the wheel (as a percent of the container's smallest dimension).
@@ -205,14 +205,14 @@ Note: setting a property to `undefined` will reset it to the default value.
 
 Name                            | Default Value     | Description
 ------------------------------- | ----------------- | ---------------------------
-`backgroundColor`               | `null`            | The background color of the item.</p><p>When `null`, the actual color rendered will fall back to `Wheel.itemBackgroundColors`.</p><p>Example: `'#fff'`.
+`backgroundColor`               | `null`            | The [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) of the item's background.</p><p>When `null`, the color will fall back to `Wheel.itemBackgroundColors`.</p><p>Example: `'#fff'`.
 `image`                         | `null`            | The url of an image that will be drawn on the item. Any part of the image that extends outside the item will be clipped. The image will be drawn over the top of `Item.backgroundColor`.
 `imageOpacity`                  | `1`               | The opacity (as a percent) of `Item.image`. Useful if you want to fade the image to make the item's label stand out.
 `imageRadius`                   | `0.5`             | The point along the radius (as a percent, starting from the center of the wheel) to draw the center of `Item.image`.
 `imageRotation`                 | `0`               | The rotation (angle in degrees) of `Item.image`.
 `imageScale`                    | `1`               | The scale (as a percent) to resize `Item.image`.
 `label`                         | `''`              | The text that will be drawn on the item.
-`labelColor`                    | `null`            | The color of the label.</p><p>When `null`, the actual color rendered will fall back to `Wheel.itemLabelColors`.</p><p>Example: `'#000'`.
+`labelColor`                    | `null`            | The [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) of the item's label.</p><p>When `null`, the color will fall back to `Wheel.itemLabelColors`.</p><p>Example: `'#000'`.
 `value`                         | `null`            | Some value that has meaning to your application. For example, a reference to the object representing the item on the wheel, or a database id.
 `weight`                        | `1`               | The proportional size of the item relative to other items on the wheel.</p><p>For example, if you have 2 items where `item[0]` has a weight of `1` and `item[1]` has a weight of `2`, then `item[0]` will take up 1/3 of the space on the wheel.
 

src/item.js

@@ -42,8 +42,8 @@ export class Item {
   }
 
   /**
-   * The background color of the item.
-   * When `null`, the actual color rendered will fall back to `Wheel.itemBackgroundColors`.
+   * The [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) of the item's background.
+   * When `null`, the color will fall back to `Wheel.itemBackgroundColors`.
    * Example: `'#fff'`.
    */
   get backgroundColor() {
@@ -156,8 +156,8 @@ export class Item {
   }
 
   /**
-   * The color of the label.
-   * When `null`, the actual color rendered will fall back to `Wheel.itemLabelColors`.
+   * The [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) of the item's label.
+   * When `null`, the color will fall back to `Wheel.itemLabelColors`.
    * Example: `'#000'`.
    */
   get labelColor() {

src/wheel.js

@@ -776,7 +776,7 @@ export class Wheel {
   }
 
   /**
-   * The color of the line around the circumference of the wheel.
+   * The [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) of the line around the circumference of the wheel.
    */
   get borderColor() {
     return this._borderColor;
@@ -871,7 +871,7 @@ export class Wheel {
   }
 
   /**
-   * The repeating pattern of background colors for all items.
+   * The [CSS colors](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to use as a repeating pattern for the background colors of all items.
    * Overridden by `Item.backgroundColor`.
    * Example: `['#fff','#000']`.
    */
@@ -925,7 +925,7 @@ export class Wheel {
   }
 
   /**
-   * The repeating pattern of colors for all item labels.
+   * The [CSS colors](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to use as a repeating pattern for the colors of all item labels.
    * Overridden by `Item.labelColor`.
    * Example: `['#fff','#000']`.
    */
@@ -1034,7 +1034,7 @@ export class Wheel {
   }
 
   /**
-   * The color of the stroke applied to the outside of the label text.
+   * The [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) of the stroke applied to the outside of the label text.
    */
   get itemLabelStrokeColor() {
     return this._itemLabelStrokeColor;
@@ -1104,7 +1104,7 @@ export class Wheel {
   }
 
   /**
-   * The color of the lines between the items.
+   * The [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) of the lines between the items.
    */
   get lineColor() {
     return this._lineColor;